4项目四 表单的应用

HTML5+CSS3网页设计与布局项目四表单的应用4.1表单的应用4.2在表单中添加元素4.3HTML5新增表单输入类型4.1

表单的应用4.1表单的应用

在HTML文档中，表单多数用于注册页面，表单用来接收用户输入的信息，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与web服务器的交互。

添加表单语法的代码：

<formname="表单名"method="传送方示"action="表单处理程序">

表单内代码……</form>4.2在表单中添加元素4.2.1文本字段和密码域4.2.2单选按钮4.2.3复选框4.2.4普通按钮4.2.5提交按钮4.2.10文本域4.2.9菜单列表类表单元素4.2.8文件域4.2.7隐藏域4.2.6重置按钮4.2在表单中添加元素

在html中，<form>标签是使用来创建供用户输入的html表单。<form>标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如<input>、<button>、<select>、<textarea>等标签。

input语法的代码：

<form……> <inputname="控件名称"type="控件类型"> </form>4.2.1文本字段和密码域

文本字段（text）和密码域（password）用于创建单行文本输入框，供访问者输入单行文本信息。

添加文本字段和密码域的代码：

<p>用户名：<inputtype="text"name="username"size="15"value="请输入用户名"></p> <p>密码：<inputtype="password"name="password"size="15"maxlength="6"></p>4.2.2单选按钮Radio元素用于创建单选按钮，单选按钮中的每个单选按钮需要使用相同的名称，用户一次只能选择一个选项。单选按钮还需要使用value值，选定的单选按钮在提交时生成对应的name/vale值。

添加单选按钮的代码： <p>性别： <inputtype="radio"name="sex"value="male"checked>男 <inputtype="radio"name="sex"value="female">女 </p>4.2.3复选框checkbox元素用于创建复选框。复选框允许用户在有限数量的选项中选择零个或多个选项。选定的多选按钮在提交时生成对应的name/value值。

增加复选框的代码： <p> <inputtype="checkbox"name="test"value="book"checked>看书

<inputtype="checkbox"name="test"value="spot">运动

<inputtype="checkbox"name="test"value="sing">唱歌

<inputtype="checkbox"name="test"value="game">游戏

</p>4.2.4普通按钮button元素是普通按钮，普通按钮在正常情况下点击是没有效果的，需要给按钮单独设置方法后点击才能生效。

增加普通按钮的代码： <p><inputtype="button"name="b1"value="这是点击无效按钮"></p>4.2.5提交按钮submit元素用于创建提交按钮。当用户点击提交按钮时，表单的内容就会提交至指定的位置。当value值没有设置时，提交按钮的默认字样为提交。

增加提交按钮的代码：

<p><inputtype="submit"name="button2"value="提交表单"></p>4.2.6重置按钮reset元素用于创建重置按钮。当用户单击此按钮时，此重置按钮所在表单中的所有元素的值被重置为其value属性中指定的初始值。当value值没有设置时，提交按钮的默认字样为重置。

增加重置按钮的代码： <inputtype="reset"name="b3"value="重新填写">4.2.7隐藏域

表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示。当浏览者提交表单时，隐藏域的内容会被一起提交给处理程序。

增加隐藏域的代码： <inputtype="hidden"name="page_id"value="example">4.2.8文件域

在上传文件时常常会用到文件域，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件时，常常会看到这个控件。

增加文件域的代码：

<p>请上传你的头像：<inputtype="file"name="picture"></p>4.2.9菜单列表类表单元素select元素用于显示下拉列表。每个选项由一个option元素表示，select必须包含至少一个option元素。用户所选择的选项将高亮显示块表示。

添加菜单列表类的代码： <p>请选择你的学历 <selectname="cardtype"> <optionvalue="university">大学</option> <optionvalue="high">高中</option> <optionvalue="middle">初中</option> <optionvalue="small">小学</option> <optionvalue="other">其他</option> </select> </p>4.2.10文本域textarea元素⽤于创建多⾏⽂本输⼊控件。此元素使⽤结束标记</textarea>结束，在<textarea>和</textarea>之间的内容是该多⾏⽂本框的初始值。

添加文本域的代码：

<p>

您对我们的建议： <textareaname="info"cols="35"rows="7">请将意见输入此区域 </textarea> <p>4.3HTML5新增表单输入类型4.3.1email类型4.3.2number类型4.3.3range类型4.3.4url类型4.3.1email类型

当input的type属性设置为email，在提交表单时，会自动验证email域的值是否符合email的标准格示，再也不用自己用正则表达示去写email的格示验证了。

添加email类的代码：

<p>请输入你的邮箱：<inputtype="email"name="useremail"/></p>4.3.2number类型

当input的type属性设置为number时，会自动检验输入内容是否为数字类型，您还能够设定该输入框数字的限定。

添加number类的代码：

<p>请输入你的电话:<inputtype="number"name="phone"min="11"max="11"/></p>4.3.3range类型range类型用于应该包含一定范围内数字值的输入域。range类型显示为滑动条。您还能够设定对所接受的数字的限定。

添加range类的代码：

<inputtype="range"name="user_range"min="5"max="