11.HTML基础——表单标签

表单标签

1.什么是表单？

表单就是专门用来收集用户信息的

2.什么是表单元素？

• 什么是元素？
  在HTML中，标签/标记/元素都是指HTML中的标签。
  例如:< a > a标签 / a标记 / a元素
• 表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。

3.表单的格式

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

4.常见的表单标签

4.1 input标签

input标签有一个type属性，这个属性有很多类型的
取值，不同的取值就决定了input标签不同的功能和外观。

4.1.1 type属性

1. type = “text” ——明文输入框
   

2. type = “password”——暗文输入框
   

3. type = “radio”——单选框

• 注意点：
• 单选框默认情况下不会互斥，要想单选框互斥，那么必须给每一个单选框都设置一个name属性，然后name属性还必须设置相同的值。
  例如：

性别：<input type="radio" name="gender">男
  <input type="radio" name="gender">女

• 要想让单选框默认选中某一个选项，那么可以给input标签添加一个checked属性；
• 在HTML中如果属性的取值和属性的名称一样，可以只写一个，
  例如：checked="checked"可以只写check。
  但是XHTML中必须写上取值，所以在企业开发中我们不要省略。

性别：<input type="radio" name="gender" checked="checked">男
  <input type="radio" name="gender">女

4. type = “checkbox”——多选框

爱好：
  <input type="checkbox">篮球
  <input type="checkbox">足球
  <input type="checkbox">棒球
  <input type="checkbox">排球

• 要想让多选框默认选中某一个选项，那么可以给input标签添加一个checked属性。
• 在多选框和单选框中，所有项目的name必须一致。

爱好：
  <input type="checkbox">篮球
  <input type="checkbox" checked="checked">足球
  <input type="checkbox">棒球
  <input type="checkbox">排球

5. type = “button”——定义一个普通按钮
   作用：配合JS完成一些操作

<input type="button" value="我是按钮" onclick="alert('wyy')">

6. type = “image”——定义一个图片按钮
   作用：配合JS完成一些操作

<input type="image" src="images/register.jpg" onclick="alert('wyy')">

7. type = “reset”——定义重置按钮
   作用：清空表单中的数据
   注意点：重置按钮有默认的按钮标题，默认叫做“重置”，也可以通过value属性来修改默认标题。

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

8. type = “submit”——定义提交按钮
   作用：将表单中的数据提交到远程服务器
   注意点：要想将表单中的数据提交到远程服务器，必须满足两个条件：

• 告诉表单，需要提交到哪个服务器；
  可以通过form标签的action属性来告诉表单，需要提交到哪个服务器。

<form action="http://baidu.com">

• 告诉表单，表单中的那些数据需要提交。

9. type = “hidden”——定义隐藏域
   作用：用于悄咪咪地收集用户的一些数据，隐藏域是不会出现在界面中的。

4.1.2 value属性

给输入框设置默认值

账号：<input type="text" value="vvv">
<br>
密码：<input type="password" value="123">

• 在表单标签中，除了按钮标签以外的标签，都可以通过value来指定需要提交到服务器的数据。

4.2 Label标签

默认情况下文字和输入框是没有关联关系的，也就是说，点击文字输入框不会聚焦，如果想点击文字时让对应的输入框聚焦，那么就需要让文字和输入框绑定。
label标签可以使输入框和文字绑定在一起。

<form>
  <label for="account">账号：</label><input type="text" id="account">
  <br>
  <label for="pwd">密码：</label><input type="password" id="pwd">
  <br>

绑定的格式：

1. 将文字利用label标签包裹起来；
2. 给输入框添加一个属性；
3. 在label标签中通过for属性和输入框中id进行绑定即可。
   < label for=“account” >账号：< /label >< input type=“text” id=“account” >

4.3*Datalist标签

• 作用：给输入框绑定待选项
• 格式：

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

• 如何给输入框绑定待选列表？

1. 搞一个输入框
2. 搞一个datalist列表
3. 给datalist列表标签添加一个id
4. 给输入框添加一个list属性，将datalist的id对应的值赋值给list属性即可

请输入您的车型：<input type="text" list="cars">
<datalist id="cars">
    <option>奔驰</option>
    <option>宝马</option>
    <option>奥迪</option>
    <option>路虎</option>
    <option>宾利</option>
</datalist>

4.4 select标签

作用：用于定义下拉列表
格式：

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

注意点：

• 下拉列表不能输入内容，但是可以直接在列表中选择内容；
• 可以通过给option标签添加一个selected属性来指定列表的默认值

<option selected="selected">桂林</option>

• 可以通过给option标签包裹一层optgroup标签来给下拉列表的数据分类

<select>
  <optgroup label="北京">
  <option>朝阳区</option>
  <option>昌平区</option>
  <option>通州区</option>
  </optgroup>
  <optgroup label="广州">
  <option>天河区</option>
  <option>越秀区</option>
  <option>黄埔区</option>
  </optgroup>
</select>

4.5 textarea标签

作用：定义一个多行输入框
格式：

<textarea>
  内容
</textarea>

注意点：

1. 默认情况下，输入框可以无限换行；
2. 默认情况下输入框有自己的宽度和高度；
3. 可以通过cols和rows来指定输入框的宽度和高度，虽然指定了列数和行数，但还是可以无限往下输入；
4. 默认情况下输入框是可以手动拉伸的。