第六课时：表单的应用
2.6.1 表单的构成
一个简单的 HTML 表单界面由 表单控件（也称表单元素）、提示信息 和 表单域 3部分构成
- 表单控件：包含了具体的表单功能项，如：单行文本输入框、密码输入框、复选框、提交按钮 和 搜索框 等
- 提示信息：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作
- 表单域：相当于一个容器，用来容纳所有的表单控件和提示 信息，可以通过它 定义、处理表单数据所用程序的 url 地址 及 数据提交到服务器的方法。如果不定义表单域，数据将无法提交到服务器后台
语法格式：
<from action="url地址" method="提交方式" name="表单名称">
表单控件
</from>
2.6.2 表单的属性
表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证 等不同的表单功能
-
action 属性
action 属性 用于指定接收并处理表单数据的服务器程序的 URL 地址
- action 的属性值可以是 相对路径 或绝对路径，也可以是 接收数据的 E-mail 邮箱地址
<from action="action.asp"> </from>
-
method 属性
method 属性 用于设置表单数据的提交方式，其取值为 get 或 post
- post 的提交方式：post 方法提交的数据不会显示在浏览器的地址栏中，保密性好，并且无数据量的限制
- 首先将数据
- get 的提交方式：get 方法提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制
<from action="action.asp" mothod="post"> </from>
-
name 属性
name 属性 用于指定表单的名称，以区分同一个页面中的多个表单
<from action="action.asp" mothod="post" name="User"> </from>
-
autocomplete 属性
autocomplete 属性 用于指定表单是否有自动完成功能。
- 自动完成：将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入（类似于记住账号密码）
属性值 说明 on 表单有自动完成功能 off 表单没有自动完成功能 <from action="action.asp" mothod="post" name="User" autocomplete="on"> </from>
-
novalidate 属性
novalidate 属性 用于指定在提交表单时取消对表单进行有效的检查
- 对表单设置该属性时，可以关闭整个表单的验证，这样可以使 from 内的所有表单控件不被验证
属性值 说明 true 取消表单验证 false 使用表单验证 <from action="action.asp" mothod="post" name="User" autocomplete="on" novalidate="true"> </from>
2.6.3 input 元素及属性
input 元素 是表单中最常见的元素，网页中常见的 单行文本框、单选按钮、复选框 等都是通过它定义的
对于浏览器不支持的 input 类型，将会在网页中显示为一个普通输入框
input 元素的 type 属性
-
单行文本输入框 text
一般用于输入简短的信息，如：用户名、账号、证件号码 等
<input type="text" />
-
密码输入框 password
用于输入密码，其内容以圆点的形式显示
<input type="password" />
-
单选按钮 radio
用于单项选择，如：性别、是否操作 等。
注意：在定义单选按钮时，必须为同一组中的选项指定相同的 name 值，这样单选才会生效。另外，可以对单选按钮应用 checked 属性，指定默认选中项
<input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女
-
复选框 checkbox
用于多项选择，如：选择兴趣、爱好 等。另外，可对其应用 checked 属性，指定默认选中项
<input type="checkbox" /> 香蕉 <input type="checkbox" /> 苹果 <input type="checkbox" /> 菠萝
-
普通按钮 button
普通按钮常常配合 Javascript 脚本语言使用
<input type="button" />
-
提交按钮 submit
表单的核心控件，可对其应用 value 属性，改变提交按钮上的默认文本
<input type="submit" value="登录"/>
-
重置按钮 reset
单击取消已输入的所有表单信息，可对其应用 value 属性，改变提交按钮上的默认文本
<input type="reset" value="重置" />
-
图像形式的提交按钮 images
更加美观，必须为其定义 src 属性指定图像的 url 地址
<input type="images" src="images/logo.jpg" />
-
隐藏域 hidden
对于用户不可见，通常用于后台的程序
<input type="hidden" />
-
文件域 file
用户可通过 填写文件路径 或 直接选择文件 进行提交
<input type="file" />
-
E-mail 地址的输入域 email
input 元素 中一种专门用于输入 E-mail 地址的文本输入框，用来验证 email 输入框的内容是否符合 E-mail 邮件地址格式，如果不符合，将提示相应的错误信息
<input type="email" />
-
url 地址的输入域 url
用于输入 URL 地址 的文本框。如果输入的是 URL 地址，则提交给服务器，反之提示错误信息
<input type="url" name="user_url"/>
-
数值的输入域 number
在提交表单时，会自动检查该输入框中的内容是否为数字，如果输入的内容不是数字或数字不在限定范围内，则会出现错误提示
number 类型的输入框可以对输入的数字进行限制。
- value：指定输入框的默认值
- max：指定输入框可以接受的最大输入值
- min：指定输入框可以接受的最小输入值
- step：输入域合法的间隔，如果不设置，默认值为 1
<input type="number" name="number1" value="1" min="1" max="20" step="4" />
-
电话号码输入类型 tel
用于提供输入电话号码的文本框。由于电话号码的格式千差万别，因此，tel 类型通常会和 pattern 属性配合使用
<input type="tel" />
-
搜索域 search
search 类型是一种专门用于输入搜索关键词的文本框，它能渣滓洞记录一些字符，如站点搜索 或 Google搜索。用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮会快速清除内容
<input type="search" name="searchinfo" />
-
颜色输入类型 color
提供颜色的文本框，用于实现 RGB 颜色输入，默认值为 #000，通过 value 属性值可以更改默认颜色，也可以单击打开拾色器面板进行更改
<input type="color" />
-
一定范围内数字值的输入域 range
range 类型的 input 元素 用于提供一定范围内数值的输入范围，在网页中显示为滑动条
常用属性与 number 类型一样，通过 min 属性 和 max 属性，可以设置 最小值 和 最大值
<input type="range" />
-
日期和时间的输入类型 Date pickers（date，mouth，week，time，datetime，datetime-local）
时间和日期类型 说明 date 选取 日、月、年 month 选取 月、年 week 选取 周 和 年 time 选取时间（小时和分钟） datetime 选取时间、日、月、年（UTC时间） datetime-local 选取时间、日、月、年（本地时间） <input type="Date" />
input 元素的其他属性
-
form 属性
HTML5 中 的 from 属性，可以把表单内的子元素写在页面中的任一位置，只需要为该元素指定 form 属性并设置属性值为该表单的 id 即可
此外，form 属性还允许规定一个表单控件隶属于多个表单
form 属性适用于所有的 input 输入类型，使用时只需要引用所属表单的 id 即可
<body> <form action="#" method="post" id="user_from"> 请输入您的名字：<input type="text" name="name" /> <p> 这是一段话 </p> </form> 请输入您的昵称：<input type="text" name="username" form="user_form" /> <!-- 指定该元素form属性的id值 --> </body> <!-- 三个元素内容都会被提交到 user_form 的表单中 -->
-
autofocus 属性
页面加载完成后 是否会自动获取光标焦点，以便输入关键词
<body> <form action="#" method="post" id="user_from"> 请输入搜索关键词：<input type="text" name="name" autocomplete="off" autofocus="autofocus" /> <input type="submit" value="提交" /> </form> </body> <!-- autocomplete="off" 没有自动完成功能，会获取光标焦点在文本框上 -->
-
list 属性
list 属性用于指定输入框所板顶的 datalist 元素，其值是某个 datalist 元素的 id
<form action="#" method="post" id="webfrom"> <input type="url" list="url_list" name="weburl" /> <!--绑定 datalist 的 id 属性，实现数据列表下拉效果--> <datalist id="url_list" > <option label="百度" value="http://www.baidu.com"></option> <option label="谷歌" value="http://www.google.com"></option> </datalist> <input type="submit" value="提交" /> </form> <!-- 绑定 datalist 的 id 属性，实现数据列表下拉效果 -->datalist 数据列表下拉效果
<datalist id="要绑定的此下拉数据的 input元素 的 list属性" > <option label="百度" value="http://www.baidu.com"></option> <option label="谷歌" value="http://www.google.com"></option> </datalist>
-
multiple 属性
指定输入框是否可以选择多个值，该属性适用于 email 和 file 类型的 input 元素。
-
如果选择的是邮箱，多个地址之间通过英文状态下的逗号隔开
-
如果选择的是文件，按住 Ctrl 进行多选
<body> <form action="#" method="post" id="email_from"> 邮箱：<input type="email" name="email" multiple="multiple" /> 多个地址之间通过 "," 隔开 </form> </body> <!-- 123546@163.com, 123546@163.com 多个地址之间通过英文状态下的逗号隔开 --> -
-
min、max 和 step 属性
用于包含数字或日期的 input 输入类型规定限值，也就是给这些类型的输入框加一个数值约束
适用于 date、pickers、number 和 range 标签
max：规定输入框所允许的最大输入值
min：规定输入框所允许的最小输入值
step：为输入框规定合法的数字间隔，如果不设置，默认为 1
<input type="number" name="number1" value="1" min="1" max="20" step="4" />
-
pattern 属性
用于验证 input 类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配
适用于的类型有：text、search、url、tel、email 和 password 的 input 标记
常用的正则表达式 说明 ^[0-9]*$数字 ^/d{n}$n 位的数字 ^/d{n,}$至少 n 位的数字 ^/d{m,n}$m-n 位的数字 ^(0|[1-9][0-9]*)$零和非零开头的数字 ^([1-9][0-9]$)+(.[0-9]{1,2})?$非零开头的最多带两位小数的数字 ^(\-|\+)?\d+(\.\d+)?$正数、负数和小数 ^\d+$或^[1-9\d*|0$]非负整数 -[1-9]\d*|0$或((-\d+)|(0+))$非正整数 ^[\u4e00-\u9fa5]{0,}$汉字 ^[A-Za-z0-9]+$或[A-Za-z0-9]{4,40}$英文和数字 ^[A-Za-z]+$由 26 个英文字母组成的字符串 [A-Za-z0-9]+$由数字和 26 个英文字母组成的字符串 ^\w+$或^\w{3,20}$由 数字、26 个英文字母 或者下划线组成的字符串 ^[\u4E00-\u9FAF5-Za-z0-9_]+$中文、英文、数字包括下划线 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$E-mail 地址 [a-zA-]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[w-./?%&=]*)?$URL 地址 ^\d{15}|\d{18}$身份证号（15位、18位数字） ^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以数字、字母x结尾的短身份证号码 ^[a-zA-Z][a-zA-Z0-9_]{4,15}$账号是否合法（字母开头，允许5~16字节，允许字母数字下划线） ^[a-zA-Z]\w{5,17}$密码（以字母开头，长度为6~18，只能包含字母、数字和下划线） <body> <form action="#" method="post" id="email_from"> 密码：<input type="password" name="pwd" pattern="^[a-zA-Z]\w{5,17}$" /> </form> </body> <!-- 以字母开头，长度为6~18，只能包含字母、数字和下划线 -->
-
placeholder 属性
placeholder 属性 用于 input 类型的输入框提供相关提示信息。在输入框为空时显示出现，而当输入框获得光标焦点时则会消失
适用于 type 属性值为 text、search、url、tel、email 及 password 的 input 标记
<body> <form action="#" method="post" id="number_from"> <input type="text" name="code" pattern="[0-9]{6}" placeholder="请输入 6 位数的邮政编码" /> </form> </body>
-
required 属性
HTML5 中的输入类型，不会自动判断用户是否在输入框中输入了内容
如果开发者要求输入框中的内容是必填，那么需要 input 元素指定 required 属性，required 属性 用于规定输入框填写的内容不能为空，否则不允许用户提交表单
<body> <form action="#" method="post" id="number_from"> 请输入邮箱：<input type="email" name="myemail" required="required" /> </form> </body>
-
其他常用属性
属性 属性值 说明 代码块 name 由用户自定义 控件的名称 <input type="text" name="user" />value 由用户自定义 input 控件中的默认文本值 <input type="submit" value="登录"/>size 正整数 input 控件在页面中的显示宽度 <input type="text" size="20" />readonly readonly 该控件内容为只读（不能编写修改） <input type="text" readonly="readonly" />disabled disabled 第一次加载页面时禁用该控件（显示为灰色） <input type="text" disabled="disabled" />checked checked 定义选择控件默认被选中的项 <input type="text" checked="checked"/>maxlenght 正整数 控件允许输入的最多字符 <input type="text" maxlenght="18" />
4083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
