第三章表单与元素

第三章表单与表单元素

本章目标理解表单的作用理解表单与表单元素的关系掌握表单标签及其属性掌握各种表单元素标签及其属性表单浏览者经常需要与Web服务器进行数据交互。当浏览者需要填写数据并将这些数据发送到服务器端时，需要在页面中创建表单。<form></form>标签用于创建表单，它表示一组表单数据的容器。<form></form>标签在浏览器中并不具备可见的外观，它只是作为数据的容器。<form> [浏览者在此填写表单数据。]</form>表单元素文本框、密码框、单选按钮、复选框、文件域、隐藏域、提交按钮、重置按钮、自定义命令按钮、图像按钮多行文本域列表框<input/>标签在表单中创建最常用的表单元素，如文本框，密码框，单选按钮，复选框，文件域，隐藏域，提交按钮，重置按钮，自定义命令按钮，图像按钮等。由type属性的值决定生成何种元素。<input/>标签的type属性type属性意义text文本框，type属性的默认值。password密码框。浏览器将显示明文显示成为密码字符。radio单选按钮，应成组地使用，一组中包含多个相关的单选按钮。checkbox复选框。可单独立使用，也可成组使用。file文件域，用于让浏览者选择本机的文件并上传到服务器端。hidden隐藏域，用于在表单内隐含一个预设的数据，相当于一个浏览者看不到的文本框。submit提交按钮，用于表单填写完成时，将此表单的所有数据发送到服务器端。reset重置按钮，用于将表单中所有表单元素的数据恢复到初始状态。button自定义命令按钮，没有任何内置行为。可使用脚本来定义其行为。image图像按钮。功能与submit相同，但显示为图像。<input/>标签的属性属性意义type表单元素的类型，默认值为textid标签在整个页面中的唯一标识符。name表单元素的名称，只有设置了name属性的表单元素才能参与表单提交。value表单元素的值，即它表示的数据。size一般用于文本框和密码框，表示它们的宽度，以字符数度量。maxlength一般用于文本框和密码框，表示它们可以接受的最多字符数。checked只用于单选按钮和复选框，用于设置它们在初始状态下被选中。src只用于图像按钮，设置图像文件的地址。alt只用于图像按钮，设置图像的替代文字。accept只用于文件域，设置文件域可接受的文件类型。disabled禁用表单元素，使它无法被浏览者操作且不参与表单提交。readonly使表单元素的数据无法被浏览者更改。文本框示例会员名:<inputid="txtName"type="text"name="txtName"value="请输入会员名"size="20"/>密码框示例登录密码:<inputid="txtPwd"type="password"name="txtPwd"maxlength="18"/>单选按钮示例性别: <inputid="radioGenderMale"type="radio"name="radioGender"value="male"checked="checked"/>男

<inputid="radioGenderFemale"type="radio"name="radioGender"value="female"/>女复选框示例婚姻状况:<inputid="chkMarried"type="checkbox"name="chkMarried"value="true"/>已婚<br/>兴趣爱好: <inputid="chkTravel"type="checkbox"name="chkHobbies"value="travel"checked="checked">旅行

<inputid="chkGame"type="checkbox"name="chkHobbies"value="game">游戏

<inputid="chkShopping"type="checkbox"name="chkHobbies"value="shopping"checked="checked">购物

<inputid="chkChat"type="checkbox"name="chkHobbies"value="chat">聊天

<inputid="chkBar"type="checkbox"name="chkHobbies"value="bar"checked="checked">泡吧文件域示例相片:<inputid="filePhoto"type="file"name="filePhoto"/>

按钮示例<inputid="btnSubmit"type="submit"name="btnSubmit"value="确认注册"/><inputid="btnReset"type="reset"name="btnReset"value="重新填写"/><textarea></textarea>标签创建多行文本框，允许用户输入大段文本。<form>

简介:<textarea>在此填写你最近两年来的工作经历。</textarea></form><textarea></textarea>标签的属性属性意义id标签在整个页面中的唯一标识符。name多行文本域的名称，只有设置了name属性的多行文本域才能参与表单提交。disabled禁用多行文本域，使它无法被浏览者操作。被禁用的多行文本域不参与表单提交。readonly使多行文本域的数据无法被浏览者更改。cols设置多行文本域的宽度，以每行中可容纳的字符数度量。rows设置多行文本域的高度，以可见的行数度量。wrap设置多行文本域的自动换行模式。有三个值：off:不自动换行。文本区只有一行文本，除非浏览者回车强制换行。virtual:虚拟换行。一行文本的宽度即将超出多行文本框宽度时自动换行，但在自动换行处不产生任何标志。physical:物理换行。一行文本的宽度即将超出多行文本框宽度时自动换行，且在自动换行处产生换行标志。多行文本域示例简介:<textareaname="txtDescription"cols="50"rows="6"wrap="virtual">在此填写你最近两年来的工作经历。</textarea><select></select>及<option></option>标签创建列表框及它的选项，以实现浏览者在多项相关的数据中选择。年龄: <select> <option>--请选择--</option> <option>18岁</option> <option>19岁</option> <option>20岁</option> <option>21岁</option> <option>22岁</option> <option>23岁</option> </select><option></option>标签的属性属性意义value选项表示的数据。如果表单提交时，这个选项是处于被选中的状态，则整个列表框将向服务器发送这个选项的value值。selected设定选项在初始状态下默认被选中。年龄: <select> <optionvalue="">--请选择--</option> <optionvalue="18">18岁</option> <optionvalue="19">19岁</option> <optionvalue="20">20岁</option> <optionvalue="21"selected="selected">21岁</option> <optionvalue="22">22岁</option> <optionvalue="23">23岁</option> </select><select></select>标签的属性属性意义id标签在页面内的唯一标签符。name列表框的名称。必须设置此属性才能参与表单提交。disabled禁用此列表框。size设置列表框中的选项显示几项。未设置此属性时，列表框为下拉形式，设置此属性后，列表框将展开为列表形式。multiple设置列表框的选项可被浏览者多选。列表框示例您感兴趣的职位：<selectname="sltJobs"size="4"multiple="multiple"> <optionvalue=".NET">.NET软件工程师</option> <optionvalue="C++">C++工程师</option> <optionvalue="JAVA">JAVA工程师</option> <optionvalue="WebUI"selected="selected">Web前端工程师</option> <optionvalue="DB">数据库工程师</option> <optionvalue="JAVAWeb">JAVAWeb程序员</option> <optionvalue=""selected="selected">程序员</option> <optionvalue="TEST">软件测试工程师</option></select><button></button>标签创建各种按钮。可以将文本或图像等其他各种内容放置在<button></button>标签之内。<button></button>标签的属性属性意义id标签在页面内的唯一标识符。name按钮的名称。value表单提交时，此按钮要发送的数据。注意：此属性对IE浏览器无效，表单提交时，IE浏览器会将<button></button>标签之间的文本作为此按钮的数据发送给服务器。disabled禁用此按钮。type类型，有三个值：submit,reset,button。注意：此属性的默认值在不同的浏览器之间有差别，所以应显式地为此属性赋值。Button按钮示例<buttonname=”btnSubmit”value=”提交”type=”submit”>提交</button> <buttonname=”btnReset”type=”reset”>重置</button><buttonname=”btnClose”type=”button”>关闭窗口</button><label></label>标签为表单元素提供提示性的说明文字。可用于与某个表单元素进行绑定，这样可以在这个标签在浏览者选择时，浏览器自动将焦点转移到与它绑定的表单元素中。与表单元素显式绑定<label>的for属性值指定为要绑定的表单元素的id属性值。性别:<inputid="radioGenderMale"type="radio"name="radioGender"value="male"checked="checked"/><labelfor="radioGenderMale">男</label><inputid="radioGenderFemale"type="radio"name="radioGender"value="female"/><labelfor="radioGenderFemale">女</label><br/>婚姻状况:<inputid="chkMarried"type="checkbox"name="chkMarried"value="true"/><labelfor="chkMarried">已婚</label><br/>与表单元素隐式绑定要绑定的表单元素放置在<label></label>的标签内部。兴趣爱好:<label><inputid="chkTravel"type="checkbox"name="chkHobbies"value="travel"checked="checked">旅行</label><label><inputid="chkGame"type="checkbox"name="chkHobbies"value="game">游戏<label><inputid="chkShopping"type="checkbox"name="chkHobbies"value="shopping"checked="checked">购物</label><label><inputid="chkChat"type="checkbox"name="chkHobbies"value="chat">聊天</label><label><inputid="chkBar"type="checkbox"name="chkHobbies"value="bar"checked="checked">泡吧</label><br/><fieldset></fieldset>及<legend></legend>标签用于将表单内的多个表单元素分成多个组，并为每个组提供一个标题。<form> <fieldset> <legend>帐户信息</legend>

会员名、登录密码等一组表单元素 </fieldset> <fieldset> <legend>个人资料</legend>

性别、婚姻状况、兴趣爱好、相片、年龄、简介等一组表单元素 </fieldset>

提交和重置按钮</form>表单的属性与提交表单提交是指浏览器将表单内所有表单元素的数据作为整体发送到服务器器。浏览者可以通过类型为sumit或image的<input/>标签以及类型为submit的<button></button>标签的点击来告知浏览器行使提交动作。<form></form>标签的属性属性意义id标签在页面中的唯一标识符。name表单的名称。action动作，一个URL地址。即浏览器向服务器端的哪个程序提交表单数据。method方法，可以get或post,即浏览器采用哪种方法向服务器传递数据。默认为getenctype表单数据在传递之前浏览器对其编码的方式。当表单内包含file类型的<input/>表单元素用于上传文件时，此属性必须设置为multipart/form-data。表单的action属性<formname="frmLogin"action="login.html"method="post">

会员名:<inputtype="text"name="txtName"/><br/>

密码:<inputtype="password"name="txtPwd"/><br/> <inputtype="submit"name="btnSubmit"value="登录"/> <inputtype="reset"name