re:从0开始的HTML学习之路 13. 表单（完结撒花）

1. 表单

现实生活中的表单：
学员 -> 学员信息表 -> 学校
存款人 -> 存款单 -> 银行

表单：在网页中，用于搜集用户信息，将用户信息提交给后台服务器。
一个表单由三个部分组成：表单域、表单控件、提示信息

2. 表单域

包含所有要提交表单控件的区域，将该区域的信息提交给后台服务器。
使用 form 标签创建表单域
action：用于指定提交到后台服务器的地址
method：用于选择请求方式（在此了解即可，深入了解需要学习JavaScript）

3. 表单控件

也叫表单元素，用于搜集信息的控件

1. input 关于输入信息的控件
   type 属性用于指定输入控件的类型，区分文本框、单选、多选就靠type了~

   	text：普通文本框
   	password：密码框，输入的内容不可见
   	radio：单选框，需要按钮的name属性相同才能实现单选
   	checkbox：复选框，同样需要按钮的name属性相同
   	submit：提交填入的数据
   	reset：将表单重置到初始状态
   	button：普通的按钮，需要JS协同才能有功能
   

   name 属性设置控件的名字（后台可以通过名字获取对应控件提交的值）
   value 属性设置控件的值
   checked属性设置默认选中状态，单选框和复选框使用
2. select 下拉列表
   1. select 标签中包含一个个的 option 列表项
   2. option 标签的 selected="selected" 设置默认选中状态
   3. 可以通过optiongroup标签给选项分组
   4. 注意：name属性为select标签指定，value属性为option指定
3. textarea 文本域
   1. cols设置文本域一行能显示的字符数
   2. rows设置文本域一次显示多少行
   3. 注意：文本域没有 value 属性，若需要默认值，写到标签之间

注：下边代码pages/success.html是任意一个网页，只是用来接受数据

<form action="pages/success.html">
	用户名：<input type="text" name="username">
	<br><br>

	密码：<input type="password" name="password">
	<br><br>

	<!-- 单选框 -->
	<!-- 注意：同组单选按钮的 name 属性值必须相同，单选按钮功能才可以生效 -->
	性别：
	<input type="radio" name="gender" checked>男
	<input type="radio" name="gender">女
	<br><br>

	<!-- 复选框 -->
	你喜欢的老师：
	<input type="checkbox" name="teacher" value="lls" checked="checked"> 李老师 
	<input type="checkbox" name="teacher" value="tls"> 佟老师
	<input type="checkbox" name="teacher" value="cls" checked> 苍老师
	<br><br>

	籍贯：
	<select name="city">
		<optgroup label="北方">
			<option value="beijing">北京</option>
		</optgroup>
		<optgroup label="南方">
			<option value="shanghai">上海</option>
			<option value="shenzhen" selected="selected">深圳</option>
		</optgroup>
		</select>
	<br><br>

	自我介绍：
	<textarea name="self" cols="30" rows="10">请输入2W字的自我介绍</textarea>
	<br><br>
	
	<!-- 提交按钮 -->
	<input type="submit" value="注册">
	<!-- 重置按钮 -->
	<input type="reset">
	<!-- 普通按钮 -->
	<input type="button" value="普通按钮">

这里的普通按钮点击不会有任何作用，需要搭配JavaScript来使用

创建按钮的另外一种方式，这种方式需要JS的配合才能有作用。相较于 input 创建按钮的方式，略灵活，因为是双标签，里边可以随意放东西：

	<button type="submit">注册</button>
	<button type="reset">重置</button>
	<button type="button">普通按钮</button>

注：button的type默认值是submit

4. 提示信息

label标签：用于选中表单中的提示文字
对于上面的这个网页，当我们想选择性别时，必须将鼠标点到小圆圈内，非常的不方便，我们希望能够点击男 女来实现选中单选的功能，此时就可以使用label标签。使用label标签将男、女包裹起来，通过for属性关联到各自对应的input标签上，for属性对应表单项的id，所以给input加上id属性。
<label> 的 for 属性必须等于相关元素的 id 属性才能将它们绑定在一起。也可以通过将元素放置在 <label> 元素内将标签绑定到元素。

性别：
<input id="gd1" type="radio" name="gender" value="male">
<label for="gd1">男</label>
<input id="gd2" type="radio" name="gender" value="female" checked="checked">
<label for="gd2">女</label>

<label> <input type="radio" name="gender1" value="male1"> 男 </label>
<label> <input type="radio" name="gender1" value="female1" checked> 女 </label>
<br><br>

5. 关于name

在浏览器发送get请求中，所有的数据都会在URL中显示：

比如这里的username=admin，其中的username就是用户名输入框的name
当然，form也可以使用post发送请求，但这同样也不是HTML内容的重点~
可以使用F12里的网络 $\to$ success.html下的载荷来查看提交出去的数据。

6. 表单的其他属性

autocomplete="off" 关闭自动补全，这里的自动补全指的是曾经的输入记录在你要再次输入的时候会显示一个小列表，关闭自动补全就是将这个小列表关闭。可以写在form里对整个表单生效，也可以写在表单控件中
readonly 将表单项设置为只读，但是数据会提交
disabled 将表单项设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
HTML5中的一些其他的type：
color：可以选颜色
email ：强制要求输入必须是邮箱格式
file ：可以上传文件
hidden：隐藏该控件
其中hidden隐藏的控件又叫做隐藏域，常用来做一些验证工作

写在最后

到现在为止，HTML的基本内容就已经全部结束了，这是前端学习的一小步，也是个人伟大的一步hh~
历时6天，每天只需要一nei nei的时间，就可以轻易的学完HTML，这也算是第一个完整写完的专栏hh，过程还是比较有意思的，各位在学习的过程中一定要记笔记并且常看，这比用前现学要好太多了~