第三章《表单与表单元素》
element 的 form 表单
element 的form 表单摘要：1.表单概述2.表单元素3.表单提交与验证4.表单示例正文：1.表单概述表单是网页中用于收集用户信息的一种重要元素。
通过表单，用户可以输入数据并将其提交到服务器进行处理。
在HTML 中，`<form>`元素用于定义表单，它可以包含多个输入框、选择框等表单元素，以收集不同类型的数据。
2.表单元素表单元素是构成表单的基本单位，包括输入框、选择框、文本区域、按钮等。
以下是一些常见的表单元素及其用途：- 输入框（`<input>`）：用于收集单行文本或密码等用户输入的数据。
- 选择框（`<select>`）：用于收集用户从一组选项中选择的数据。
- 文本区域（`<textarea>`）：用于收集多行文本数据。
- 按钮（`<button>`）：用于提交表单或执行其他操作。
3.表单提交与验证当用户填写表单并点击提交按钮时，表单数据将发送到服务器进行处理。
在实际应用中，为保证数据质量，通常需要对表单数据进行验证。
例如，检查电子邮件地址的格式是否正确，或确保密码长度不小于一定值。
验证失败时，可以提示用户进行修正。
4.表单示例下面是一个简单的表单示例，用于收集用户名和电子邮件地址：```html<form action="submit_page.php" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username" required> <br><label for="email">电子邮件：</label><input type="email" id="email" name="email" required><br><input type="submit" value="提交"></form>```在这个示例中，我们定义了一个包含用户名和电子邮件地址输入框的表单，并设置了`action`属性以指定表单数据提交的服务器页面，`method`属性以指定提交方式。
表单构成的基本元素
表单构成的基本元素表单是Web界面中常见的一种交互元素，通常用于收集用户输入的数据。
表单的基本元素包括输入框、下拉框、单选框、复选框、文本域和按钮等。
以下是对这些基本元素的详细描述和相关使用参考。
1. 输入框（Input Field）输入框是用户输入文本内容的常用元素，用于接受单行文本数据。
常见的输入框类型有文本框（text）、密码框（password）、邮箱框（email）、电话框（tel）等。
输入框可以设定最大长度（maxlength）、最小长度（minlength）、占位文本（placeholder）、默认值（value）等属性，用于控制用户输入的规则和提示。
使用参考：- 注册页面，包括输入用户名、密码等信息时使用文本框。
- 用于搜索的输入框，用户可以输入搜索关键词。
2. 下拉框（Select）下拉框用于提供一组选项供用户选择。
下拉框包括一个可展开和折叠的选项列表，用户可以通过点击下拉箭头展开或隐藏选项。
每个选项由一个文本和一个值（value）组成，用户选择后，该值会传递到服务器进行处理。
使用参考：- 国家、省市选择器，用于选择地区。
- 选择性别时使用单选框。
3. 单选框（Radio Button）单选框用于提供一组选项，但用户只能选择其中的一项。
每个单选框由一个文本和一个值组成，用户选择后，该值会传递到服务器进行处理。
与下拉框不同的是，单选框在页面中展示为圆形按钮。
使用参考：- 常见的性别选择，男、女、未透露。
- 在问卷调查中，提供多个单选题供用户选择。
4. 复选框（Checkbox）复选框用于提供多个选项，用户可以选择其中的一个或多个选项。
每个复选框由一个文本和一个值组成，用户选择后，所选的值会传递到服务器进行处理。
与单选框不同的是，复选框在页面中展示为方形按钮。
使用参考：- 用户注册页面，选择用户所关注的兴趣爱好。
- 在购物网站中，用户可以同时选择多个商品加入购物车。
5. 文本域（Textarea）文本域用于接受多行文本输入，与输入框不同的是，文本域可以容纳较多的文本内容。
表单和表单域操作
表单及其表单元素操作一、获取表单元素1.通过表单id属性document.getElementById("formID");//dom2.通过表单在表单集合中的索引document.forms[formIndex]; //bomdocument.forms["formName"]; //bom3.通过表单name属性直接访问document.formName二、访问表单域（字段）1.通过表单域id属性document.getElementById("formID");//dom2.通过表单域所在的索引frm.elements[eleIndex]; //可用于遍历表单域3.通过表单域的name属性frm.elements["name"];//得到名为name的表单域4.通过表单域id属性或name属性直接访问frm.eleName;//直接用名称得到表单域frm[“my name”];//得到name属性值有空格的表单域frm[eleIndex];//得到索引为eleIndex的表单元素三、表单元素常用的属性和方法disabled:是否可用，true 不可用,false 可用form:得到表单blur():使表单域失去焦点。
focus():使表单得到焦点。
onblur事件：失去焦点时触发，并调用onblur()函数。
onfocus事件：得到焦点时触发，并调用onfocus()函数。
五、复选框和单选钮checked属性:是否被选中,选中，返回true,否则，返回falseclick():模仿点击，会触发click事件，改变选择状态。
对于复选框，可以进行遍历操作。
通过表单对象.name值，可返回复选钮的集合(等价于getElementsByName())六、掌握表单验证的方式1、阻止提交<form onsubmit=”return check()”>函数check() 返回true,表示提交表单，否则，禁止提交表单2、表单提交调用表单对象.submit()方法提交七．表单常用操作范例1.获取和设置文本域的内容例：求和function getSum(){//获取表单对象var theForm=document.forms["myForm2"];//计算和，并赋值给第3个文本框theForm.elements["sum"].value=eval(theForm.elements["x"].value)+eval(theForm.elements["y"].value);}2.最常见的访问表单字段的方法最简单常用的访问表单元素的方法自然是document.getElementById()例：<input type="text" id="count" value="" />var name=document.getElementById("count ").value这种方法无论表单元素处于那个表单中甚至是不在表单中都适用,一般情况下是我们用JS访问表单元素的首选.鉴于document.getElementById比较长,你可以用如下函数代替它:function $(id){return document.getElementById(id);}把这个函数放在共有JS库中,在jsp页面通过如下方法引用它:<head><title>添加资源页面</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="web/js/check.js" type="text/javascript"></script><link rel="stylesheet" rev="stylesheet" href="web/css/style.css" type="text/css" /></head>此后你就可以直接使用$访问表单元素中的内容:var name=$("name").value;3.获取表单值并将值赋给数组var list=document.getElementsByTagName("input");//对象数组var strData="";//对表单中所有的input进行遍历for(var i=0;i<list.length && list[i];i++){//判断是否为文本框if(list[i].type=="text") { //type=="text" 表示文本框strData +=list[i].value;alert(strData);}}4.表单域字段的共性以下是所有表单字段(除了隐藏字段)Id表单域唯一标识name表单域名称disabled可以用来获取或设置表单控件是否被禁用.form特性用来指向字段所在的表单.blur()方法使表单字段失去焦点.focus()方法使表单字段获得焦点.当字段失去焦点是,发生blur事件,执行onblur事件处理程序.当字段获取焦点时,发生focus事件,执行onfocus事件处理函数.例：当页面载入时将焦点放在第一个字段在body代码中如此书写:<body onload=“focusOnFirstElm()”>JS函数如下书写:Fucntion focusOnFirstElm(){document.forms[0].elements[0].focus();}如果第一个字段不是隐藏字段此方法就是凑效的,如果是的话把elements的下标改成非隐藏字段的下标即可.5.控制表单只被提交一次由于Web的响应问题，用户有可能会点击多次提交按钮从而创建重复数据或是导致错误，可以使用JS对提交按钮进行设置以让表单只被提交一次。
html表单元素及表单元素详解
html表单元素及表单元素详解原⽂⼤纲 1、认识表单 2、认识表单元素 3、表单元素的分类 4、表单元素——⽂本框 5、表单元素button 6、表单元素——单选、多选 7、表单元素——select 8、表单元素——textarea 9、推荐1、认识表单 1、在⼀个页⾯上可以有多个form表单，但是向web服务器提交表单的时候，⼀次只可以提交⼀个表单。
2、要声明⼀个表单，只需要使⽤form标记来标明表单的开始和结束，若需要向服务器提交数据，则在form标签中需要设置action属性（⽤来设置提交表单的位置）、method属性（⽤来定义浏览器将表单中的信息提交给服务器端程序的处理⽅式）、target属性（⽤来指定服务器返回结果所显⽰的⽬标窗⼝或⽬标框架）；但是，对于客户端脚本编程来说，并不需要这些属性来帮助提交表单信息，form标签存在的意义是在于⽅便在脚本中编程的时候进⾏引⽤。
3、表单的引⽤可以利⽤from标签的name属性或者也可以利⽤document的forms[]数组中调⽤到对应的数组。
4、可以利⽤form表单的elements[]数组来遍历除了<input type=image >元素之外的所有元素 5、form表单的submit()⽅法⽤于将表单提交给服务，但我们点击submit按钮的时候，submit按钮会相应的调⽤onsubmit事件处理器从⽽调⽤Form对象的submit事件 6、如何在浏览器中使⽤页⾯中的信息，我们称之为“客户端脚本编程”，⽽如何把信息提交给Web服务，并将数据库保存在数据库中，我们通常称为“服务器端脚本编程” 7、在早期，所有可交互的HTML元素都应该放在HTML表单中，但是现在的定义是，需要提交到web服务器的数据，才必须要放在表单内，可是前⼀种理解的⽅式也不是完全错误的，因为⼀般可以交互的HTML元素，都是表单元素（在前期），即：浏览器需要处理的数据都是表单元素，因此需要将其放在HTML表单中。
HTML_Chapter3表单及表单元素
• 点击按钮
标签：<input type=“button”> 属性：name，
表单中的动作按钮
• <button>标签
标签：<button></button> 属性：type
Tab 键索引顺序
• tabindex 属性
用来设定按下tab键时焦点的移动顺序 tabindex 属性值为正整数
<br> type=“radio” name=“favorite” value=“cat”>猫 <input <input type=“radio” name=“favorite” value=“cat”>猫 • 单选框 type=“checkbox” name=“pets” value=“bird”>鸟 </form> <input type=“checkbox” name=“pets” value=“bird”>鸟 <input type=“checkbox” name=“pets” value=“fish”>鱼 </form> <br> type=“radio” name=“favorite” value=“fish”>鱼 <input
• 表单在各种社会机构中的应用
网上调查 网络咨询
• 表单在网络上其它应用
网络人才招聘 网络社区注册
表单的定义
• 表单
表单由表单容器和其中的表单元素组成，通过表单 可以向服务器传递表单元素中用户输入的数据，形 成用户与服务器的交互
• 表单容器
由<form></form>定义一个表单容器
• 表单元素
element description 表单
表单(element description)在用户界面设计中扮演着重要的角色，它是用户与系统进行交互的桥梁，能够方便快捷地收集用户信息，进行数据输入和提交。
在本文中，我们将详细介绍表单的概念、结构、设计原则以及常见的表单元素，帮助读者更好地理解和运用表单在用户界面设计中的作用。
一、概念1. 表单是指用来收集用户输入信息的交互界面元素，它通常由多个输入字段、标签、按钮等组成，用于向用户展示需要输入的信息和提交已填写的数据。
二、结构1. 表单由表单元素和表单控件组成，表单元素包括form、fieldset、legend、input、select、textarea等，而表单控件包括文本框、单选框、复选框、下拉菜单等。
2. 每个表单元素都有其相应的属性和行为，比如input元素有type、name、value等属性，可以通过这些属性来定义输入框的类型、名称和默认值。
三、设计原则1. 简洁明了：表单的设计应当简洁明了，避免出现过多的输入字段和冗长的说明文本，以提高用户填写表单的效率。
2. 一致性：统一表单的样式和布局，让用户在不同页面填写表单时都能够快速上手，减少操作难度。
3. 错误提示：及时给用户提示错误的输入，并指出正确的输入格式或内容，帮助用户正确填写表单并提交数据。
四、常见的表单元素1. 文本框(input type="text")：用于接收用户输入的文本信息。
2. 密码框(input type="password")：用于接收用户输入的密码信息，输入的内容会以黑点进行隐藏。
3. 单选框(input type="radio")：用于从多个选项中选择唯一的值。
4. 复选框(input type="checkbox")：用于从多个选项中选择多个值。
5. 下拉菜单(select)：用于提供一个选项列表，用户可以从中选择一个或多个选项。
常用的表单元素
常用的表单元素
表单是网页中常见的交互方式，用户可以通过表单输入信息，提交数
据给服务器进行处理。
表单元素是构成表单的基本组成部分，常用的
表单元素如下：
1. 文本框（input type="text"）：用于输入文本信息，如用户名、密码、地址等。
2. 密码框（input type="password"）：与文本框类似，但输入内容
会以星号或圆点等形式隐藏。
3. 单选按钮（input type="radio"）：用于在多个选项中选择一个。
4. 复选框（input type="checkbox"）：用于在多个选项中选择多个
或全部。
5. 下拉列表框（select）：提供一个下拉列表供用户选择。
6. 多行文本框（textarea）：可输入多行文本信息，如评论、留言等。
7. 文件上传框（input type="file"）：允许用户上传文件到服务器。
8. 隐藏域（input type="hidden"）：不显示在页面上，但可以传递数据给服务器端脚本处理。
9. 提交按钮（input type="submit"）：将表单数据提交给服务器进行处理。
10. 重置按钮（input type="reset"）：清空表单中的所有数据并恢复默认值。
以上是常见的表单元素，它们可以组合使用来实现各种复杂的交互功能。
在设计网页时，需要根据实际需求选择合适的表单元素，并合理布局，以提高用户体验。
html中的表单标签及表单元素
html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签：fieldset2、表单元素分为三类：（1）⽂本类型： ⽂本框：text 属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提⽰⽂字）账号：<input type="text"> 密码框：password密码：<input type="password"> 隐藏域：hidden 多⾏⽂本（特殊格式）：textarea<textarea name="" id="" ></textarea>（2）选择类型： 单选：radio 属性有：disabled（不可操作）、checkbox（默认选中的）性别：<input type="radio">男 <input type="radio">⼥ 多选：checkbox爱好：<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉（特殊格式）：select option 属性（option的属性）：selected（默认选中）、multiple（全部显⽰）属性（select的属性）：size（显⽰⼏条）<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>（3）按钮类型： 普通：button<input type="button" value="点我试试"> 提交：submit <input type="submit" value="提交按钮"> 复位：reset<input type="reset" value="清空">其他：1、autofocus属性（聚焦）实例：2、optgroup定义选项组实例：注意：methon:get传值（键值对，显⽰在⽹页的路径上，路径后⾯加数据）post（⽹络传值) ⼀般都⽤post 格式：<form action="#" method="post" enctype="multipart/form-data"> Html5新增：<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。
网页设计中表单主要包含的元素
网页设计中表单主要包含的元素1.背景介绍表单元素是允许用户在表单中输入信息的元素。
随着时代的改变和互联网的发展，表单的使用越来越广泛。
2.知识剖析什么是表单表单在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
常用表单元素form：定义供用户输入的表单。
fieldset：定义域。
即输入区加有文字的边框。
legend：定义域的标题，即边框上的文字。
label：定义一个控制的标签。
如输入框前的文字，用以关联用户的选择。
input：定义输入域，常用。
可设置type属性，从而具有不同功能。
textarea：定义文本域（一个多行的输入控件），默认可通过鼠标拖动调整大小。
button：定义一个按钮。
select：定义一个选择列表，即下拉列表。
option：定义下拉列表中的选项。
属性解释：name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；cols属性定义多行文本框的宽度，单位是单个字符宽度；rows属性定义多行文本框的高度，单位是单个字符宽度；wrap属性定义输入内容大于文本域时显示的方式密码框：是一种特殊的文本域，用于输入密码。
当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。
HTML网页设计(表单元素)
HTML网页设计（表单元素）1.什么是表单表单（form）是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在＜form＞标签在。
一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内）Form标签设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在＜form＞标签和＜/form＞结束标签之间。
2.表单元素在＜form＞标签中，可以包含以下5个标签。
Input标签对于大量通常的表单内元素，可以使用＜input＞标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然＜input＞标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。
当然，根据指定的比哦啊单元素类型，也可以设置一些其他的＜input＞属性。
可以使用＜input＞标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。
从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。
＜input＞标签中必须的type属文字域最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。
范例代码：密码域将type 属性值设置为password ,就可以创建一个密码域。
传统文本域的其他属性和语义也可以应用于密码域。
应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size 和maxlength 属性，并可以设置一个初见时的vlaue 。
范例代码：文件域（file ） 复选框（checked ） 单选框（ridio ） 普通按钮（button ）设置普通按钮（button ）代码：fU&WJ -bl57^4444」.■».I S-l.-L.■■■■■■■■JUJ<input nan»E="nijx"type=71submif value="^X </bcrdy>重置按钮（Reset ）Textarea 标签作为表单的一部分，＜textarea ＞标签可在用户浏览器中创建一个多行文字域，在此文本输入区内,用户几乎可以输入无线文字。
表单元素（form、文本、按钮、选择）
表单元素（form、⽂本、按钮、选择）表单元素⼀、formform代表表单，功能：⽤于申明表单，定义采集数据的范围，也就是<form>和</form>⾥⾯包含的数据将被提交到服务器或者电⼦邮件⾥。
<form> 标签⽤于为⽤户输⼊创建 HTML 表单。
表单能够包含input元素，⽐如⽂本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、type、name、value等元素。
表单⽤于向服务器传输数据。
1.actionaction 属性规定当提交表单时，向何处发送表单数据，把数据提交给哪个⽹站。
2.methodmethod表⽰数据提交⽅式，提交⽅式有两种：get—显式提交，有长度限制。
post—隐式提交3.targettarget表⽰提交⽅式，提交⽅式主要有以下⼏项。
_blank：在新窗⼝中打开。
_parent：在⽗框架集中打开。
_self：默认。
在相同的框架中打开。
_top：在指定的框架中打开。
⼆、⽂本1.⽂本框<input type="text" />，其属性有：value⽂本框的值，就是⽂本框⾥⾯显⽰的内容。
name⽂本框的名称2.密码框<input type="password" />，虽然密码框和⽂本框相似，但在密码框⾥⾯输⼊内容时不显⽰内容，只显⽰●。
3.隐藏域<input type="hidden />,隐藏域的属性有：name密码框的名称value密码框的值4.⽂本域<textarea></textarea>，双标签元素，值不是写在value属性⾥⾯的，是写在开始结束标签之间的，现在所学内容还不能够调整⽂本域的⼤⼩。
⽰例代码：<textarea>⽆⾔</textarea>，⽂本域⾥⾯就会显⽰“⽆⾔”。
常用的表单元素
常用的表单元素1. 概述表单是我们日常生活中非常常见的一种交互形式，用于收集用户输入的一系列数据。
在网页开发中，表单元素是构建用户界面和收集用户信息的重要组成部分。
常用的表单元素包括输入框、复选框、单选框、下拉列表、文本区域等。
在本文中，我们将详细介绍常用的表单元素的使用方法、属性及相关注意事项。
2. 输入框输入框是最常用的表单元素之一，用于接收用户输入的文本信息。
2.1 基本用法<input type="text" name="username" placeholder="请输入用户名">以上代码创建了一个文本输入框，用于接收用户输入的用户名。
其中，type属性指定输入框类型为文本类型，name属性用于命名该输入框，placeholder属性为输入框提供提示文本。
2.2 常用属性•type：指定输入框类型，可选值包括text、password、email、number等。
•name：指定输入框的名称，用于后端处理表单数据。
•value：设置输入框默认值。
•disabled：禁用输入框。
•readonly：设置输入框只读。
3. 复选框复选框用于多选的场景，用户可以从一组选项中选择多个选项。
3.1 基本用法<input type="checkbox" name="hobbies[]" value="reading">阅读<input type="checkbox" name="hobbies[]" value="music">音乐<input type="checkbox" name="hobbies[]" value="sports">运动以上代码创建了一组复选框，用于选择用户的兴趣爱好。
第3章 表格与AP元素_851902381
5
3.1.2 编辑表格
表格在网页中应用很广泛，能够精确 的定位文本，图像和其他网页中的元素。 这需要用户对表格的属性，有清晰的认识。 表格运用的好坏，直接影响用户设计网页 的客观标准，以及制作速度。
6
3.1.2 编辑表格
参数 表格Id 表格 行/列 列 宽 填充 间距 对齐 边框 含义 设置表格的名称，也就是表格的 。 设置表格的名称，也就是表格的Id。 在文本框中分别输入表格中行和列的数目 在文本框中输入表格宽度， 在文本框中输入表格宽度 ，以像素为单位或按占浏览器窗 口宽度的百分比进行计算。 口宽度的百分比进行计算。 在文本框中输入单元格内容和单元格边框之间的像素数。 在文本框中输入单元格内容和单元格边框之间的像素数。 在文本框中输入相邻单元格之间的像素数。 在文本框中输入相邻单元格之间的像素数。 用于确定表格相对于同一段落中其他元素（ 用于确定表格相对于同一段落中其他元素（例如文本或图 的显示位置。包括左对齐、右对齐和居中对齐。 像）的显示位置。包括左对齐、右对齐和居中对齐。当对 齐方式为【默认】 其他内容不显示在表格的旁边。 齐方式为【默认】时，其他内容不显示在表格的旁边。 用于指定表格边框的宽度（以像素为单位） 用于指定表格边框的宽度（以像素为单位）。
当调整整个表格的大小时，表格中的所有单 元格按比例更改大小。如果表格的单元格指定了 明确的宽度或高度，则调整表格大小将更改【文 档】窗口中单元格的可视大小，但不更改这些单 元格的指定宽度和高度。
设置 参数 上下拖动鼠标
11
3.2.2 单元格操作
表格用于布局页面元素，而每个页面插 入到单元格中。因此，单元格的操作也是较 为重要的。对整个页面来说，需要通过不同 大小（行与列不相等）的表格来布局版块内 容。
表单基础知识
表单基础知识表单是Web页面中常见的元素之一，用于收集用户输入的数据并将其提交到服务器进行处理。
了解表单的基础知识对于开发Web应用程序及设计用户友好的界面至关重要。
本文将介绍表单的基本结构、常见的表单元素以及提交和验证数据的方法。
一、表单结构在HTML中，表单通过<form>元素进行定义。
<form>元素包含一个或多个输入元素，例如文本框、下拉框、复选框等，以及一个提交按钮。
以下是一个简单的表单结构示例：```<form action="submit.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><br><label for="email">邮箱：</label><input type="email" id="email" name="email"><br><input type="submit" value="提交"></form>```上述代码中，`action`属性指定了表单提交到的URL，`method`属性指定了HTTP请求的方法，此处为POST。
`<label>`元素用于描述输入字段，`for`属性与`<input>`元素的`id`属性相对应，以便提升可访问性。
`<input>`元素用于创建各种输入字段，`type`属性指定了输入字段的类型，`name`属性用于在提交表单时传递数据。
表单的作用及组成元素
表单的作用及组成元素
表单在网页设计中起着至关重要的作用，它是用户与网页进行
交互的重要工具之一。
表单的主要作用是用来收集用户输入的数据，比如用户的个人信息、意见反馈、订单信息等。
通过表单，用户可
以向网站提交信息，网站可以根据用户输入的内容进行相应的处理
和反馈。
表单由多个组成元素构成，其中包括输入框、单选框、复选框、下拉框、文本域、按钮等。
输入框用于用户输入文本信息，比如用
户名、密码等；单选框用于用户在多个选项中选择一个；复选框用
于用户在多个选项中选择多个；下拉框提供了一个下拉菜单供用户
选择；文本域用于用户输入大段文本信息，比如留言、评论等；按
钮用于提交表单或者执行其他操作。
除了上述基本的组成元素外，表单还可以包含一些特殊的元素
和属性，比如文件上传功能、表单验证、自动填充等，这些元素和
属性可以让表单更加灵活和强大，提升用户体验和数据的准确性。
总的来说，表单作为网页交互的重要工具，通过其多样的组成
元素和功能，可以满足用户输入各种类型的信息的需求，是网页设计中不可或缺的一部分。
表单元素
<input type="radio" name="域名称" value="域值" checked>
• 语法说明
✓ value属性值表示选中项目后传到服务器端的值。 ✓ checked属性表示此项被默认选中。 ✓ 同一组的单选框中只能有一个单选项设置checked。 ✓ 属于同一组的单选框的name属性必须设置为相同
密码框创建示例：
3. 隐藏域hidden
• 当type属性取值为“hidden”时，input标签将创 建一个隐藏域。隐藏域不会被浏览者看到，它用于给 在不同页面中传递域中所设定的值。
• 基本语法
<input type="hidden" name="域名称 value="域值">
• 语法说明：
隐藏域的type、name和value属性都必须设置。
• 语法说明
要将文件内容上传到服务器，还必须修改表单的编码， 这需要使用<form>标签的enctype属性，并将该属性的 值设置为multipart/form-data，同时表单提交方法必 须为post。
文件域创建示例：
5. 单选框
• 单选框，用于在一组选项中进行单项（即互斥）选 择，每个单选框用一个圆框表示。当type属性取 值为“radio”时，input控件将创建一个单选框。
属性值
text password file hidden radio checkbox button submit reset image
type属性值
描述
设置单行文本框元素 设置密码元素 设置文件元素 设置隐藏元素 设置单选按钮元素 设置复选按钮元素 设置普通按钮元素 设置提交按钮元素 设置重置按钮元素 设置图像提交按钮元素
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<select></select>标签的属性
属性 id name disabled size
意义 标签在页面内的唯一标签符。 列表框的名称。必须设置此属性才能参与表单提交。 禁用此列表框。 设置列表框中的选项显示几项。未设置此属性时，列表框 为下拉形式，设置此属性后，列表框将展开为列表形 式。 设置列表框的选项可被浏览者多选。
表单与表单元素
《HTML&JavaScript》第三章
本章目标
理解表单的作用 理解表单与表单元素的关系 掌握表单标签及其属性 掌握各种表单元素标签及其属性
表单
浏览者经常需要与Web服务器进行数据交互。当浏 览者需要填写数据并将这些数据发送到服务器端时， 需要在页面中创建表单。
<form></form>标签
<label></label>标签
为表单元素提供提示性的说明文字。 可用于与某个表单元素进行绑定，这样可以在这 个标签在浏览者选择时，浏览器自动将焦点转移 到与它绑定的表单元素中。
与表单元素显式绑定
<label>的for属性值指定为要绑定的表单元素的id属性值。
性别: <input id="radioGenderMale" type="radio" name="radioGender" value="male" checked="checked" /><label for="radioGenderMale">男</label> <input id="radioGenderFemale" type="radio" name="radioGender" value="female" /><label for="radioGenderFemale">女</label><br /> 婚姻状况: <input id="chkMarried" type="checkbox" name="chkMarried" value="true" /><label for="chkMarried">已婚</label><br />
复选框示例
婚姻状况:<input id="chkMarried" type="checkbox" name="chkMarried" value="true" />已婚<br /> 兴趣爱好: <input id="chkTravel" type="checkbox" name="chkHobbies" value="travel" checked="checked">旅 行 <input id="chkGame" type="checkbox" name="chkHobbies" value="game">游戏 <input id="chkShopping" type="checkbox" name="chkHobbies" value="shopping" checked="checked">购物 <input id="chkChat" type="checkbox" name="chkHobbies" value="chat">聊天 <input id="chkBar" type="checkbox" name="chkHobbies" value="bar" checked="checked">泡吧
submit
reset button
提交按钮，用于表单填写完成时，将此表单的所有数据发送到服 务器端。
重置按钮，用于将表单中所有表单元素的数据恢复到初始状态。 自定义命令按钮，没有任何内置的行为。可借助于js脚本来定义
<input />标签的属性
属性 type id name value
意义 表单元素的类型，默认值为text 标签在整个页面中的唯一标识符。 表单元素的名称，只有设置了name属性的表单元素才能参 与表单提交。 表单元素的值，即它表示的数据。
<option></option>标签的属性
属性 年龄 :
意义
value 选项表示的数据。如果表单提交时，这个选项是处于被选 <select> 中的状态，则整个列表框将向服务器发送这个选项的 <option value="">-请选择--</option> value值。 <option value="18">18岁</option> selected 设定选项在初始状态下默认被选中。 <option value="19">19岁</option> <option value="20">20岁</option> <option value="21" selected="selected">21岁</option> <option value="22">22岁</option> <option value="23">23岁</option> </select>
密码框示例
登录密码:<input id="txtPwd" type="password" name="txtPwd" maxlength="18"/>
单选按钮示例
性别: <input id="radioGenderMale" type="radio" name="radioGender" value="male" checked="checked" /> 男 <input id="radioGenderFemale" type="radio" name="radioGender" value="female" />女
文件域示例
相片:<input id="filePhoto" type="file" name="filePhoto"/>
按钮示例
<input id="btnSubmit" type="submit" name="btnSubmit" value="确认注册" /> <input id="btnReset" type="reset" name="btnReset" value=" 重新填写" />
<textarea></textarea>标签
创建多行文本框，允许用户输入大段文本。
<form> 简介:<textarea>在此填写你最近两年来的工作经 历。</textarea> </form>
<textarea></textarea>标签的属 性
属性 id name disabled 意义 标签在整个页面中的唯一标识符。 多行文本域的名称，只有设置了name属性的多行文本域才能参 与表单提交。 禁用多行文本域，使它无法被浏览者操作。被禁用的多行文本域 不参与表单提交。
disabled type
Button按钮示例
<button name=”btnSubmit” value=”提交” type=”submit”> 提交</button> <button name=”btnReset” type=”reset”>重置</button> <button name=”btnClose” type=”button”>关闭窗口 </button>
<input />标签
在表单中创建最常用的表单元素，如文本框，密码 框，单选按钮，复选框，文件域，隐藏域，提交按 钮，重置按钮，自定义命令按钮，图像按钮等。 由type属性的值决定生成何种元素。
<input />标签的type属性
type属性的值 text password radio checkbox file hidden
用于创建表单，它表示一组表单数据的容器。 <form></form>标签在浏览器中并不具备可见的外观，它只 是作为数据的容器。
<form> [浏览者在此填写表单数据。] </form>
表单元素
文本框、密码框、单选按钮、复选框、文件域、隐 藏域、提交按钮、重置按钮、自定义命令按钮、图 像按钮 多行文本域 列表框