《Web前端开发》课程理论教学部分 第七讲:表单 学时计划:2学时理论,1学时实验 (实验四:在网页中使用表单和多媒体) 教学大纲: 1、表单基础 2、 Input 3、新增的表单属性 4、新增的表单元素 5、表单验证 6、讨论与思考 在开发Web应用程序的过程中,表单是页面上非常重要的内容 因为用户输入的内容都是在表单上完成的,用户和后台程序的交互也 是通过表单实现的。 本讲详细介绍HTML5中表单的元素、属性,以及IIML5新增增 加和扩展的元素和属性,并对表单验证、表单行为等内容进行了介绍。 表单基础 HTML使用表单向服务器提交请求,表单、表单控件的主要作用 就是收集用户输入,当用户提交表单时,用户输入的内容将被作为请 求参数提交到远程服务器。因此,在Web编程中,表单主要用于收集 用户输入的数据。 表单是进行用户交互的主要途径,因此表单在Web开发中有着重 要的意义。 1.1表单元素与表单属性 元素介绍: form元素用于生成输入表单,该元素不会生成可视化的部分。 在HIML5规范以前,其他的表单控件都必须放置在该元素内部。HTML 5之后,表单元素增加了form属性,所以可以单独存在。 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51 xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第七讲：表单 学时计划：2 学时 理论，1 学时 实验 （实验四：在网页中使用表单和多媒体） 教学大纲： 1、表单基础 2、input 3、新增的表单属性 4、新增的表单元素 5、表单验证 6、讨论与思考 在开发 Web 应用程序的过程中，表单是页面上非常重要的内容， 因为用户输入的内容都是在表单上完成的，用户和后台程序的交互也 是通过表单实现的。 本讲详细介绍 HTML 5 中表单的元素、属性，以及 HTML 5 新增增 加和扩展的元素和属性，并对表单验证、表单行为等内容进行了介绍。 一、表单基础 HTML 使用表单向服务器提交请求，表单、表单控件的主要作用 就是收集用户输入，当用户提交表单时，用户输入的内容将被作为请 求参数提交到远程服务器。因此，在 Web 编程中，表单主要用于收集 用户输入的数据。 表单是进行用户交互的主要途径，因此表单在 Web 开发中有着重 要的意义。 1.1 表单元素与表单属性 元素介绍： form 元素用于生成输入表单，该元素不会生成可视化的部分。 在 HTML 5 规范以前，其他的表单控件都必须放置在该元素内部。HTML 5 之后，表单元素增加了 form 属性，所以可以单独存在
主要属性 (1) action:指定当点击表单内的“确认”或“提交”按钮时, 该表单将提交给 action指定的程序来接受和响应。该属性值可以是 个相对路径或者URL (2) method:指定提交该表单时,采用的数据传输方式,即提 交表单时发送何种类型的请求。该属性值为“GET”或“POST” (3)name:指定表单的唯一名称 (4) target:指定使用哪种方式来打开 action指定的响应程序 页面。 (5) enctype:指定表单内的文字编码方式。该属性值为 “ application/x-www-form- urlencode”、“ multipart/form-data”、 “text/ plain 案例: 示例7-1:表单提交方式 使用GET方式提交表单 <meta charset="utf-8 ttfe>表单属性GET<,ite </head> <form method="get"name="UserLogin"action="7-1-Sphp"> p>账号: <input type="text"name=" UserNar maxlength="20"width="30"> <p>p A: <input type="password"name="UserPWD" maxlength="20"width=30"> p>< input type=" submit"name=" Submit" value="提交表单"> </html> 利用POST方式提交表单 <doctype html> <meta charset="utf-8 <tte>表单属性-POsT</ Ititle 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 主要属性： （1）action：指定当点击表单内的“确认”或“提交”按钮时， 该表单将提交给 action 指定的程序来接受和响应。该属性值可以是 一个相对路径或者 URL。 （2）method：指定提交该表单时，采用的数据传输方式，即提 交表单时发送何种类型的请求。该属性值为“GET”或“POST”。 （3）name：指定表单的唯一名称。 （4）target：指定使用哪种方式来打开 action 指定的响应程序 页面。 （5）enctype：指定表单内的文字编码方式。该属性值为 “application/x-www-form-urlencoded”、“multipart/form-data”、 “text/plain”。 案例： 示例 7-1：表单提交方式 使用 GET 方式提交表单： <!doctype html> <html> <head> <meta charset="utf-8"> <title>表单属性-GET</title> </head> <body> <form method="get" name="UserLogin" action="7-1-S.php"> <p>账号：<input type="text" name="UserName" maxlength="20" width="30"> <p>口令：<input type="password" name="UserPWD" maxlength="20" width="30"> <p><input type="submit" name="Submit" value="提交表单"> </form> </body> </html> 利用 POST 方式提交表单： <!doctype html> <html> <head> <meta charset="utf-8"> <title>表单属性-POST</title>
</head> <form method="post"name="UserLogin"action="7-1-S php"> p>账号:< nput type="ext"name=" UserNal maxlength=20"width=30"> <p>口令:< input type=" password"name=" UserPWD" maxlength="20"width="30"> p>< input type=" submit"name=" Submit" value="提交表单"> </html> 1.2标签 元素介绍: label元素主要用在表单元素中定义标签,以实现对其他表单元 素的说明。 元素说明: (1)<labe1>元素可以使用id、 style、 class等核心属性,但 通常不需要 value属性,因为该元素不传递值。 (2)< label元素只是输出了文本内容。使用该标签而不直接使 用文字内容的原因在于,使用该标签可以使得和该元素相关联的元素 形成焦点。部分浏览器是支持。 案例: 示例7-2:标签 <Doctype htm> <meta charset="utf-8> <title>label</title> <form method="post"name="UserLogin"action="7-2-Sphp"> < abel for=" UserName">账号:</abe> <input type="text"name"UserName"width=30"> 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn </head> <body> <form method="post" name="UserLogin" action="7-1-S.php"> <p>账号：<input type="text" name="UserName" maxlength="20" width="30"> <p>口令：<input type="password" name="UserPWD" maxlength="20" width="30"> <p><input type="submit" name="Submit" value="提交表单"> </form> </body> </html> 1.2 标签 元素介绍： label 元素主要用在表单元素中定义标签，以实现对其他表单元 素的说明。 元素说明： （1）<label>元素可以使用 id、style、class 等核心属性，但 通常不需要 value 属性，因为该元素不传递值。 （2）<label>元素只是输出了文本内容。使用该标签而不直接使 用文字内容的原因在于，使用该标签可以使得和该元素相关联的元素 形成焦点。部分浏览器是支持。 案例： 示例 7-2：标签 <!doctype html> <html> <head> <meta charset="utf-8"> <title>label</title> </head> <body> <form method="post" name="UserLogin" action="7-2-S.php"> <p> <label for="UserName">账号：</label> <input type="text" name="UserName" width="30"> <p>
< abel for=" UserPWD">口令:</abe> <input type="password"name="UserPWD"width="30"> p> input type=" submit"name=" Submit" value="提交表单"> </html> 1.3按钮 元素介绍 button元素用于定义一个按钮,在该元素内部可以包含普通文 本、文本格式化标签、图像等内容。 主要属性 (1) disabled:指定该元素是否可用。在进行权限管理时,可 以指定该元素不可用等。 (2)name:指定该元素的唯一名称。 (3)type:指定该元素所定义的按钮类型,属性值是“ button”、 reset submit 之 (4) value:指定该元素的按钮初始值。 元素说明: (1)< button>和< input>元素都可以实现按钮功能,但前者的功 能更加全面。 (2)不要在< button>元素内放置图像映射,鼠标和键盘的一些 操作会影响按钮的行为。 (3)可以在< button>元素内放置图像,实现图像按钮。 案例: 示例7-3:按钮 <!doctype htm> <html> <head <meta charset="utf-8> <title>button</title> bod 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ os. 51xueweb c
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <label for="UserPWD">口令：</label> <input type="password" name="UserPWD" width="30"> <p><input type="submit" name="Submit" value="提交表单"> </form> </body> </html> 1.3 按钮 元素介绍： button 元素用于定义一个按钮，在该元素内部可以包含普通文 本、文本格式化标签、图像等内容。 主要属性： （1）disabled：指定该元素是否可用。在进行权限管理时，可 以指定该元素不可用等。 （2）name：指定该元素的唯一名称。 （3）type：指定该元素所定义的按钮类型，属性值是“button”、 “reset”、“submit”之一。 （4）value：指定该元素的按钮初始值。 元素说明： （1）<button>和<input>元素都可以实现按钮功能，但前者的功 能更加全面。 （2）不要在<button>元素内放置图像映射，鼠标和键盘的一些 操作会影响按钮的行为。 （3）可以在<button>元素内放置图像，实现图像按钮。 案例： 示例 7-3：按钮 <!doctype html> <html> <head> <meta charset="utf-8"> <title>button</title> </head> <body>
<form name="UserLogin"method"get"action="7-3-S php"> mg src="images/UserName.png"> <input type="text"width=30"><br> mg src="images/User PWD. png"> <input type="password"width=30"><br> <button type="submit "style="margin: Opx; border: none, " <img src="images/button-login png"> </button> </html> 1.4列表框与下拉菜单 元素介绍: select元素用于创建列表框或下拉菜单,该元素需要和 option 元素结合使用,每个 option元素代表一个列表项或菜单项。 select元素只能够包含两种子元素 < option>元素:用于定义列表框或菜单项。 < optgroup>元素:用于定义列表项或菜单组项。该元素内包含 option>元素构成组。 主要属性: (1)< select>元素可以指定ID、 style、 class等属性,还可以 指定 onchange事件属性,当该列表框或下拉列表项内的选中选项发 生改变时,出发 onchange事件 < select>元素的其他属性有: disabled:指定该元素禁止使用。 multiple:指定该元素内的选项是否可以是多项选择,默认是单 向选择。 size:指定该列表框内可以同时显示多少个列表项。 (2)< option>元素可以指定ID、 style、 class等属性,还可以 指定 onclick等事件属性。 < option>元素的其他属性有: disabled:指定该元素禁用。 selected:指定该选项初始为选中状态。 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <form name="UserLogin" method="get" action="7-3-S.php"> <img src="images/UserName.png"> <input type="text" width="30"><br> <img src="images/UserPWD.png"> <input type="password" width="30"><br> <button type="submit" style="margin:0px; border:none;"> <img src="images/button-login.png"> </button> </form> </body> </html> 1.4 列表框与下拉菜单 元素介绍： select 元素用于创建列表框或下拉菜单，该元素需要和 option 元素结合使用，每个 option 元素代表一个列表项或菜单项。 select 元素只能够包含两种子元素： <option>元素：用于定义列表框或菜单项。 <optgroup>元素：用于定义列表项或菜单组项。该元素内包含 <option>元素构成组。 主要属性： （1）<select>元素可以指定 ID、style、class 等属性，还可以 指定 onchange 事件属性，当该列表框或下拉列表项内的选中选项发 生改变时，出发 onchange 事件。 <select>元素的其他属性有： disabled：指定该元素禁止使用。 multiple：指定该元素内的选项是否可以是多项选择，默认是单 向选择。 size：指定该列表框内可以同时显示多少个列表项。 （2）<option>元素可以指定 ID、style、class 等属性，还可以 指定 onclick 等事件属性。 <option>元素的其他属性有： disabled：指定该元素禁用。 selected：指定该选项初始为选中状态