《HTML5与CSS3网页设计》-《HTML5与CSS3网页设计》-HTML5 与CSS5 网页设计（第二版）第十一章

第11章表单11.1表单概述11.2form元素11.3input元素11.4列表与下拉菜单11.5文本域textarea11.6标签label11.7HTML5新增的元素属性11.8表单元素的组织与布局11.9综合实例返回11.1表单概述表单是用于实现网页浏览器与服务器(或者说网页所有者)之间信息交互的一种页面元素，在互联网上它被广泛用于各种信息的搜集和反馈。例如，图11-1显示了一个用于进行电子邮件系统登录的表单。图11-2显示了一个稍微复杂的表单，其中包含更多种类的表单控件:文本框、口令框、单选框、下拉菜单等。总而言之，表单不同于前面介绍的页面元素(如表格、图像等)，它不但需要在网页中用HTML进行显示，而且还需要服务器端特定程序的支持。返回11.2form元素可用<form>标记来定义一个表单，当一个表单被定义后就可在表单内放置表单标记。表单使用<form>作为开始标记，以</form>结尾。在一个HTML页面中允许有多个表单，以表单的名字(name)和id作为它们之间的区分。1.action在表单收集到信息之后，需要将收集到的信息传递给服务器，action属性设置处理表单的服务程序。当表单被提交后，表单中的数据就会发送给action的值所指定的程序进行处理。表示表单的内容提交给网址为www.htmlcss.com的服务器中的findmessage.asp页面去处理。如果处理程序和当前的HTML页面在同一个目录下面，还可以使用相对地址。下一页返回11.2form元素2.methodmethod用于设置表单内容向服务器提交时数据的传送方式。method属性有两个可选取值.get和.post。(1)当method="get”时，向服务器传送数据的方式为get方式。在这种方式下，要传送的数据会被附加在URL之后，被显示在浏览器的地址栏中，而且被传送的数据通常不超过255个字符。这种方式是method默认的值，但对数据的保密性差，不安全。(2)当method="post”时，向服务器提交数据采用post方式，这种方式传送的数据量没有限制其是以数据流的形式传送表单数据，但速度比较慢。上一页下一页返回11.2form元素3.targettarget属性主要用来控制表单提交后的结果显示在哪里，规定链接的页面打开方式。4.namename属性可以为表单指定一个名字，name属性的作用主要是为了区分各个表单，因为在一个页面中可能会有多个表单，或者一个表单处理程序需要处理多个页面的表单，这个时候表单的名字就很重要了。表单的属性设置并不会直接对页面产生影响，主要是设置表单的内在属性，而不是表单的显示内容。如果想让一个表单有意义，必须要有相应的表单元素。表单元素又称为表单控件，如图11-3所示是一个表单控件的示例。上一页返回11.3input元素11.3.1文本框text最常用的表单控件是input，这一类的表单控件被称为输入类控件，通过<<input>来标记。输入类控件有很多种类型，通过type属性进行设置。<input>标记可以为表单提供单行文本输入框、单选按钮、复选按钮、按钮等。文本框以单行的形式显示在页面中。文本框提供最常用的文本输入功能，在文本框内可以输入数字、文本和字母等。其语法为:<inputtype”text”name="fieldname"id”IDname"class="classname"size="fieldsize"value="defaultvalue"maxlength="maximumfieldsize"/>下一页返回11.3input元素其中:(1)class属性为文本框指定类名。(2)id为文本框指定标识符。(3)name为文本框指定一个名字。(4)type属性用于设置<<input>标记的类型，当type="text”时指定为文本输入框。(5)value属性为文本框设置默认值，当文本框中有输入后，这个值被改变，它可以被脚本语言所引用。(6)size和maxlength属性用于设置文本框输出区的大小和输入内容的最大长度，这两个值可以不相同，当size缺省时，其默认大小为12。上一页下一页返回11.3input元素11.3.2密码框password密码框的外观和文本框没有太大区别，但是在该控件中输入的内容会用*号显示。其语法为<inputtype="password"name="fieldname"value="defaultvalue"size="fieldsize”/>type指定了input标记的类型，其他属性的作用与文本框中属性的作用相同。11.3.3单选框radio在很多选择操作中，常常需要在多个项中选一个。在<input>标记中，type属性值为radio时，可设置一个单选按钮。单选按钮的语法为上一页下一页返回11.3input元素<inputtype="radio"name="radioname"value="givenvalue"checked/>其中：(1)name属性为单选按钮指定一个名字，单选按钮是在一组选择中选一个。(2)value属性用于设置单选按钮的预设值。(3)checked属性用于指定单选按钮的初始状态。当checked缺省时，表明单选按钮未被选择当设置checked时，表示被选择，并且在浏览器中以实心圆显示。11.3.4复选框checkbox复选框与单选按钮的差异是复选框可在一组提供的选项中选择多个甚上一页下一页返回11.3input元素至全部。复选框的语法为<inputtype="checkbox"name="checkboxname"value="givenvalue"checked>其中:(1)name为复选框指定一个名字，同一组中的复选框其name的值应相同。(2)value属性为复选框指定预设值，一旦复选框被选，向服务器提交数据时，value属性的值即被传送。(3)checked设置时表明复选框已被选择。上一页下一页返回11.3input元素11.3.5上传文件file文件上传框为用户提供了一种在线上传文件的方式，用文件上传控件时，在浏览器中会提供一个输入文件名的文本框和一个浏览文件的按钮，通过填写文件路径或者直接选择文件的方式，用户可以将自己硬盘上的文件提交给服务器。其语法为<inputtype="file"name="filename"size="fieldsize"maxlength="maxmumfieldsize”>type指定了input标记的类型。其他属性的作用与文本框中属性的相同。上一页下一页返回11.3input元素11.3.6隐藏字段hidden将信息从表单传送到后台程序中时，编程者通常要发送一些不应该被使用者看见的数据。这些数据有可能是后台程序需要的一个用于设置表单收件人信息的变量，也可能是提交表单后后台程序将要定向至用户的一个URL。要发送这类不能让表单使用者看到的信息，用户必须使用一个隐藏表单对象—隐藏字段。其语法为:<inputtype="hidden"name="hiddenname"value="givenvalue">type指定了input标记的类型。其他属性的作用与文本框中属性的相同。上一页下一页返回11.3input元素11.3.7按钮button、submit、reset1.普通按钮:inputtype="button"当<input>标记中type属性的值为“button”时，<input>标记提供一个普通按钮。单击按钮不会激活任何动作。设置普通按钮的目的是用脚本语言把事件与按钮相关联。当单击这种按钮时，可以触发某一事件，通过对事件的响应可完成某种预设的功能。普通按钮的语法为<inputtype="button"name="buttonname"value”text”onclick="script”>其中type指定了input标记的类型，value指定了按钮上显示的内容。上一页下一页返回11.3input元素2.重置与提交按钮在表单中，重置(reset)和提交(submit)按钮具有重要的作用，当表单中的数据需要重新填写或恢复到初始状态时，可用重置按钮;当要将表单中的数据提交给服务器时，可用提交按钮。其语法为:<inputtype="reset|submit”value="buttonvalue"name="buttonname">其中:(1)value属性用于设置按钮值，它显示在按钮上，表明了按钮的含义。(2)当type属性的值为reset时，按钮为重置按钮，单击按钮时，可使与此按钮在同一表单中的其他控件的值回到初始状态。当type属性的上一页下一页返回11.3input元素值为submit时，按钮的作用是向<form>标记中action属性值所指定的目标地址提交数据。11.3.8使用图像提交表单image当<input>标记的type属性的值为image时表示图像按钮。它的功能与提交按钮基本相同只不过在图像按钮用一幅图像代替了按钮。其语法为:<inputtype="image"name="imagename”src="URL"align=""/>其中:(1)name是图像按钮的名字。(2)src属性指明图像按钮中显示图像的URL地址。(3)align是图像按钮中图像的对齐方式。上一页返回11.4列表与下拉菜单11.4.1select和optionHTML语言支持具有选择功能的标记<select>。选择功能方便了用户在多个选项中进行选择，提高了窗口区域的利用率。通过对<select>标记的属性size的值的设置，可产生不同形式的列表:如列表和下拉菜单。对属性multiple进行设置，可以同时选择多个列表项。<select>标记是定义一个列表结构的标记，列表中的列表项(或称菜单项)是真正被选择的对象，对它的定义要用<option>标记。因此，设置一个列表，要同时使用<select>和<option>标记。select标记的语法为<selectclass=”classname”id=”idname”name=”selectname”size="number"multiple>下一页返回11.4列表与下拉菜单<option>列表项信息</option></select>其中:(1)class、id、name、style属性的含义与前面所介绍的标记的属i生含义相同。(2)size属性用于设置显示列表项的个数，缺省值为1，这时为下拉列表;当size值大于1而小于列表项数时，列表是滚动列表;当size的值大于列表项数时，列表所有的项都被显示，这时列表是一个菜单。(3)当使用multiple属性时，用户可同时选择多个列表项。(4)<select>标记是一个容器标记，它所包含的内容为<option>标记。在HTML文档中使用列表，需要用<option>标记来定义列表项。上一页下一页返回11.4列表与下拉菜单11.4.2optgroup在列表框中有的时候需要对选项分类，比如图11-15所示的下拉选项中有一部分是HTML的标记的内容，有一部分是CSS的标记的内容，所以希望这些选项能够以分组的形式出现在下拉列表中。通过<optgroup>标记可以对选项进行分类，并使用label属性使其在下拉列表里显示为一个不可选的缩进标题。其语法为:.<optgrouplabel=”组名”>“组名”代表分组选择项的分类名(此分类名不能选择)，以<optgroup>开始，以</optgroup>结束。例如对图11-15的下拉框增加分组功能。上一页返回11.5文本域textareaHTML提供了多行文本的输入框，这是接收大量数据的文本区域，它可以用于数据的输入，又可用于数据的显示。实现多行文本输入区的标记为<textarea>，其语法为:<textareaclass="classname”id=”IDname”cols="number”rows="number”style=”styleinformation"readonly>在文本区中显示内容</textarea>其中:(1)<textarea>标记是一个容器标记，可以包含内容，若<textarea>和</textarea>中有内容，则显示在文本区中，如果此文本区是用于接收数据的，应省去被标记的内容。(2)class,name,id和style属性与前面所学习标记的同名属性具有相同的功能。下一页返回11.5文本域textarea(3)rows属性用来设置文本输入窗口的高度，单位是字符行;cols属性用来设置文本输入窗口的宽度，单位是字符个数。通常多行文本区不能完全容纳数据时，浏览器会自动产生滚动条。(4)readonly属性将多行文本区设定为只读，不能修改和编辑。上一页返回11.6标签label为了使浏览者能更方便地选择选项或定位输入点，在网页制作时应该使浏览者能在单击与某个控件相关的文本时，即选中该控件。例如，单击复选框右边的文本即可选中复选框，或者单击文本框左边的提示文本即可将插入点定位到该文本框。实现这种功能的方法是用label标记符为表单控件指定标签，并使用<label>标记的for属性使其与表单控件关联起来，将<<lable>标记的for属性设置为与该控件的id相同，将lable绑定到控件的name属性是没有作用的。其语法为:<labelfor=”fname">显示内容字符串</label>for表示<<lable>标记要绑定的表单控件的id，点击这个标记的时候，所绑定的标记将获取焦点。下面的例子在有输入框控件的表单中使用了<<label>标记。返回11.7HTML5新增的元素属性11.7.1form在HTML5中，可以把表单从属元素写在页面的任何地方，然后给元素指定一个form属性，属性值为表单的id，这样就可以声明该元素从属于指定表单。11.7.2input在HTML5中，对input元素进行了大幅度的改进，使得我们可以简单地使用这些新增的元素来实现需要JavaScript来能实现的功能。(1)url类型。input元素里的url类型是一种专门用来输入URL地址的文本框。如果该文本框中的内容不是URL地址格式的文字，则不允许提交。(2)email类型。下一页返回11.7HTML5新增的元素属性如果用户在该文本框中输入的不是email地址的话，则会提醒不允许提交，但值得注意的是:它并不检查该email地址是否存在。如果另外加上required属性的时候，该文本是可以为空的。另外email类型的文本框有一个multiple属性，它允许在该文本框中输入一连串以逗号分开的email地址。(3)date类型。input元素里的，date类型在开发网页的过程中是很常见的，例如我们经常看到的购买日期、发布时间、订票时间等。这种，date类型的时间是以日历的形式来方便用户输入的。(4)time类型。input里的time类型是专门用来输入时间的文本框，并且会在提交时上一页下一页返回11.7HTML5新增的元素属性对输入时间的有效性进行检查。它的外观可能会根据不同类型的浏览器而有不同表现形式。(5)datetime-local类型。datetime-local类型是一种专门用来输入本地日期和时间的文本框，同样，它在提交的时候也会对数据进行检查。(6)month类型。顾名思义，month类型是一种专门用来输入月份的文本框，同样提交时它也会对数据进行检查。(7)week类型。week类型是一种专门用来输入周号的文本框，它也会在提交时对数据进行检查。上一页下一页返回11.7HTML5新增的元素属性2.input属性(1)formaction属性。在HTML5中，可以给所有的提交按钮增加不同的formaction属性，点击不同的按钮，将不同的表单提交到不同的页面。(2)formmethod属性。在HTML5中，可以使用formaction属性来对每个表单元素分别指定不同的提交页面，同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。(3)placeholder属性。placeholder文本框处于未输入状态并且未获得光标焦点时，会显示提示文字以指导用户输入，当input元素获得焦点时，这些提示文本上一页下一页返回11.7HTML5新增的元素属性将会消失。