表单概述

1、表单：表单就是一个将用户信息组织起来的容器。将需要用户填写的内容防止在表单容器中，当用户单击“提交”按钮的时候，表单会将数据统一发送给服务器。

2、表单的内容：创建表单后，就可以在表单中放置控件以接收用户的输入。这些控件通常放在<form>...</form>标签对之间，也可以在表单之外用来创建用户界面。

<form name="form1" method="get" action="result.html">

</form>

3、表单标签及其表单属性：

（1）action：此属性指示服务器上处理表单输出的程序。若为空，则默认提交到本页。

（2）method：此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法。method=(get|post)

（3）post和get的区别：post方法提交方式不会改变地址栏状态，表单数据不会被显示。使用get方法提交方式，地址栏状态会发生变化，表单数据会在URL信息中显示。

4、表单元素及其格式：装载数据的控件就称为表单元素。向表单中添加表单元素要用<input>标签。

（1）type：指定表单元素的类型，默认为text。

（2）name：指定表单元素的名称。

（3）value：是可选属性，指定表单元素的初始值。

（4）size：指定表单元素的出事宽度。若为text或password类型，则表单元素的大小以字符为单位，否则以像素为单位。

（5）maxlength:指定可在text或password元素中输入的最大字符数。

（6）checked：指定按钮是否被选中，当输入类型为radio或checkbox时，使用此属性。

5、常用的表单类型：

（1）文本框：

<!--
size：用于指定文本框的长度
maxlength：用于指定文本框输入的数据长度。
-->
名字：<input type="text" value="" name="fname" size="22" maxlength="10"/>

（2）密码框：密码框仅仅是周围的人看不见输入的符号，不能保证输入的数据安全。

密码：<input name="pass" type="password" size="22"/>

（3）单选按钮：用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选一个单选按钮。

性别：<input name="gen" type="radio" class="input" value="男" checked/>男
<input name="gen" type="radio" value="女" class="input"/>女

（4）复选框：一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取，否则，每个选项都需要单独进行读取，从而降低了效率。

爱好：<input type="checkbox" name="interest" value="sports" checked />运动
<input type="checkbox" name="interest" value="talk"/> 聊天
<input type="checkbox" name="interest" value="play"/> 玩游戏

（5）列表框：<select>标签用于显示可供用户选择的列表框，每个列表框由一个<option>标签表示,<select>标签必须至少包含一个<option>标签。selected属性表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中。默认selected为true。

出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4"/> 年
<select name="bmon">
    <option value="">[选择月份]</option>
    <option value="1">一月</option>
    <option value="2">二月</option>
    <option value="3">三月</option>
    <option value="4">四月</option>
    <option value="5">五月</option>
    <option value="6">六月</option>
    <option value="7">七月</option>
    <option value="8">八月</option>
    <option value="9">九月</option>
    <option value="10" selected>十月</option>
    <option value="11">十一月</option>
    <option value="12">十二月</option>
</select> 月
<input name="bday" value="dd" size="2" maxlength="2" /> 日

（6）按钮：HTML5中按钮分为三种：普通按钮（button），提交按钮（submit），重置按钮（reset）。name用来给按钮命名，value用来设置显示在按钮上的文字。

<!--重置按钮-->
<input type="reset" name="butReset" value="reset按钮"/>
<!--提交按钮-->
<input type="submit" name="butSubmit" value="submit按钮"/>
<!--普通按钮-->
<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)"/>
<!--图片按钮-->
<input type="image" src="images/login.gif" />

（7）多行文本域：

< textarea name="textarea" cols="显示的列数" rows="显示的行数" >
    文本内容
< /textarea >

（8）文件域：用于实现文件的选择，在应用是只需把type属性设置为file即可，在实际应用中常用于文件上传的操作。

<form action="" method="post" enctype="multipart/form-data"><!--表示将表单数据分为多部分提交-->
    <input type="file" name="files"/><br/>
    <input type="submit" name="upload" value="上传"/>
</form>

（9）邮箱：email在提交表单时会自动验证email文本框的值。

邮箱：<input type="email" name="eamil"/>

（10）网址：

请输入你的网址：<input type="url" name="userUrl"/>

（11）数字：number类型的input元素提供用于输入数字的文本框。输入的数得是step（规定合法的数字间隔）值的倍数。

<input type="number" name="num" min="0" max="100" step="10"/>

（12）滑块：range类型的input元素提供用于输入包含一定范围内的数字值的文本框。不支持的浏览器会显示普通的纯文本框，就当作text来处理。

请输入数字：<input type="range" name="range1" min="0" max="10" step="1"/>

（13）搜索框：search类型提供的搜索框是任意页面的一个搜索框。

请输入搜索的关键词：<input type="search" name="sousuo" />

表单的高级应用

1、设置表单的隐藏域：

<input type="hidden" value="666" name="userid"/>

2、设置表单的只读与禁用：

<input name="name" type="text" value="张三" readonly>

3、表单元素的标注：目的是增强鼠标的可用性。

<label for="表单元素的id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

表单的初级验证

1、表单验证的好处：

（1）减轻服务器的压力。

（2）保证数据的可行性和安全性。

2、表单初级验证的方法：

（1）placeholder：为input类型的文本框提供一种提示（hint），描述文本框期待用户输入何种内容。

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

（2）required：规定文本框填写内容不能为空，否则不允许用户提交表单。

<input type="text" name="username"  required/>

（3）pattern：验证input类型文本框中用户输入的内容是否与自定义的正则表达式想匹配。

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />   *以13、15、18开头的11位数字