HTML学习笔记（五）表单

一、表单标签——input

1、表单：专门用来收集用户信息。
2、表单元素：即HTML中的一些特殊标签，这些标签有特殊的外观和默认功能。
3、表单格式：

<form>
	<表单元素>
</form>

4、常见表单元素（input——有type属性）
（1）明文输入框：<input type="text"><br>
（2）暗文输入框：<input type="password"><br>
（3）给输入框设置默认值：<input type="text" value="lnj"><br>
（4）单选框：<input type="radio">
默认情况下，单选框不会排斥，要想单选框互斥就必须给每一个单选框标签都设置一个name属性，然后name属性必须设置相同的值。

<input type="radio" name="gender">男
<input type="radio" name="gender">女
<input type="radio" name="gender">保密

要想让单选框默认选中某一框，可以给input标签添加一个checked属性

<input type="radio" name="XX" checked="checked">

注：在HTML中如果属性取值和属性一样，可只写一个，即简写为checked，但在XHTML中必须写上取值。
（5）多选框：<input type="checkbox">
可默认选项多个

5、可以自动校验的内容是否符合格式
（1）邮箱：<input type="email">
（2）URL地址：<input type="url">
（3）输入框中只能输入数字：<input type="number">
（4）输入时间：<input type="date">
（5）颜色：<input type="color">

二、表单元素——按钮

1、定义一个普通按钮
作用：配合JS完成一些操作

<input type="button" value="我是按钮" οnclick="alert("lnj")">

2、定义一个图片按钮

<input type="image" src="images/register.jpg" οnclick="alert("lnj")">

3、定义重置按钮：清空表单中的数据
注：重置按钮有默认的按钮标题，默认叫做重置，也可通过value属性来修改默认标题。

<input type="reset">
<input type="reset" value="清空">

4、定义提交按钮：将表单中的数据提交到远程服务器

<input type="submit">

注：要满足提交到远程，需满足两个条件：
（1）告诉表单要提交到哪个浏览器：form标签的action属性
（2）告诉表单，表单中哪些数据需要提交：在input后加name属性

5、隐藏域：用于隐秘地收集数据，隐藏域不会出现在界面中

<input type="hidden" name="cc" value="it666">

三、Label标签

1、默认情况下，文字和输入框无关联，要想两者关联，即点击文字便可聚集在输入框，则需用label标签。

2、绑定格式：
（1）将文字利用label标签包裹起来
（2）给输入框添加id属性
（3）在label标签中通过for属性和输入框的id进行绑定
方式一、

<label for="account" 账号：</label><input type="text" id="account">

方式二、（具有局限性）

<label>
	账号：<input type="text">
</label>

四、datalist标签（部分浏览器不支持）

1、datalist：给输入框绑定待选项。

2、格式：

<datalist>
	<option>待选项内容</option>
</datalist>

3、如何给输入框绑定待选列表
（1）搞一个输入框
（2）搞一个datalist列表
（3）给datalist列表标签添加一个id
（4）给输入框添加一个list属性，将datalist的id对应的值赋值给list属性即可

五、表单标签——非input标签

1、select标签：用于定义下拉列表
格式：

<select>
	<option>列表数据</option>
</select>

（1）下拉列表不可输入内容，但可在列表中选择内容
（2）可通过option标签添加一个selected属性来指定列表的默认值

<option selected="selected">武汉</option>

（3）可通过给option标签包裹一层optgroup标签给下拉列表中的数据分类

<select>
	<optgroup label="分组名称">
		<option>列表数据</option>
	</optgroup>
</select>

2、textarea标签：定义一个多行输入框
注意：默认情况下输入框可无限换行，默认情况下输入框有自己的高度和宽度。
可通过cols和rows来指定输入框的宽度和高度，但虽指定了列数和行数，还是可无限输入。
默认情况输入框时可手动拉伸的。

六、表单练习

1、单/多选框中，所有项目的name必须一致。

2、表单标签中（除按钮标签以外的标签）都可通过value来指定需提交到服务器的数据。

3、给整个表单添加边框，并在边框上有标题

<form>
	<fieldset>
		<legend>注册界面</legend>
	</fieldset>
</form>