1. 表单
1.1 作用
表单的主要作用是：收集用户的信息
1.2 组成
一个完整的表单由三部分组成：
表单域（整个表单的领域）
提示信息（无实质作用，只用于提示控件的填写或选择）
表单控件（也叫表单元素，可以选或填信息）
1.3 表单域
<form>标签用于定义表单域，它会把范围里的表单元素提交给服务器
语法：
<form action="url" method="提交方式" name="表单域的名称">
表单控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url | 指定接受处理表单的服务器的地址 |
| method | get/post | 指定表单的提交方式 |
| name | str | 给表单域命名，以区分同一页面的不同的表单域 |
1.4 表单元素<input>
1.4.1 作用
input的意思是输入，主要用于收集用户信息
1.4.2 语法
<input type="属性值">
1.4.3 type属性
| 值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
| checkbox | 定义复选框。 |
| file | 定义输入字段和 "浏览"按钮，供文件上传。 |
| hidden | 定义隐藏的输入字段。 |
| image | 定义图像形式的提交按钮。 |
| password | 定义密码字段。该字段中的字符被掩码。 |
| radio | 定义单选按钮。 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
1.4.4 type=“text” 和 type=“password”
账号：<input type="text"><br/>
密码：<input type="password"><br/>
1.4.5 type=“radio” 和 type=“checkbox”
性别：<input type="radio">男 <input type="radio">女 <br/>
爱好：<input type="checkbox"> 游泳 <input type="checkbox"> 蓝球 <input type="checkbox"> 跑步<br/>
感觉好像没问题，但实际操作中发现单选无法单选！！！
解决：单选按钮相同name互斥【这里后面会更详细介绍】
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <br/>
1.4.6 type=“submit” 和 type=“reset”
<input type="submit">
<input type="reset">
但这样未免太过单调，我们通过value属性换下里面的文字
<input type="submit" value="我要提交">
<input type="reset" value="我要重填">
1.4.7 type=“button” 和 type=“file”
<input type="button" value="我是一个平平无奇的按钮"><br/><br/>
上传文件<input type="file">
1.4.8 除type外的其他属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | str | 定义input元素的名 |
| value | str | 定义input元素的值 |
| checked | checked | 规定某个input元素首次加载应该被选中 |
| maxlength | number | 规定输入字段中字符的最大长度 |
- name和value是每个表单元素都有的属性，主要给后台人员使用，所以一般都会设置。
- name是表单元素的名字，要求同一类的单选按钮和复选框都使用同样的name（为了区别和其他类的区别）。
- checked主要用于单选按钮和复选框，主要用于一打开界面，这些按钮可以默认选中，可提高用户体验。
- maxlength属性较少用，之后一般会用正则表达式限制。
- checked属性
性别：<input type="radio" name="sex" >男 <input type="radio" name="sex" checked="checked">女 <br/>
爱好：<input type="checkbox"> 游泳 <input type="checkbox" checked="checked"> 蓝球 <input type="checkbox"> 跑步<br/>
key和value属性
一般所有表单元素我们都会设置name，让后台人员使用，而value是表单的值。
我们如果type=“text”，类似这样的输入，输了什么它的value就是什么。
但像单选按钮和复选框这种，控件本身和提示文字是没有任何联系，通过value值可以让我们更加明确我们选了什么。
2. label标签
2.1 定义
例如单选按钮、复选框等控件，他们很小，我们点的时候可能不太好点。所有我们会想要通过点击他们的提示文字，做到点击他们旁边的控件的效果。
所以我们引入了<label>标签让控件和其提示文字绑定。
2.2 语法
<label for="man">男</label>
<input type="radio" id="man" name="sex" value="男">
<lable>中的for属性应与表单元素的id属性值相同。
3. select标签
3.1 定义
有时，如果选项很多（比如省市这类的选项选择），我们如果用单选按钮或者复选框是很浪费空间的，而且也不美观，想想看一堆密密麻麻的按钮，体验多差呀！
3.2 语法
<select>
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="选项三">选项三</option>
</select>
注意点：
- <select>标签里面至少得包含一个<option>
- 如果定义 selected=“selected” 时，可以在打开页面就默认选中项，类似checked属性。
4. textarea标签
4.1 定义
当文本过多时<input>标签的text控件是不够用的，所以就有了多行文本输入的textarea标签，常用于留言板和评论。
4.2 语法
<textarea cols="30" rows="10">
文本内容
</textarea>
以上两个属性cols和rows实际开发不会用，一般都用css来改变大小。
5. 表单综合案例
5.1 要求
完成以下页面：
5.2 分析
5.3 代码
正常来说，应该用<form></form>包含<table></table>，但是这里没有使用，因为和我认为的表单域不太一样，而且我们一般也不用表格布局，这里只是为了熟悉表格操作。
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width = "600">
<tr>
<td>性别:</td>
<td>
<input type="radio" id="man" name="sex" value="男">
<label for="man"><img src="./img/man.jpg"> 男</label>
<input type="radio" id="woman" name="sex" value="女">
<label for="woman"><img src="./img/women.jpg"> 女</label>
</td>
</tr>
<tr>
<td>生日:</td>
<td>
<select name="birth_year" id="birth_year">
<option>--请选择年份--</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
<select name="birth_month" id="birth_month">
<option>--请选择月份--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="birth_day" id="birth_day">
<option>--请选择日--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>所在地区:</td>
<td><input type="text" name="area" value="北京思密达"></td>
</tr>
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" id="unmarried" value="unmarried"> <label for="unmarried">未婚</label>
<input type="radio" name="marry" id="married" value="married"> <label for="married">已婚</label>
<input type="radio" name="marry" id="divorce" value="divorce"> <label for="divorce">离婚</label>
</td>
</tr>
<tr>
<td>学历:</td>
<td><input type="text" name="area" value="博士后"></td>
</tr>
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="like" id="wumei" value="wumei"> <label for="wumei">妩媚的</label>
<input type="checkbox" name="like" id="keai" value="keai"> <label for="keai">可爱的</label>
<input type="checkbox" name="like" id="xianrou" value="xianrou"> <label for="xianrou">小鲜肉</label>
<input type="checkbox" name="like" id="larou" value="larou"> <label for="larou">老腊肉</label>
<input type="checkbox" name="like" id="all_link" value="all_link"> <label for="all_link">都喜欢</label>
</td>
</tr>
<tr>
<td>个人介绍:</td>
<td>
<textarea name="personal_introduction" cols="20" rows="2">个人简介</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" name="zhuche" value="免费注册">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked" id="agree"><label for="agree"> 我同意注册条款和会员加入标准</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
本文主要学习黑马程序员pink老师的视频
如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ