HTML表单（form）

1、概述

1.1 表单的概念和作用

表单是网页的一个特定区域，这个区域是由一对<form> 标签定义的。收集用户输入的数据，使网页具有交互功能，比如用户注册、用户登录、反馈信息、星系搜索功能等均是表单的应用场景。
例如下图就是某宝网页版登录界面：

1.2表单的组成

表单属于一个容器标记，一个表单由form元素、表单控件和表单按钮组成。

1. form元素
   用来创建表单。

	<form action="" method="" enctype="">
     	……
	</form>

其中三个重要属性：

	action设置表单的提交路径
	method设置表单的提交方式（主要有post和get）
	enctype设置编码类型

2. 表单控件
   主要用来收集用户数据，包括label(标签)、input、textarea、select、datalist、keygen等，还有对组件分组显示的fieldset和legend控件。根据功能的不同，input又可以分为text、password、radio、checkbox、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers等类型。
   
3. 表单按钮
   包括普通按钮、提交按钮(submit)和重置按钮(reset)。

2、表单控件详解

2.1 input标签

input标签输入类型是由类型属性(type)定义的。基本语法：

        <form>
            <input name="控件名称" type="控件类型">
        </form>

2.1.1文本框 type=“text”

2.1.2密码框 type=“password”

2.1.3单选框 type=“radio”

<p>单选框：</p>
            <input type="radio" name="sex" value="男" checked>男
            <input type="radio" name="sex" value="女">女<br><br>

2.1.4复选框 type=“checkbox”

<p>复选框：</p>
            <input type="checkbox" name="hobby" value="1" checked >唱
            <input type="checkbox" name="hobby" value="2" >跳
            <input type="checkbox" name="hobby" value="3" >rap
            <input type="checkbox" name="hobby" value="4">篮球

同一类选项radio和checkbox的name属性必须一样。

2.1.5文件字段 type=“file”

2.1.6隐藏字段 type=“hidden”

有的时候，部分数据并不需要用户直接输入，而是系统自动生成或者默认的值，所以将input隐藏，当用户点击提交时，会和表单数据一起提交到服务器。

<p>隐藏字段：不显示输入框，但是会将内容一起提交</p>
           <input type="hidden" value="一起上传的数据">

2.1.7 提交按钮 type=“submit”

点击提交按钮会将表单提交。

2.1. 8重置按钮 type=“reset”

点击重置按钮会将表单中的数据初始化，即清空输入的数据。

2.1.9普通按钮 type=“button”

普通按钮必须设置value属性才会有内容。

<p>普通按钮</p>
<input type="button" value="按钮">

2.2 textarea标签

定义多行文本输入控件，文本区可以容纳无线数量的文本，可以通过cols（列数）和rows（行数）属性来确定textarea的尺寸。

例如：

<p>textarea文本域</p>
            <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="请输入一端文字"
            maxlength="10"></textarea>

因为设置了maxlength属性为10，所以输入10个字以后，再输入是没有效果的。

2.3 label标签

该标签为inout元素定义标注。
label标签通常和radio或者checkbox元素关联，以实现点击文字也能选择/取消checkbox或者radio。
例如：
通过label的for属性和checkbox或者radio每个选项的id属性关联起来。

<p>label</p>
            <input type="checkbox" name="hobby" value="1" id="sing" checked ><label for="sing">唱</label>
            <input type="checkbox" name="hobby" value="2" id="jump"><label for="jump">跳</label>
            <input type="checkbox" name="hobby" value="3" id="rap"><label for="rap">rap</label>
            <input type="checkbox" name="hobby" value="4" id="basketball"><label for="basketball">篮球</label>

这样就实现了点击文字就可以取消或者选中checkbox的选项了。

2.4 fieldset标签和legend标签

filedset元素可以将表单内的相关元素分组，legend标签为fieldset元素定义标题。

<p>fileset和legend</p>
            <fieldset>
                <legend>健康信息</legend>
                身高：<input type="text">
                体重：<input type="text">
            </fieldset>

2.5 select标签-下拉列表

select标签可以包含option标签和optgroup标签，optgroup标签实现了option的分组，使用label来显示分组的名称。对option添加select属性，可以实现默认选中该选项。

<p>select</p>
            <select >
                <optgroup label="Swedish Cars">
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                </optgroup>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
              </select>

3、写在最后

1.html常用标签
2.html中的表格和框架标签
这篇博客写完，html的常用标签就复习完了。另外，html5还新增了许多标签，重新写一篇博客学习。