项目要求：
需求 1： 此 app 中应存在一个 id="title" 的大小为 H1 的标题。
需求 2： 此 app 中应存在一段 id="description" 的大小为 P 的短小的描述。
需求 3： 此 app 中应存在一个 id="survey-form" 的 form 元素。
需求 4： 在表单元素内，应存在 id="name" 的输入框（必填项），以便用户输入姓名。
需求 5： 在表单元素内，应存在 id="email" 的输入框（必填项），以便用户输入邮箱。
需求 6： 如果用户输入了格式不正确的邮箱，则应出现来自 HTML5 表单数据校验的错误信息。
需求 7： 在表单内，用户应可以在 id="number" 的输入框中输入数字。
需求 8： 如果用户在数字输入框内输入非数字内容，则应出现来自 HTML5 表单数据校验的错误信息。
需求 9： 如果用户输入的数字超出了使用 min 和 max 属性定义的范围，则应出现来自 HTML5 表单数据校验的错误信息。
需求 10： 表单中的姓名、邮箱和数字输入框需有对应的包含描述输入框用途的标签。这些标签的 id 应分别为 id="name-label"、id="email-label" 和 id="number-label"。
需求 11： 表单中的姓名、邮箱和数字输入框需有对应的描述文字作为占位符。
需求 12： 在表单元素内，应存在一个 id="dropdown" 的下拉列表，用户可以从中选取一个选项。
需求 13： 在表单元素内，应至少存在一组单选按钮，用户可以从中选取一个选项。 每组应使用 name 属性进行分组。
需求 14： 在表单元素内，应存在几个复选框，且每个复选框都应有 value 属性。
需求 15： 在表单元素的最后，应存在一个 textarea 元素，以便用户输入额外的批注。
需求 16： 在表单元素内，应存在一个 id="submit" 的按钮，以便用户提交表单。
实验内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>调查表</title>
<meta charest="utf-8">
<style>
#title{
text-align: center;
}
h2{
margin-top: 60px;
text-align: center;
}
#description{
text-align:center;
}
#survey-form{
}
#choose{
display: block;
margin-left: 52%;
transform: scale(1.3);
margin-bottom: 30px;
}
label,textarea{
margin-top: 40px;
display: block;
width: 50%;
height: 30px;
margin: 0 auto;
outline: none;
}
label+input{
border-radius: 12px;
outline: none;
display: block;
width: 50%;
height: 30px;
margin: 0 auto;
background-color: #FFF0F5;
}
#name{
}
#email{
}
#number{
}
#name-label{
}
#email-label{
}
#number-label{
}
#dropdown{
display: block;
width: 50%;
margin: auto;
height: 4em;
margin-top: 20px;
background-color: #9370DB;
border-radius: 12px;
}
#submit{
display: block;
margin-left: 71%;
transform: scale(1.3);
margin-top: 30px;
margin-bottom: 30px;
border-radius: 12px;
outline: none;
}
</style>
</head>
<body style="background-color:#99CCFF">
<header>
<h1 id="title">爱宠调查</h1>
<p id="description">此调查旨在统计广大网民领养不同宠物的意向</p>
</header>
<form id="survey-form" action=" ">
<div>
<label id="name-label" for="name">昵称：</label>
<input id="name" type="text" placeholder="Please input your name" value="" required>
<label id="email-label" for="email">邮箱：</label>
<input id="email" type="email" placeholder="Please input your email" value="" required>
<label id="number-label" for="number">数字：</label>
<input id="number" type="number" placeholder="Please input your number" value="" max="0" min="100" >
</div>
<h2>是否有养过宠物呢？</h2>
<div id="choose">
<input name="if" type="radio" value="yes">是<br />
<input name="if" type="radio" value="no">否<br />
</div>
<h2>最想要领养以下哪种宠物呢？</h2>
<div>
<select style="outline: none;" id="dropdown" name="animals">
<option value="dog">狗狗</option>
<option value="cat">猫猫</option>
<option value="bird">鹦鹉</option>
</select>
</div>
<h2>为什么最想要领养该宠物呢？</h2>
<div id="choose">
<input type="checkbox" name="why" value="mild">性格温和<br />
<input type="checkbox" name="why" value="smart">聪明可爱<br />
<input type="checkbox" name="why" value="live">活泼粘人<br />
</div>
<h2>其他补充：</h2>
<div>
<textarea style="border-radius:12px;" width="50" height="50px" row="3" cols="20"></textarea>
</div>
<input id="submit" margin-right="1em" type="submit" name="submit"><br />
</form>
</body>
</html>
几个用到的常用小结构：
带占位符的文本框:
<input type="text" placeholder="Please input your name" value="" required>
其中若value不为空，则文本框初始状态中就是value的值，此时就看不见占位符“Please input your name”了。
单选按钮:
<form action=" ">
<input name="if" type="radio" value="yes">是<br />
<input name="if" type="radio" value="no">否<br />
</action>
其中radio指明此时为复选框，name用于区分多种单选框，value为传回action的值。
复选框:
<form action=" ">
<input type="checkbox" name="why" value="mild">性格温和<br />
<input type="checkbox" name="why" value="smart">聪明可爱<br />
<input type="checkbox" name="why" value="live">活泼粘人<br />
</form>
其中checkbox指明此时为复选框，name用于区分多种复选框，value为传回action的值。
texarea元素具体介绍：
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea
基本使用方法：
<textarea row="3" cols="20"></textarea>
小结:
初学，编写的页面非常简单，仅完成题目所有需求，没有过多美化。
这个项目主要针对文本域、单选按钮、复选框、提交按钮及textarea元素进行了练习。
