h5学习笔记——四、表单的应用

介绍表单

●表单是网页上用来收集用户信息的区域,由文本域、复选框、单选框、菜单、文件地址域、按钮等表单元素组成。

●标签用于创建一一个表单,其基本语法如下所示:

在.上面的语法中，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>

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>

/*清除获取焦点的外边框*/
*：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;
}

h5学习笔记——四、表单的应用

介绍表单

新增的表单属性

< input>标签

其他表单标签

●< label>标签

●< select>标签

< datalist>标签

< keygen>标签

< output>标签

表单验证

推薦最舒適配色方案

[Windows下搭建WordPress測試環境]

建站模板推薦

h5學習筆記——四、表單的應用

html5學習筆記 —— 二、文本類網頁設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結