《Web前端开发项目教程》网页中表单的应用

项目09网页中表单元素的应用任务9-1网页中表单的应用

知识点掌握表单的基本用法以及各种表单控件掌握html5自带表单验证功能掌握表单样式的应用技能点能够熟练制作表单能够熟练使用各种表单控件能够根据需要对表单进行样式设计能够根据需要使用表格进行页面局部布局表单表单在网页中主要负责数据采集功能。例如，搜索引擎页面、用户登录页面、用户注册页面等使用的就是表单。当用户填写了相应信息后，这些信息就会经过表单服务器被提交到网站的后台，后台管理人员可以经过一系列操作拿到用户输入的信息来判断是否允许用户登录或注册。一、表单的组成一个完整的表单通常由表单域、表单控件（也称为表单元素）、提示信息3个部分构成，具体解释如下：1.表单域：相当于一个容器，用来容纳所有的表单控件和提示信息。表单域可以定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。2.表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。3.提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。表单域表单控件提示信息二、创建表单HTML中规定，使用<form>标签来表示表单，表单里的元素都需要放在<form></form>标签中。<form>具体语法如下：

<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件和提示信息 </form><form>与</form>之间的内容是由用户自定义的，action、method和name为表单标记<form>的常用属性，另外在html5中还新增了autocomplete等属性二、创建表单——action属性在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。例如： <formaction="login.php">

表示当提交表单时，表单数据会传送到当前路径下的

"login.php"的页面去处理。action的属性值可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。例如： <formaction=mailto:xxx@163.com>

表示当提交表单时，表单数据会以电子邮件的形式传递出去。当不设置action属性，或者设置等于空字符串（即action=""）时，表单数据提交给当前页面。二、创建表单——method属性method属性用于设置表单数据的提交方式，其取值为get或post。其中get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，通过get提交数据，用户名和密码将明文出现在url上，且get方式提交的数据最多只能是1024字节。而post方式的保密性好，并且无数据量的限制，使用method="post"可以大量的提交数据。例如：<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按钮--> <buttontype="submit"name="submit">提交</button></form>运行后在输入框中输入“张三”，提交表单后结果如下：二、创建表单——method属性get方式提交的表单数据显示在浏览器的地址栏中，表单数据添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接。get保密性较差，因为在传输过程，数据被放在请求的URL中，而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中，然后放在某个地方，这样就可能会有一些隐私的信息被第三方看到。另外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前，所以是不安全的。get主要用于从服务器上获得数据，例如查询，一般是用get方法递交查询条件，查询结果在页面上体现。二、创建表单——method属性如果我们将method属性的值换成“post”，提交表单后浏览器上出现如图所示的错误信息。因为post是向服务器传送数据的，我们在上面的代码中没有明确指出服务器处理该表单的文件，所以提示“无法传送表单数据”，从这一点上看post和get是不同的，post将表单内各字段名称与其内容放置在HTML表头(header)内一起传送给服务器端交由action属性所指的程序处理，所有操作对用户来说都是不可见的，保密性较好。出于安全性考虑，提交数据的时候最好使用post。二、创建表单——name属性name属性用于指定表单的名称，以区分同一个页面中的多个表单，为在脚本中引用表单提供方便。<formaction=""method="get"name="loginform"> <!--文本框--> <inputname="username"> <!--提交按钮--> <buttontype="submit"name="submit">提交</button></form>二、创建表单——autocomplete属性autocomplete属性是HTML5中的新属性，用于指定表单是否有自动完成功能。所谓“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，输入的历史记录会显示在一个下拉列表里，以实现自动完成输入。autocomplete属性有2个值，可以控制表单的自动完成功能是否开启，具体如下：on：表单开启自动完成功能；off：表单关闭自动完成功能。autocomplete=on三、表单控件表单控件用于定义不同的表单功能，如密码输入框、文本域、下拉列表、复选框等，最常见的表单控件是input控件。input控件的语法格式如下： <inputtype="控件类型"/><input/>标记为单标记，行内元素，但又与一般的行内元素不同，它不形成新的行块，左右可以有其他元素，但是可以设定width和height，有内在尺寸。type属性是<input>标记最基本的属性，其取值有多种，用于指定不同的控件类型。3.1input控件及其属性——type属性常用的type属性值如下text：默认值，单行文本输入框password：密码输入框hidden：隐藏域，在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，为处理表单的程序服务radio：单选按钮checkbox：复选框file：文件域button：普通按钮submit：提交按钮reset：重置按钮image：图像形式的提交按钮文本框密码框提交按钮复选框文本框密码框密码框邮箱复选框提交和重置按钮3.1input控件及其属性——html5新增的type类型email：邮箱<inputtype="email">提供了默认的电子邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满足验证，则会阻止当前的数据提交。url：网址<inputtype="url">验证只能输入合法的网址：必须包含http://number：数字只能输入数字（包含小数点），不能输入其它的字符。可以有属性max:最大值、min:最小值、value:默认值。

例如，数量：<inputtype="number"value="60"max="100"min="0">range：滑块，可以通过刻度滑动来赋值例如<inputtype="range"max="100"min="0"value="50">其中max属性设置滑块控件的最大值，min属性设置滑块控件的最小值，value指定默认值。color：颜色<inputtype="color">生成一个颜色选择器，用户可以选择颜色，可通过获取此标签的value值，获取颜色信息。time/date/month/week：日期时间相关值3.1input控件及其属性——html5新增的type类型对<input>标记定义type属性就可以在前端页面中按默认外观显示表单控件了，但是为了与服务器进行数据传递，除了type属性之外，<input/>控件需要定义一些其他属性，如name、value等。3.1input控件及其属性——name属性name属性由用户自定义，表示控件的名称，每个表单控件都要用一个name属性表示，这是因为web服务器根据表单控件的name属性来判断传递给服务器的值来自哪个控件。为了保证数据的准确采集，需要为每个表单控件定义一个独一无二的名称，但是同为一个组的单选框可以共用一个name。 <formaction=""name="loginform">

姓名：<inputname="username"> <inputtype="submit"name="sbtn"> </form>3.1input控件及其属性——value属性value属性表示表单提交后该input控件上传给服务器的数据。文本框的value属性值表现为文本框中显示的默认值；button普通按钮、submit提交按钮、reset重置按钮的value属性值则表现为按钮上显示的文本；而对于radio单选框、checkbox复选框来说，value属性只是表单提交后上传给服务器的数据。 <formaction=""name="loginform">

姓名：<inputname="username"value="张三"><br>

性别：<inputtype="radio"value="male"name="sex">男 <inputtype="radio"value="famale"name="sex">女 <br> <inputtype="submit"name="sbtn"value="登录"> </form>注意在以上代码中，单选按钮的两个选项使用了相同的name，表示它们属于同一组数据，每一个选项选中后传递不同的值给服务器。3.1input控件及其属性——其它重要属性checked：设置单选框、复选框初始状态首次加载时处于选中状态。

例如：<inputtype="radio"value="famale"name="sex"checked="checked">女

或者直接写成<inputtype="radio"value="famale"name="sex"checked>女

默认该选项被选中。disabled：设置首次加载使禁用此元素。当type为hidden时不能指定该属性。

禁用时该控件显示为灰色。readonly：指定该文本框内的值不允许用户修改（可以使用Javascript脚本修改）。3.1input控件及其属性——其它重要属性placeholder：提供用户填写输入字段的提示信息。该值仅用于提示，当该控件获取焦点时提示信息自动消失，与value属性值不同，value值是用户实现定义好的该控件上传给服务器的数据。如图，两个文本控件分别使用了placeholder和value属性，二者在显示上也是完全不同的。3.1input控件及其属性——案例<formaction=""method="post">

用户名：<inputtype="text"name="username"value="张三"readonly/><br/><br/>

密码：

<inputtype="password"name="pw"placeholder="请输入六位密码"/>

<br/><br/>

性别：

<inputtype="radio"name="sex"value="boy"checked="checked"/>男 <inputtype="radio"name="sex"value="girl"/>女<br/><br/> 兴趣：

<inputtype="checkbox"name="fv"value="sing"/>唱歌 <inputtype="checkbox"name="fv"value="dance"/>跳舞 <inputtype="checkbox"name="fv"value="swim"/>游泳<br/><br/>

上传头像： <inputtype="file"disabled/><br/><br/> <inputtype="submit"name="bt1"/> <inputtype="reset"name="bt2"/> <inputtype="button"name="bt3"value="普通按钮"/> <inputtype="image"name="bt4"src="img/shopcar2.png"width="20"/> <inputtype="hidden"/></form>3.1input控件及其属性——焦点转移对于以上各种input控件，鼠标点击控件会获得焦点。为提供更好的用户体验，常常需要将<input/>控件联合<label>标记使用，以扩大控件的选择范围。例如，在选择性别时，我们希望单击提示文字“男”或者“女”也可以选中相应的单选按钮，在单击提示文字“用户名：”时，希望光标会自动移动到用户名输入框中。这时我们就需要使用<label>标记。<label>标签为input元素定义标注（标记）。如果点击label元素内内容，就会触发相应控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label>标签使用for属性将<label>的标注内容绑定到指定id的表单控件上，for属性要与相关元素的id属性相同。3.1input控件及其属性——焦点转移<formaction=""method="post">

用户名：

<labelfor="username">

<inputtype="text"name="uname"id="uname"/>

</label>

<br>

性别：

<labelfor="boy">

<inputtype="radio"name="sex"id="boy"value="boy"/>男

</label>

<labelfor="girl">

<inputtype="radio"name="sex"id="girl"value="girl"/>女

</label>

<br>

<labelfor="uname">

切换用户

</label></form>三、表单控件——其他表单控件input元素是一个庞大和复杂的元素，但它并不是唯一的表单控件。除此之外，还有button、select、option、optgroup、textarea、fieldset、legend等传统表单控件和datalist、progress、meter、output、keygen等新增表单控件。3.2其他表单控件——button控件<button>标签也可以定义一个按钮，双标记，在button元素内部可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。<button></button>控件与<inputtype="button">相比，功能更为强大，内容更为丰富。具体用法如下：<buttonname="名称"type="按钮类型"value="初始值">

按钮文本、图像或多媒体</button>type属性用来指定按钮类型，仍然分为以下三种：button普通按钮submit提交按钮reset复位重置按钮value属性用来设置按钮的初始值，此值可被JavaScript脚本使用或修改。如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。InternetExplorer将提交<button>与</button>之间的文本，而其他浏览器将提交value属性的内容。3.2其他表单控件——textarea多行文本如果在表单页面中需要用户输入大量文本，单行文本框就满足不了需求了，通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：<textarea>文本内容</textarea>文本区域中可容纳无限数量的文本，超过文本显示区域会自动添加滚动条。可以通过cols和rows属性来规定textarea的尺寸大小，例如：<textareacols="60"rows="8"></textarea>，但是更好的办法是使用CSS的height和width样式属性。3.2其他表单控件——select下拉列表及分组使用select控件定义下拉菜单的基本语法格式如下：<select>

<option>选项1</option><option>选项2</option><option>选项3</option>...</select><formaction=""method="post">

<p>请选择所在城市：</p>

<select>

<optionvalue="bj">北京</option>

<optionvalue="sh">上海</option>

<optionvalue="tj">天津</option>

<optionvalue="wh">武汉</option>

<optionvalue="jn">济南</option>

</select>

<br>

<inputtype="submit"value="提交"/></form>3.2其他表单控件——select下拉列表及分组<select>和<option>标记也可以通过属性设置来改变下拉菜单的外观显示效果。<select>的属性size：指定下拉菜单的可见选项数（取值为正整数）。multiple：定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctrl键的同时选择多项。<option>的属性selected：定义selected="selected"时，当前项即为默认选中项。<formaction=""method="post">

<p>请选择所在城市：</p>

<selectname="city"size="5"multiple>

<optionvalue="bj">北京</option>

<optionvalue="sh"selected>上海</option>

。。。

</select>

<br>

<inputtype="submit"value="提交"/></form>滚动菜单效果3.2其他表单控件——select下拉列表及分组在实际网页开发过程中，有时候由于选项过多，还需要对下拉菜单中的选项进行分组。方法是：在下拉菜单中使用<optgroup></optgroup>标记进行分组，并且使用label属性规定每一组的名称。<formaction=""method="post">

<p>请选择所在区域：</p>

<select>

<option>--请选择--</option>

<optgrouplabel="北京">

<option>东城区</option>

<option>西城区</option>

<option>朝阳区</option>

<option>海淀区</option>

</optgroup>

<optgrouplabel="天津">

<option>和平区</option>

<option>河东区</option>

<option>河西区</option>

</optgroup>

</select></form>3.2其他表单控件——fieldset表单分组当一个表单需要的字段内容较多时，需要合理的对内容进行分组，这样整体看起来更加有组织性。表单分组可以使用<fieldset>和<legend>元素，二者都是双标记，通过<fieldset>标记可将表单中一部分相关元素打包分组，重新设置CSS样式使浏览器以特殊方式显示这组表单字段。<legend>则是用来设置分组标题，它们本身不参与数据的交互操作。<formaction=""method="post">

<fieldsetid="st">

<legend>学生信息</legend>

<p>姓名：<inputtype="text"name="stuName"/></p>

<p>性别：<inputtype="radio"name="sex"value="male"/>男

<inputtype="radio"name="sex"value="female"/>女</p>

<p>年龄：<inputtype="number"name="stuAge"max="25"/></p>

</fieldset> <fieldsetid=“father">

。。。 </fieldset> <inputtype="submit"value="提交"/>

<inputtype="reset"value="重置"/></form>四、HTML5自带表单验证我们在使用表单时为了减轻后台数据传送压力，提高数据传送的质量和效率，往往需要在表单中的这些输入数据被送往服务器前对其进行验证。除了复杂的验证需要使用js脚本完成，html5还新增了一些自带的表单验证功能，例如验证输入数据是否为空，输入邮箱格式是否正确等。四、HTML5自带表单验证——input验证在input标签中可通过type属性指定控件类型：email，指定输入内容为电子邮件地址。url，指定输入内容为URL。number，指定输入内容为数字，并可通过min、max、step属性指定最大最小及间隔。date、month、week、time、datetime、datetime-local指定输入内容为相应日期相关类型。color，指定控件为颜色选择器。如果没有按照预订格式进行输入，在点击提交按钮的时候就会触发错误的验证信息。例：<inputid="u_email"name="u_email"type="email"/>四、HTML5自带表单验证——其它验证非空验证：在需要添加非空验证的元素上添加required属性可以进行非空验证。例如：用户名<inputtype="text"required>在点击提交按钮时，如果文本框中未能输入数据，则触发非空的提示信息。四、HTML5自带表单验证——其它验证pattern正则验证：规定pattern属性指定输入内容必须符合指定模式（正则表达式）。例：<inputid="phone_num"name="phone_num"type="text"pattern="\d{3}-\d{4}-\d{4}"placeholder="xxx-xxxx-xxxx"/>若输入格式不符合正则表达式规定的格式，则给出相应错误提示。如果需要添加自定义提示，只需要添加title属性即可。四、HTML5自带表单验证——novalidate属性HTML5加强了表单验证功能，可验证表单控件是否可空及输入内容的类型及格式是否合乎规定，还可通过为表单或控件设置novalidate属性指定在提交表单时是否取消对表单或者某个控件进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证。同样，为指定的某个input控件设置该属性时，则关闭该input控件的验证。<formaction=""method="get"novalidate><inputtype="text"name="user_name"required/><inputtype="number"name="user_age"/><inputtype="submit"/></form>以上表单内的所有表单控件将不被验证。五、表单样式的应用——属性选择器的应用表单中需要大量地使用<input>标记，而且不同类型的input控件往往有不同的样式，所以我们在定义CSS样式表时经常要定位到具体的某个或者某几个input元素，这种情况下使用以前学过的选择器效率不高。属性选择器是根据元素的属性和属性值来匹配元素，在为不带有class或id的表单设置样式时特别有用。input[type="text"]{width:150px;display:block;}input[type="button"]{width:120px;margin-left:35px;display:block;}5.1属性选择器的应用——简单属性选择器如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。例如把包含value属性的所有元素变为红色，可以写作：*[value]{color:red;}把包含type属性的input元素宽度都设成100px，可以写作：input[type]{width:100px;}还可以根据多个属性进行选择。例如，要将同时有href和title属性的HTML超链接的文本设置为红色，可以这样写：a[href][title]{color:red;}5.1属性选择器的应用——根据具体属性值选择为了进一步缩小选择范围，可以只选择有特定属性值的元素。例如，input[type=text]{color:red;}这种方法要求属性与属性值必须完全匹配。5.1属性选择器的应用——根据部分属性值选择（了解）如果需要根据属性值中的某个词进行选择，可以使用波浪号（~）。例如，input[name="~stu"]，可以选取name属性值包含stu的input元素。除此之外，还有更多的子串匹配属性选择器，常用的见下表。类型描述[abc^="def"]选择abc属性值以"def"开头的所有元素[abc$="def"]选择abc属性值以"def"结尾的所有元素[abc*="def"]选择abc属性值中包含子串"def"的所有元素5.2注册登录表单的设计一个好的web表单设计需要合理有层次的组织信息，设计清晰的浏览线，合理的标签、提示文字及按钮的排布，避免不必要的信息重复出现，降低用户的视觉负担。一般来说，要包括以下几个部分：标签：告诉用户这里应该输入的元素是什么，如：姓名、电话、地址；输入域：可交互的输入区域，如：文本框、选项框、下拉选择、文件上传；提示信息：提示信息是对标签进行额外的信息描述，如：输入信息的范例、填写帮助；反馈：告知用户当前操作可能或已出现的问题，如：错误提示、必填项提示等；动作按钮：动作按钮是在表单的结尾，如：提交、下一步、重置。标签输入域提示信息验证反馈按钮5.2注册登录表单的设计<body><divclass="container"><formaction="#">

<h3>用户注册</h3><span>用户名</span><inputtype="text"name="username"required/><span>邮箱</span><inputtype="email"name="email"requiredplaceholder="xxx@"/><span>手机号</span><inputtype="tel"name="tel"><span>网址</span><inputtype="url"name="url"><span>所在城市</span><selectname="city"><optionvalue="0">北京</option><optionvalue="1">上海</option><optionvalue="2">杭州</option><optionvalue="3">济南</option><optionvalue="4">深圳</option></select><inputtype="submit"/></form></div></body>5.2注册登录表单的设计<style>*{margin:0;padding:0;}.container{wi