介绍表单
●表单是网页上用来收集用户信息的区域,由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成。
●标签用于创建一一个表单,其基本语法如下所示:
在.上面的语法中,name属性用来区分一个网页中的多个表单;action属性用于指定接收并处理表单数据的服务器url地址;method属性用于设置表单数据的提交方式,其取值可以为get或post,默认为get。.
新增的表单属性
(1) autocomplete属 性
autocomplete属性用于指定表单是否有自动完成功能,所谓“自动完成”是指将表单控件输入的内容记录下来,当再次输入时,会将输入的历史记录显示在-一个下拉列表里,以实现自动完成输入。
(2) novalidate,属性
novalidate,属性用于指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时,可以关闭整个表单的验证,这样可以使form内的所有表单控件不被验证。
< input>标签
●表单中最为核心的就是标签,使用标签可以在表单中定义文本输入框、单选按钮、复选框、重置按钮等,其基本语法格式如下:
在上面语法中,type属 性为其最基本的属性,取值有多种,用来指定不同的控件类型,除type属性外, 还可以定义很多其他属性,常用属性如name、value、 size等,form表单的应用:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<form>
<div class="border-radius"></div>
<input type="text" name="name" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" name="submit" value="登录" class="btn">
</form>
</body>
</html>
login.css
body{
background: url('../images/1.png') no-repeat center center fixed;/*设置背景图片*/
background-size: cover;
padding: 20px;
}
form{
width: 343px;
height: 500px;
margin :0 auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px;
background-color: rgba(0,0,0,0.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,0.5);
overflow: hidden;
}
.border-radius{
width: 200px;
height: 200px;
border-radius: 200px;
background: url('../images/2.jpg')no-repeat center center;
margin: 40px auto;
border:5px solid rgba(255,255,255,0.4);
}
input{
width: 276px;
height: 48px;
border: 1px solid rgba(255,255,255,0.4);
border-radius: 4px;
font-family: 'Source sans pro',sans-serif;
display: block;
font-size: 18px;
color: #fff;
padding-left: 45px;
padding-right: 20px;
margin-bottom: 20px;
background: rgba(255,255,255,0.4)no-repeat 16px 16px;
}
/*伪类选择器*/
input[type=submit]{
cursor: pointer; /*当点击input[type=submit]时,鼠标变成小手样式*/
}
::-webkit-input-placeholder{
color: #fff;/*设置input 提示里的文字颜色*/
}
.btn{
width: 138px;
height: 44px;
border-radius: 4px;
margin: 0 auto;
background: #00b0dc;
padding: 10.5px 21px;
color: #e1e1e1;
}
/*设置按钮btn 点击时的样式*/
.btn:hover{
border:1px solid #253737;
box-shadow: 0 1px 0 #333333;
background: #00b0dc;
color: #fff;
}
/*当鼠标获得焦点时的样式*/
input:focus{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);
overflow: hidden;
}
其他表单标签
- 标签用于定义多行文本输入框,可以通过cols和rows属性来规定文本区域内可见的列数和行数,具体的尺寸可以通过
width和heiaht来设置
< textarea> 标签的常用属性如下表所示:
●< label>标签
一标签用于为标签定义标注(标记) ,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
== < label> 标签的for 属性值应当与相关标签的id属性相同。 ==
●< select>标签
标签可创建单选或多选菜单,其语法格式具体如下:
< datalist>标签
一 标签用于定义输入域的选项列表,即与标签配合定义标签可能的值。
一列表通过标签内的标签创建,可以使用标签的list属性弓|用标签的id属性,具体用法如
下。
效果如下:
< keygen>标签
- 标签是密钥对生成器( key-pair generator )。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(privatekey)存储于客户端,公钥( public key )则被发送到服务器。公钥可用于之后验证用户的客户端证书( client certificate) 。具体用法如下:
< output>标签
●< output>标签用于定义不同类型的输出,如脚本输出的示例代码如下:
onforminput属性的值对应脚本的方法名。
表单验证
表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,让Web应用更快的抛出错误,大大的优化了户体验。
表单验证是一套系统,它为终端用户检测无效的数据并标记这些错误,让Web应用更快的抛出错误,大大的优化了用户体验。
HTML5自带表单验证功能有两种:
- ①通过required属 性校验输入框填写内容不能为空,如果为空将弹出提示框,并阻止表单提交。
- ②通过pattern属性规定用于验证input域的模式(pattern), 它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表单提交。那些type为email或urI的输入控件内置相关正则表达式,如果value的值不符合其正则表达式,那表单将通不过验证,无法提交。
例:用户注册页面:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="css/register.css"/>
</head>
<body>
<div>
<img class="tree"src="images/tree.jpg" alt="">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li class="usually">
<h2>用户注册</h2>
</li>
<li class="usually">
<span>昵称:</span>
<input type="text" id="name" name="name" required>
</li>
<li class="usually">
<span>密码:</span>
<input type="password" name="password" required>
</li>
<li class="special">
<span>性别:</span>
<input type="radio" name="sex" id="male" checked>
<label for="male">男</label>
<input type="radio" name="sex" id="female" checked>
<label for="female">女</label>
</li>
<li class="usually">
<span>年龄:</span>
<input type="text" id="age" name="age" required>
</li>
<li class="special">
<span>兴趣爱好:</span>
<input type="checkbox" name="interesting" id="football" >
<label for="football"> 足球</label>
<input type="checkbox" name="interesting" id="basketball" >
<label for="basketball">篮球</label>
<input type="checkbox" name="interesting" id="swim" >
<label for="swim"> 游泳</label>
<input type="checkbox" name="interesting" id="run" >
<label for="run"> 跑步</label>
<input type="checkbox" name="interesting" id="yoga" >
<label for="yoga"> 瑜伽</label>
</li>
<li class="usually">
<span>自我介绍:</span>
<textarea rows="10" cols="200" name="introduction" placeholder="Please enter your message" class="message" required>
</textarea>
</li>
<li>
<button class="submit" type="submit" >立即注册</button>
</li>
</ul>
</form>
</div>
</body>
</html>
register.css代码:
/*清除获取焦点的外边框*/
*:focus{
outline: none;
}
.contact_form{
width: 70%;
position: absolute;
top: 20%;
left: 35%;
}
.tree{
position: relative;
top: 420px;
left: 260px;
}
.contact_form h2,.contact_form span{
font-family: Georgia,"Times New Roman",Times,serif;
}
.contact_form ul{
width: 750px;
list-style: none;
margin: 0;
padding: 0;
}
.contact_form li{
padding:12px;
border-bottom: 1px solid #eee;
position: relative;
}
.contact_form li:first-child,
.contact_form li:last-child{
border-bottom: 1px solid #777;
}
.contact_form h2{
margin: 0;
}
.contact_form span{
width: 150px;
margin-top: 3px;
display: inline-block;
padding: 3px;
}
.usually input{
height: 20px;
width: 200px;
padding: 5px 8px;
}
.usually textarea{
padding: 8px;
width: 300px;
}
.contact_form button{
margin-left: 156px;
}
.special input{
height: 15px;
width: 40px
padding:5px 8px;
}
/*设置输入框 末尾的 提示图片*/
.usually input,
.usually textarea{
background:url('../images/attention.png')no-repeat 98% center;
border: 1px solid #aaa;
box-shadow: 0 0 3px #ccc,0 10px 15px #eee inset;
border-radius: 2px;
transition: padding 0.25s;
}
/*获取焦点之后的外观 撑开*/
.usually input:focus,
.usually textarea:focus{
background-color: #fff;
border: 1px solid #555;
box-shadow: 0 0 3px #aaa;
padding-right: 70px;
}
/*底部的提交按钮 设置外观*/
button.submit{
background-color: #68b12f;
background-image: linear-gradient(top,#68b12f,#50911e);
border: 1px solid #509111;
border-bottom: 1px solid #509111;
border-radius: 3px;
box-shadow: 0 1px 0 0 #9fd574 inset;
color: white;
font-weight: blod;
padding: 6px 20px;
text-align: center;
text-shadow: 0 -1 px 0 #396715;
}
button.submit:hover{
opacity: 0.85;
cursor: pointer;
}
button.submit:active{
border:1px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
}
/*表单元素 验证失败 验证成功的 演示*/
/*invalid验证失败*/
.usually input:focus:invalid,
.usually textarea:focus:invalid{
background:#fff url('../images/warn.png')no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535;
}
/*valid验证失败*/
.usually input:focus:valid,
.usually textarea:focus:valid{
background:#fff url('../images/right.png')no-repeat 98% center;
box-shadow: 0 0 5px #5cb053;
border-color: #28921f;
}