HTML-表单标签

大家好，欢迎来到IT知识分享网。

表单标签

1. 概念：
   —>表单：表单就是专门用来收集用户信息的；

   —>元素：在HTML中，标签、标记、元素都是指HTML中的标签。例如<a>a标签、a标记、a元素；

   —>表单元素也是HTML中的标签，只不过在浏览器中所有的表单标签都有特殊的外观和默认的功能；

1. 表单的格式：<form>表单元素</form>。一定要注意啊注意！！！一下列出的表单元素必须放在<form></form>中间！！！

1. 常见的表单元素：

   —>input标签，type属性非常重要，有多类型的取值，据定了input标签的功能和外观。

   —>text输入框，password密码框，radio 单选框，checkbox多选，button按钮，reset重置按钮，

   —>注意：默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个name属性，并且name属性还必须设置相同的值；

   —>注意：要想要单选框默认选中其中一个，可以给input标签添加checked属性；

   —>注意：在HTML中如果属性的取值和属性的名称一样，可以只写一个，如可以checked="checked"也可以checked。但是在XHTML中必须写上取值，所以在企业开发中推荐不要省略取值；

--->在input标签中添加`<type="button">`属性定义普通按钮，通过`value`属性给按钮指定标题，配合js完成一些操作；在input标签中添加`<input type="image" src="">`属性定义图片按钮； 

--->重置按钮`<input type="reset" value="清空">`，用于晴空表单中已经填写好的数据，若想修改重置按钮默认的按钮标题可以通过value属性修改。 

--->提交按钮`<input type="submit">`，将表单中已经填写好的数据，提交到远程服务器。要想将表单中填写好的数据提交到远程服务器，必须具备两个条件：一是给form表单添加一个action属性，通过这个action属性置顶需要提交的服务器地址；二是需要给需要提交到服务器的表单元素添加一个name属性。完成这两步就可以提交了，以键值对的形式提交给服务器。 

--->隐藏域`<input type="hidden" name="" value="">`，配合提交按钮将一些数据默默的悄悄的提交给服务器。Ajax(待学！)。 

--->默认情况下文字和输入框没有关联，即点击文字输入框不会聚焦，若想点击文字时让对应的输入框聚焦，需要将文字和输入框进行绑定。将文字与输入框绑定用`label`标签。绑定的格式：首先将文字用`label`标签包裹起来，其次给输入框添加`id`属性，最后在`label`标签中通过`for`属性和和输入框中的`id`进行绑定即可。 

—>给输入框绑定待选列表datalist的步骤：(了解下即可，支持率太低)

首先设置一个输入框，然后设置一个datalist列表（带有option标签），再给datalist列表标签添加id属性，最后给输入框添加list属性将datalist对应的id绑定。
格式：

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


—>可以自动校验输入的内容是否符合邮箱的格式<input type="email">

—>select标签用于定义下拉列表。下拉列表不能输入内容，但是可以直接在下拉列表中选择内容。通过给option标签添加select属性来指定列表的默认值。可以通过给option标签包裹一个optgroup标签，设置一下optgroup标签中的label属性，来给下拉标签中的数据分类呈现。格式：

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

—>textarea标签：定义一个多行输入框。默认情况下输入框可以无限换行；默认情况下输入框有自己的宽度和高度；可以通过cols和rows属性来指定输入框的宽度和高度，但是虽然指定了列数和行数，但还是可以无限的往下输入，此时会有混动条；默认情况下输入框是可以手动拉伸的（在输入框的右下角有可以拉伸的小东西）。

<textarea cols="2" rows="10"> </textarea>

以上表单标签的示例代码

<!--表单--> <form action="http://www.baidu.com"> <!--明文输入框--> 账号：<input type="text" name="username"> <br> <!--暗文输入框--> 密码：<input type="password" name="pass"> <br> <!--输入账号为：xiao，密码为：--> <!--点击提交时，页面跳转到https://www.baidu.com/?username=xiao&pass=&sex=on--> <!--注意，其中的username=xiao&pass=--> <!--给输入框设置默认值--> <input type="text" value="sunxiao"> <input type="password" value="123"> <br> <!--单选框--> 性别： <input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked="checked">保密 <!--其中checked也可以直接只写checked--> <br> <!--多选框--> 爱好： <input type="checkbox">篮球 <input type="checkbox" checked="checked">瑜伽 <input type="checkbox">足球 <input type="checkbox">骑马 <input type="checkbox">蹦极 <br> <!--按钮--> <input type="button" value="我是按钮" onclick="alert('我是按钮');"> <br> <!--图片按钮--> <input type="image" src="images/xd.png" width="100px" height="100px" onclick="alert('我是熊顿，狗熊的熊，牛顿的顿！此处不能用双引号，只能用单引号，因为外层已经用过了双引号！！！！！！！！');"> <br> <!--重置按钮--> <input type="reset" value="清空"> <br> <!--提交按钮--> <input type="submit"> <br> <!--隐藏域--> <!--https://www.baidu.com/?username=&pass=&sex=on&hidden_name=hidden_content--> <input type="hidden" name="hidden_name" value=""> <br> <!--将输入框和文字绑定（推荐）--> <label for="zh">账号：</label><input type="text" id="zh"><br> <label for="mm">密码：</label><input type="password" id="mm"> <!--另一种方式（有局限性）--> <label>账号：<input type="text"></label><br> <label>密码：<input type="password"></label> <br> <!--datalist标签，用于给输入框绑定带选项。傻瓜式的模仿一下百度搜索时自提示，深入的还需用到Ajax--> 请输入你喜欢的水果：<input type="text" list="fruits"> <datalist id="fruits"> <option>草莓</option> <option>芒果</option> <option>榴莲</option> <option>香橙</option> <option>香蕉</option> <option>葡萄</option> </datalist> <br> <!--可以自动检验输入的内容是否符合邮箱的格式--> <!--可以自动校验输入的内容呢是否是URL地址--> <!--可以自动校验输入的内容呢是否是数字--> 邮箱：<input type="email"><br> 域名：<input type="url"><br> 数字：<input type="number"><br> 年月日：<input type="date"><br> 提交：<input type="submit"><br> <!--select标签用于定于下拉列表--> <select name="" id=""> <optgroup label="中国"> <option value="">北京</option> <option value="">上海</option> <option value="">深圳</option> <option value="">广州</option> <option value="" selected="selected">青岛</option> </optgroup> <optgroup label="美国"> <option value="">阿拉巴马州 </option> <option value="">阿拉斯加州</option> <option value="">亚利桑那州</option> <option value="">阿肯色州</option> <option value="" selected="selected">加利福尼亚州</option> </optgroup> </select> <br> <!--textarea多行文本输入框--> <textarea cols="30" rows="10"></textarea> </form>