HTML表单标签

1 什么是表单？

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

2 什么是表单元素

2.1 什么是元素

• 在html 中标签/标记/元素都是指HTML中的标签，例如<a> a 标签/a标记，a元素

• 表单元素其实还是HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能
  2.2 表单的格式

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

2.3 常见的表单元素

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

• 格式：

<form>
<!-- 明文输入框-->
账号：<input type="text">
<!-- 暗文输入框-->
密码：<input type="password">
<!--给输入框设置默认值-->
账号：<input type="text" value="123">
密码：<input type="password" value="2222">

<!-- 单选框
1、默认情况下，单选框不会互斥，要向单选框互斥，那么必须给每一个单选框标签都设置一个name 属性，且name属性还必须设置相同的值（可以随便选）
2、想让当选框默认选中某一项，那么可以给input标签添加一个checked属性
3、在HTML中如果属性的取值和属性的名称一样，可以只写一个，但是在XHTML中必须写上取值。-->
性别：<input type="radio" name="gender"> 男
<input type="radio" name="gender">女

<!-- 多选框
-->
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球

<!-- 按钮 
定义一个普通按钮，配合js完成一些操作-->

<input type="button" value="button" onclick="alert('inj')">

<!-- 图片按钮：定义一个图片按钮，-->
<input type="image" src="images/register.jpg">

<!-- 定义重置按钮，
作用：清空表单中的数据，
注意点：重置按钮有默认的按钮标题，默认就叫中重置-->
<input type="reset" value="清空">

<!--定义一个提交按钮，
作用:将表单中的数据提交到远程服务器
注意点：要想把表单中的数据提交到远程服务器，必须满足两个条件：
1. 告诉表单需要提交到那个服务器，可以通过form 标签中的action属性来告诉表单；
2. 告诉表单，表单中的那些数据需要提交，需要通过name 属性。-->
<input type="submit">

<!-- 隐藏域：
作用：用于偷偷收集用户数据的，隐藏域是不会出现在界面中的-->
<input type="hidden" name="cc" value="it666">
</form>

2.4 label 标签

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

1. 将文字利用label 标签包裹起来；
2. 给输入框添加一个id 属性；
3. 在label 标签中通过for 属性和输入框中的id进行绑定即可

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

2.5 datalist 标签

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

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

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

1. 写一个输入框<input type="text">
2. 写一个datalist列表
3. 给datalist 列表标签添加一个id
4. 给输入框添加一个list 属性，将datalist 的id 对应的值赋值给list 属性即可。

2.6 select标签

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

<select>
    <optgroup label="广州"> 
               <option>列表数据</option>
     </optgroup>
</select>

• 注意点：

1. 下拉列表不能输入内容，但是可以直接在列表中选择内容
2. 可以通过给option标签添加一个selected属性来指定列表的默认值
3. 可以通过给option 标签包裹一层optgroup 标签来给下拉列表中的数据进行分类的。

2.7 textarea 标签

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

<textarea>
</textarea>

• 注意点：

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

在单选框和多选框中，所有的name 都必须一致。
在表单标签中，出了按钮标签以外的标签，都可以通过value 指定提交到服务器的数据的值。