HTML5表单
5.1 定义表单
在 HTML 中,<form> 标签用于创建表单.
5.1.1 处理动作
真正处理表单的数据脚本或程序在 action 属性中,属性的值可以是一个完整的 URL.
语法如下:
<form action="表单的处理程序">
...
</form>
示例代码如下:
定义了表单提交的地址为邮箱地址,当程序运行后会将表单收集的资料以邮件形式发出.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设定表单的处理程序</title>
</head>
<body>
<!--这是一个没有控件的表单-->
<form action="mail:mingri@qq.com"></form>
</body>
</html>
5.1.2 表单名称
名称属性 name 用于给表单命名.
注意:
-
不同表单应使用不同名称.
-
表单名称不能包含特殊符号和空格
语法如下:
<form name="表单名称">
...
</form>
示例代码如下:
表单命名为 register
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设定表单的名称</title>
</head>
<body>
<!--这是一个没有控件的表单-->
<form action="mail:mingri@qq.com" name="register"></form>
</body>
</html>
5.1.3 传送方法
表单中的 method 属性用来定义处理程序从表单中获取信息的方式.
属性的取值:
- method = get: 表单数据会被视为 CGI 或 ASP 的参数发送,即来访者输入的数据会附加在 URL 之后,用户端 直接发送至 服务器.
- 优点: 速度比 post 快
- 缺点: 数据长度有限
- method = post: 表单数据和 URL 分开发送,用户端 通知 服务器 来读取数据.
- 优点: 没有数据长度限制
- 缺点: 速度比 get 慢
5.1.4 编码方式
表单中的 enctype 参数用于设置表单信息提交的编码方式.
语法如下:
<form enctype="编码方式">
...
</form>
编码方式 的取值 如下:
5.1.5 目标显示方式
target 属性用于指定目标窗口的打开方式.
表格的目标窗口用来显示表单的返回信息.
语法如下:
<form target="目标窗口的打开方式">
...
</form>
target 的取值如下:
- _blank: 将返回的信息显示在 新打开的窗口 中
- _parent: 将返回信息显示在 父级的浏览器窗口 中
- _self: 将返回信息显示在 当前浏览器窗口 中
- _top: 将返回信息显示在 顶级浏览器窗口 中
5.2 常用的表单控件
在 HTML 表单中,
input 元素是最常用的输入类控件.
input 元素的 type 可选值 如下:
5.2.1 文本框
在表单的输入类控件中,文本框 可以输入任何类型的文本,数字或字母,输入的内容以单行显示.
语法如下:
<input type="text" name="" size="" maxlength="" value=""/>
text 文本框的参数表 如下:
示例 5.1 如下:
在网页中添加用户调整表单，表单中含有两个文本框。
<h1>用户调整</h1>
<form action="mail;3075547037@qq.com" method="get" name="register">
姓名: <input type="text" name="username" size="20"/>
<br/><br/>
网址: <input type="text" name="URL" size="20" maxlength="50" value="http://" />
</form>
5.2.2 密码框
输入密码框的文字均以 星号 或 圆点 显示
语法如下:
<input type="password" name="" size="" maxlength="" value=""/>
password 密码框的参数 如下:
示例 5.2 如下:
在商城的登录界面中，添加单行文本框和密码框。
/* CSS Document */
/*页面整体布局*/
.mr-cont {
width: 365px;
/*整体大小*/
height: 375px;
margin: 20px auto;
border: 1px solid #f00;
background: url(./例5.2_images/4-2.png);
/*添加背景图片*/
}
/*表单整体位置*/
form {
padding: 65px 50px;
}
label {
color: #fff;
display: block;
padding-top: 10px;
position: relative;
}
/*设置单行文本框和密码框的样式*/
label input {
height: 25px;
width: 200px;
position: absolute;
}
label img {
height: 28px;
}
<div class="mr-cont">
<form action="">
<!--使用label标签绑定单行文本框，实现单击图片时文本框也能获取焦点-->
<label for="">
<img src="./例5.2_images/user.png" alt="">
<input type="text">
</label>
<!--密码输入框-->
<label for="">
<img src="./例5.2_images/pass.png" alt="">
<input type="password">
</label>
</form>
</div>
示例 5.3 如下:
通过控制密码框的 oncopy, oncut , onpaste 事件实现禁止复制密码框内容的功能,通过 style 样式属性实现改变密码框中掩码的样式.
/* css */
body {
background-image: url('./例5.3_images/login.gif');
background-repeat: no-repeat;
background-size: cover;
}
form {
width: 530px;
height: 334px;
margin: 0 auto;
padding: 0;
}
table {
width: 100%;
height: 100%;
border: 0;
border-spacing: 0;
}
td {
padding: 5px;
}
input[type="text"],
input[type="password"] {
width: 200px;
padding: 5px;
}
input[type="submit"],
input[type="reset"] {
padding: 5px 10px;
background-color: #337ab7;
border: none;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #286090;
}
<!-- html -->
<table>
<form name="form1">
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td></td>
<td colspan="2">管理员:</td>
<td colspan="2"><input name="txt_name" type="text" size="18" maxlength="50"></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2">密 码:</td>
<td colspan="2">
<input name="txt_passwd" type="password" size="18" oncopy="return false" oncut="return false">
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input name="login" type="submit" id="login" value="登 录"></td>
<td colspan="2"><input type="reset" name="Submit2" value="重 置"></td>
<td> </td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
</form>
</table>
5.2.3 单选按钮
语法如下:
<input type="radio" value="" name="" checked="checked"/>
此语法中 checked 属性表示这一单选按钮默认选中.
value 用来设置用户选中该项目后,传送到处理程序中的值.
示例 5.4 如下:
实现一则心理测试，并且测试题的每个选项前添加一个单选按钮，便于用于选择答案。
<h2>心理小测试：测试你的心智</h2>
<hr>
在冬日的下午，你一个人在散步，这时你最希望看到什么景色？
<hr>
<form action="" name="xlcs" method="post">
<input type="radio" value="answerA" name="test">
在沙滩上晒太阳的螃蟹
<br>
<input type="radio" value="answerB" name="test">
风中摇曳的红枫
<br>
<input type="radio" value="answerC" name="test">
美丽善良的采茶姑娘
<br>
<input type="radio" value="answerD" name="test">
在空中飞行的一对黑鹤
<br>
</form>
5.2.4 复选框
复选框控件 checkbox
语法如下:
<input type=“checkbox" value="" name="" checked="checked"/>
示例 5.5 如下:
仿制购物网站中的购物车结算功能，注意本实例中的全选和全部选没有实际功能。
/* CSS Document */
/*页面整体布局*/
.mr-cont {
width: 510px;
height: 405px;
margin: 20px auto;
border: 1px solid #f00;
background: url(./例5.5_images/4-4.jpg);
}
/*通过内边距调整表单位置*/
form {
padding-top: 10px;
}
/*属性选择器设置复选框样式*/
[type="checkbox"] {
display: block;
height: 125px;
}
<div class="mr-cont">
<form action="">
<!--使用label标签绑定单选按钮，单击汉字“全选”或“全不选”时，也能选中对应按钮-->
<label for=""><input type="radio" name="all">全选</label>
<label for=""><input type="radio" name="all">全不选</label>
<!-- 复选框 -->
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
<input type="checkbox" class="checkbox1">
</form>
</div>
5.2.5 普通按钮
普通按钮通常配合脚本进行表单处理.
value 参数是显示在按钮上的文字.
onclick 参数时设置鼠标单击按钮时所进行的处理.
语法如下:
<input type="button" value="" name="" onclick=""/>
示例 5.6 如下:
在网页中添加三个按钮，并且为第二个按钮添加关闭窗口的功能，为第三个按钮添加打开窗口功能。
下面是几个有不同功能的按钮：<br><br>
<form action="" name="ptan" method="post">
<!--在页面中添加一个普通按钮-->
<input type="button" value="普通按钮" name="button1">
<!--在页面中添加一个关闭当前窗口-->
<input type="button" value="关闭当前窗口" name="close" onclick="window.close()">
<!--在页面中添加一个打开新窗口的按钮-->
<input type="button" value="打开窗口" name="opennew" onclick="window.open()">
</form>
5.2.6 提交按钮
submit 控件 提交按钮不需要设置 onclick 参数.
语法如下:
<input type=“submit" value="" name=""/>
示例 5.7 如下:
制作一个表单，表单中需要用户添加姓名、网址、密码以及选择喜欢的音乐和居住的城市，最后单击提交按钮可以提交表单。
<form action="" method="post" name="invest" enctype="text/plain">
姓名：<input type="text" name="username" size="20" /><br /><br />
网址: <input type="text" name="URL" size="20" maxlength="8" value="http://"><br><br>
密码：<input type="password" name="password" size="20" maxlength="8" /><br /><br />
确认密码：<input type="password" name="qurpassword" size="20" maxlength="8" /><br /><br />
请选择你喜欢的音乐：
<input type="checkbox" name="m1" value="rock" />摇滚乐
<input type="checkbox" name="m2" value="jazz" />爵士乐
<input type="checkbox" name="m3" value="pop" />流行乐<br /><br />
请选择你居住的城市：
<input type="radio" name="city" value="beijing" />哈尔滨市
<input type="radio" name="city" value="shanghai" />长春市
<input type="radio" name="city" value="nanjing" />沈阳市<br /><br />
<input type="submit" name="submit" value="提交表单" />
</form>
5.2.7 重置按钮
设置 reset 参数,即单击重置按钮后,可以清除表单的内容.
语法如下:
<input type=“reset" value="" name=""/>
示例 5.8 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style>
.mr-cont {
height: 474px;
width: 685px;
margin: 20px auto;
border: 1px solid #f00;
background: url(./例5.8_images/bg.png);
}
.mr-cont div {
width: 400px;
text-align: center;
margin: 30px 0 0 140px;
}
.red {
font-size: 12px;
color: #f00;
}
.addr input {
margin: auto 20px;
}
[type="radio"] {
margin: 0 30px;
}
p {
text-align: left;
margin-left: 45px;
}
/*文本域的大小*/
textarea {
height: 80px;
width: 390px;
}
#btn {
margin-top: 10px;
}
/*设置"提交""保存""重填"按钮的大小*/
#btn input {
width: 80px;
height: 30px;
}
</style>
</head>
<body>
<div class="mr-cont">
<h2>收货信息填写</h2>
<!--单击提交时,页面跳转至"login.html"页面-->
<form action="./例5.8-2.html">
<div>姓名：
<!--单行文本框-->
<input type="text"><span class="red">*****必填项</span>
</div>
<div>电话：
<input type="text"><span class="red">*****必填项</span>
</div>
<div>是否允许代收：
<!--单选按钮-->
<label>是<input type="radio" name="receive" checked></label>
<label>否<input type="radio" name="receive"></label>
</div>
<div class="addr">地址：
<input type="text" placeholder="--省" size="5">__
<input type="text" placeholder="--市" size="5">
</div>
<div>
<p>具体地址：<span class="red">*****必填项</span></p>
<textarea></textarea>
</div>
<div id="btn">
<!--提交按钮，单击提交表单信息-->
<input type="submit" value="提交">
<!--普通按钮，通过onclick调用处理程序-->
<input type="button" value="保存" onClick="alert('保存信息成功')">
<!--重置按钮，单击后表单恢复默认状态-->
<input type="reset" value="重填">
</div>
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
<style type="text/css">
div {
width: 800px;
text-align: center;
margin: 20px auto;
}
img {
width: 800px;
}
</style>
</head>
<body>
<div>
<h1>恭喜你 信息填写成功！！</h1>
<img src="./例5.8_images/music.png" alt="信息填写成功" />
</div>
</body>
</html>
5.2.8 图像域
指可以用在提交按钮上的图片,即图片具有按钮的功能.
语法如下:
<input type="image" src="" name="" />
src 参数可设置为图像的地址，可以是绝对地址或相对地址
示例 5.9 如下:
实现个人信息表单，表单下的确定和取消按钮使用图像域实现。
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain">
姓名：<input type="text" name="username" size="20" /><br /><br />
网址：<input type="text" name="URL" size="20" maxlength="50" value="http://" /><br /><br />
密码：<input type="password" name="password" size="20" maxlength="8" /><br /><br />
确认密码：<input type="password" name="qurpassword" size="20" maxlength="8" /><br /><br />
请选择你喜欢的音乐：
<input type="checkbox" name="m1" value="rock" />摇滚乐
<input type="checkbox" name="m2" value="jazz" />爵士乐
<input type="checkbox" name="m3" value="pop" />流行乐<br /><br />
请选择你居住的城市：
<input type="radio" name="city" value="beijing" />北京
<input type="radio" name="city" value="shanghai" />上海
<input type="radio" name="city" value="nanjing" />南京<br /><br />
<input type="image" src="./例5.9_images/11.png" name="image1" />
<input type="image" src="./例5.9_images/22.png" name="image2" />
</form>
5.2.9 隐藏域
隐藏域主要用于传递一些参数,而这些参数不需要在页面中显示.
语法如下:
<input type=“hidden" value="" name="" >
示例代码如下:
<form action="mailto:mingrisoft@mingrisoft.com" method="post" name="invest" enctype="text/plain">
姓名：<input type="text" name="username" size="20"><br><br>
网址：<input type="text" name="URL" size="20"><br><br>
密码：<input type="password" name="password" size="20" maxlength="8"><br><br>
确认密码：<input type="password" name="qurpassword" size="20" maxlength="8"><br><br>
请确认你喜欢的音乐:
<input type="checkbox" name="m1" value="rock">摇滚乐
<input type="checkbox" name="m2" value="jazz">爵士乐
<input type="checkbox" name="m3" value="pop">流行乐<br><br>
请选择你居住的城市：
<input type="radio" name="city" value="beijing">北京
<input type="radio" name="city" value="shanghai">上海
<input type="radio" name="city" value="nanjing">南京<br><br>
<input type="image" src="./例题/例5.9_images/11.png" name="image1">
<input type="image" src="./例题/例5.9_images/22.png" name="image2">
<input type="hidden" name="form" value="invest">
</form>
5.2.10 文本域
用于查找硬盘中的文件路径,通过表单上传选中的文件.
语法如下:
<input type="file" name="">
示例如下:
在网页中添加文件域，实现选择文件功能。
/* css */
.mr-cont {
width: 800px;
height: 600px;
margin: 20px auto;
text-align: center;
border: 1px solid #f00;
background: url(./例5.10_images/bg.png);
}
/*通过内边距调整标题位置*/
h2 {
padding: 40px 0 0 0;
}
/*表单整体样式*/
form {
width: 554px;
height: 462px;
margin: 0 0 0 150px;
background: url(./例5.10_images/4-9.png);
}
.clear {
height: 100px;
}
/*文件域样式*/
[type="file"] {
display: block;
padding: 0 0 0 175px;
}
/*图像域样式*/
[type="image"] {
margin: 304px 0 0 100px;
}
<!-- html -->
<div class="mr-cont">
<h2>用户信息注册</h2>
<form>
<!--添加一个空的div，并且在CSS中设置其大小，以便于设置文件域的位置-->
<div class="clear"></div>
<!--文件域-->
<input type="file">
<!--图像域-->
<input type="image" src="./例5.10_images/btn.jpg">
</form>
</div>
5.2.11 标签
<label>
元素（标签）用于在表单元素中定义标签,对其他表单控件元素进行说明.可以指定 id , style , class 等核心属性,也可以指定 onclick 等事件属性.
for 属性指定 <label> 标签与哪个表单控件相关联.
当用户点击 <label>标签生成的标签时,浏览器会自动将焦点转移到和该标签关联的表单控件元素上
标签和表单控件关联方式如下:
- 隐式关联: 指定 <label> 标签的 for 属性值为所关联的表单控件的 id 属性值.
- 显式关联: 将普通文本,表单控件一起放在 <label> 标签内部
语法如下:
<form>
<label for="paw">密 码</label>
<input type="password" name="password" id="password">
</form>
示例如下:
用label标签实现单击文字使输入框获取焦点。
<form action="" method="post" name="invest">
<label for="username">姓名: </label>
<input type="text" name="username" id="username" size="20"><br><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password" size="20"><br><br>
<input type="submit" value="登录">
</form>
5.2.12 使用button定义按钮
<button> 标签用于定义一个按钮,<button> 标签不同于 <input> 按钮,内部可以包含普通文本,文本格式化标签和图像等.
<button> 标签的属性如下:
- disabled: 指定是否禁用该按钮.
- name: 指定该按钮唯一的名称,通常与 id 属性值保持一致
- type: 指定该按钮类型,值有 button,reset,或 submit .
- value: 指定该按钮的初始值,可通过脚本控制.
- 支持全局属性
示例如下:
在网页中通过在button元素中嵌套img元素实现图片按钮。
<form action="" name="invest" method="post">
<label for="username">姓名：</label>
<input type="text" name="username" id="username" size="20"><br><br>
<label for="password">密码：</label>
<input type="password" name="password" id="password"><br><br>
<button type="submit"><img src="./例5.12_images/11.png" alt=""></button>
<button type="reset"><img src="./例5.12_images/22.png" alt=""></button>
</form>
5.2.13 菜单和列表
菜单和列表类的控件用来选择给定答案的一种.
<select>：HTML Select 元素表示一个控件，该控件提供选项菜单。
<option>: HTML Option 元素用于定义包含在 <select>、<optgroup> <datalist> 元素中的项,可以在 HTML 文档中的弹出 窗口和其他项目列表中表示菜单项。
菜单和列表标签属性 如下:
语法如下:
<select name="下拉的菜单的名称">
<option value="" selected="selected">选项显示内容</option>
<option value="选项值">选项显示内容</option>
</select>
示例如下:
实现一个兴趣调查的页面，首先需要新建HTML文件，在页面中通过列表选择你喜欢的音乐，通过菜单选择你所在的城市。
<h3>兴趣调查</h3>
<form action="" name="invest" method="post">
请选择你喜欢的音乐：<br><br>
<select name="music" id="music" size="5" multiple>
<option value="rock" selected>摇滚乐</option>
<option value="pop">流行乐</option>
<option value="jazz">爵士乐</option>
<option value="cnm">民族乐</option>
<option value="pd">打击乐</option>
</select>
<br><br>
<select name="city">
<option name="beijing" selected>北京</option>
<option name="shanghai">上海</option>
<option name="nanjing">南京</option>
<option name="changchun">长春</option>
</select>
<input type="submit" name="submit" value="提交表单">
</form>
5.1.14 文本域
文本域可以添加多行文字,允许输入更多的文本.
<textarea>：文本区元素 表示一个多行纯文本编辑控件.
语法如下:
<textarea name="" value="" rows="" cols=""></textarea>
textarea 标签的属性如下:
- name: 文本域的名称
- value: 文本域的默认值
- rows: 文本域的行数
- cols: 文本域的列数
示例如下:
实现商品评价页面中评价输入框。
/* css */
.mr-content {
width: 695px;
height: 300px;
margin: 0 auto;
background: url(./例5.14_images/bg.png) no-repeat;
border: 1px solid red;
}
/*文本域样式*/
.mr-content textarea {
margin: 103px 0 0 346px;
}
<!-- html -->
<div class="mr-content">
<form action="">
<!-- 文本域 -->
<textarea cols="30" rows="10" class="mr-message"></textarea>
</form>
</div>
5.3 input 元素的新类型和属性
input 元素的 新类型 如下:
5.3.1 input 元素的新类型
- email 输入类型: email 类型的 input 元素只能输入电子邮件格式的文字,他不检测电子邮件地址是否存在, multiple 属性允许该文本框使用以逗号隔开的一个有效电子邮件地址的列表.
语法如下:
<form>
邮箱：
<input type="email" name="email" value="mingrisoft@yahoo.com.cn" />
<input type="submit" value="提交">
</form>
- url 输入类型: url 类型的 input 元素只能输入 URL 地址格式的文字.
语法如下:
<form>
网址：
<input name="url1" type="url" value="http://www.mingribook.com" />
<input type="submit" value="提交">
</form>
- date 输入类型: 在浏览器中,当该文本获得焦点时,显示日历,可以在日历中选择日期进行输入.
语法如下:
日期：<input name="data1" type="date" value="2023-03-26">
- time 输入类型: 专门用于输入时间的文本框,提交时会对输入时间的有效性进行检查.\
语法如下:
<input name="time1" type="time" />
- datetime-local 输入类型: 专门输入本地日期和时间的文本框,提交时会检查有效性.
<input name="datetime-local" type="datetime-local" />
- month 输入类型: 专门输入月份的文本框,提交时会检查有效性.
语法如下:
<input name="month1" type="month" />
- week 输入类型: 专门用于输入周号的文本框,并在提交时对输入的周号进行有效性检查.
语法如下:
<input name="week1" type="week" />
- number 输入类型: 专门用于输入数字的文本框,并在提交时检查其中的内容是否为数字.在浏览器中,显示为一个微调器控件,不能超过 max 和小于 min,并根据 step 中指定的增量来增加.
语法如下:
<input name="number1" type="number" value="25" min="10" max="100" step="5" />
- range 输入类型: 只允许输入一段范围内数值的文本框.具备 min 和 max 属性,可指定 step 属性,即每次拖动的步幅.在浏览器中以滑动条的方式进行值的指定.
语法如下:
<input name="range1" type="range" value="25" min="0" max="100" step="5" />
示例如下:
通过range类型的input元素生成颜色。
/* css */
fieldset {
padding: 10px;
width: 280px;
float: left;
}
#spnColor {
width: 150px;
float: left;
}
#spnPrev {
width: 100px;
height: 70px;
border: 1px solid #ccc;
float: right;
}
#pColor {
font-weight: bold;
clear: both;
text-align: center;
}
<!-- html -->
<form action="" id="frmTmp">
<fieldset>
<legend>选择颜色值</legend>
<span id="spnColor">
<input type="range" id="txtR" value="0" min="0" max="255" onChange="setSpnColor()">
<input type="range" id="txtG" value="0" min="0" max="255" onChange="setSpnColor()">
<input type="range" id="txtB" value="0" min="0" max="255" onChange="setSpnColor()">
</span>
<span id="spnPrev"></span>
<p id="pColor">rgb(0,0,0)</p>
</fieldset>
</form>
// js
function $$(id) {
return document.getElementById(id);
}
var intR, intG, intB, strColor;
function setSpnColor() {
intR = $$("txtR").value;
intG = $$("txtG").value;
intB = $$("txtB").value;
strColor = "rgb(" + intR + "," + intG + "," + intB + ")";
$$("pColor").innerHTML = strColor;
$$("spnPrev").style.backgroundColor = strColor;
}
// 初始化预览方块的背景色
setSpnColor;
- search 输入类型: 专门用来输入搜索关键词的文本框.
示例如下:
利用 search 类型的 input 元素将要搜索的内容填入文本框中，通过提交将内容输出。
/* css */
.inputtxt {
padding: 3px;
line-height: 18px;
}
fieldset {
padding: 10px;
width: 280px;
}
<!-- html -->
<form action="" id="frmTmp" onsubmit="return ShowKeyWord();">
<fieldset>
<legend>请输入搜索的关键字: </legend>
<input type="search" id="txtKeyWord" class="inputtxt">
<input type="submit" name="frmSubmit" class="inputbtn" value="提交">
</fieldset>
<p id="pTip"></p>
</form>
// js
function $$(id) {
return document.getElementById(id);
}
function ShowKeyWord() {
var strTmp = "<b>你输入的查询关键字: </b>";
strTmp = strTmp + $$('txtKeyWord').value;
$$('pTip').innerHTML = strTmp;
return false;
}
-
tel 输入类型: 专门用来输入电话号码的文本框.没有特殊的校验规则,可通过 pattern 属性指定对于输入的电话号码格式的验证.
-
color 输入类型: 提供一个颜色选择器.
语法如下:
<input type="color" name="color1"/>
5.3.2 input 元素的新属性
- placeholder:当用户还没有输入时,输入型控件通过 placeholder 特性向用户显示描述性说明或者提示信息.
在浏览器中,特色值会以浅灰色样式的显示在输入框中.
语法如下:
<label>text:<input type="text" placeholder="write me"></label>
- autocomplete: 浏览器通过 autocomplete 特性知晓是否应该保存输入值以备用.
语法如下:
设置为 on 时,显示候补的数据列表.使用 datalist 元素与 list 属性提供候补输入的数据列表,自动完成后,datalist 元素中的数据作为候补输入的数据在文本款中自动显示.
<input type="text" name="mr" autocomplete="on" list="mrs"/>
- autofocus: 给控件加上该属性,当画面打开时,该控件自动获得光标焦点.
一个页面只能有一个控件具备该属性
语法如下:
<input type="text" autofocus>
- list: 类似于选择框,当用户想设置的值不在选择列表内时,允许其自行输入,当文本款获得焦点时以提示输入的方式显示.
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list属性示例</title>
<style>
#mr {
display: none;
}
</style>
</head>
<body>
text: <input type="text" name="mr" list="mr">
<datalist id="mr">
<option value="你好">你好</option>
<option value="世界">世界</option>
</datalist>
</body>
</html>
- min 和 max:设置该属性,将 range 输入框的数值输入范围限制住.
语法如下:
<input id="confidence" name="mr" type="range" min="0" max="100" value="0">
- step: 对输入型控件,设置 step 特性 能限制输入值递增或递减的梯度.
语法如下:
<input id="confidence" name="mr" type="range" min="0" max="100" step="5" value="0">
- required: 一旦为某输入型控件设置了该属性,就必须填写此项,否则无法提交表单.
语法如下:
<input type="text" id="firstname" name="mr" required>
5.3.3 output 元素
output
元素显示一些计算的结果或脚本的其他结果,且必须从属某个表单.
示例代码如下:
output 元素绑定到 range 元素上,拖动 range元素的滑动条时,output 元素的父表单会接受消息,同时通知 output 元素,将 range 的值显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>output</title>
</head>
<body>
<form oninput="x.value=parseInt(number.value)">
<input type="range" name="number">
<output for="a" name="x"></output>
</form>
</body>
</html>
示例如下:
制作一个网页上常用的用户注册页面。
<form action="" id="regform" onsubmit="return chkForm();" method="post">
<fieldset>
<ol>
<li>
<label for="username">用户昵称： </label>
<input type="text" id="username" name="username" autofocus required>
</li>
<li>
<label for="uemail">E-mail： </label>
<input type="email" id="uemail" name="uemail" required placeholder="example@domain.com">
</li>
<li>
<label for="age">工作年龄: </label>
<input type="range" id="age" name="range1" max="60" min="18">
<output onforminput="value=range1.value">30</output>
</li>
<li>
<label for="age2">年龄: </label>
<input type="number" id="age2" required placeholder="your age">
</li>
<li>
<label for="birthday">出生日期: </label>
<input type="date" id="birthday">
</li>
<li>
<label for="search">个人主页: </label>
<input type="url" id="search" list="searchlist">
<datalist id="searchlist">
<option label="google" value="https://www.google.com"></option>
<option label="baidu" value="http://www.baidu.com/"></option>
<option label="bing" value="https://cn.bing.com/"></option>
</datalist>
</li>
</ol>
</fieldset>
<div><button type="submit">注册</button></div>
</form>
5.4 表单验证
5.4.1 自动验证
通过在元素中使用属性的方法，实现在表单提交时执行自动验证的功能
1.required 属性:确保表单控件中的值已填写,不允许提交空白内容,同时显示信息提示文字.
- pattern 属性: 根据表单控件上设置的格式规则验证输入是否为有效格式.属性值设置为正则表达式.
语法如下:
<input pattern="[0-9][A-Z]{3}" name="mr" placeholder="输入内容:一个数字与3个大写字母">
-
min 属性与 max 属性: 数值类型或日期类型的 input 元素的专用属性,限制了在 input 元素中输入的数值与日期的范围.
-
step 属性:控制 input 元素中的值增加或减少的增量.
5.4.2 checkValidity 显示验证法
所有的表单元素和输入元素在其 DOM 节点上都有一个
checkValidity
方法.当想要覆盖浏览器的默认的验证和反馈过程时.checkValidity 方法根据验证检查成功与否,返回 true 或 false,同时告诉浏览器运行其检查.
示例代码如下:
<form id="testform" onsubmit="return check();">
<label for="email">E-mail</label>
<input type="email" name="email" id="email"><br>
<input type="submit" value="提交">
</form>
<script>
function check() {
var email = document.getElementById("email");
if (email.value == "") {
alert("请输入E-mail地址");
return false;
}
else if (!email.checkValidity())
alert("请输入正确的E-mail地址")
else
alert("你输入的E-mail地址有效")
}
</script>
5.4.3 避免验证
一个表单分为两部分,第二部分又一个文本框必填.该情况下,应允许用户先提交保存第一部分内容,同时临时取消第二部分的内容表单验证.
- 利用 form 元素的 novalidate 属性,关闭整个表单的验证.先把属性设为 true,关闭表单验证,提交第一部分内容,然后提交第二部分时,再把属性设为 false,打开表单验证,提交第二部份内容.
- 利用 input元素或 submit元素的 formnovalidate 属性
- 利用 input 元素的 formnovalidate 属性让表单验证对单个input 元素失效.
- 利用 submit 元素的 formnovalidate 属性,单击该按钮时,相当于利用form 元素的 navalidate 属性,整个表单验证都失效.
示例如下:
创建一个用户登录表单，利用form元素的novalidate属性关闭整个表单验证。
<form action="" id="frmTmp" novalidate>
<fieldset>
<legend>用户登录</legend>
<p>姓名:
<input type="text" name="UserName" id="UserName" class="inputtxt" pattern="^[a-zA-A]\w{3,5} $" required>
</p>
<p>密码:
<input type="password" name="PassWord" id="PassWord" pattern="^[a-zA-Z]\我{3,5}$" required>
</p>
<p class="p_center">
<input type="submit" name="Submit" class="inputbtn" value="登录">
<input type="reset" name="Reset" class="inputbtn" value="取消">
</p>
</fieldset>
</form>
5.4.4 自定义错误属性
使用自定义的错误信息提示;或者给文本框增加一种错误信息提示.
示例如下:
<form action="" id="testform">
密码: <input type="password" name="pass1" id="pass1"><br>
确认密码: <input type="password" name="pass2" id="pass2"><br>
E-mail: <input type="email" name="email1" id="email"><br>
<div>
<input type="submit" onclick="return check()">
</div>
</form>
<script>
function check() {
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
if (pass1.value != pass2.value) {
pass2.setCustomValidity("密码不一致");
}
else
pass2.setCustomValidity("");
var email = document.getElementById("email")
if (!email.checkVisibility()) {
email.setCustomValidity("请输入正确的 E-mail 地址.");
}
}
</script>
浙公网安备 33010602011771号