`
xufei0110
  • 浏览: 109285 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

html5 初探2 表单

 
阅读更多

一个简单的表单

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test regist</title>
<link href="../css/add.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class='content'>
	    <header><h1>个人信息录入</h1></header>
		<form action="">
			<fieldset>
				<legend>基本信息</legend>
				<ol>
					<li><label for='name'>姓名:</label><input id='name' type="text" placeholder="name" required autofocus></li>
					<li><label for='age'>年龄:</label><input id='age' type="number" placeholder="age" required>	</li>	
					<li>
					   <ol>
						   <li>
						   		<label for='sex-1'>男</label><input name='sex' id='sex-1' type="radio">	
						   </li>
						   <li>
						   		<label for='sex-2'>女</label><input name='sex' id='sex-2' type="radio">	
						   </li>
					   </ol>
						
						
					</li>
				</ol>
			</fieldset>
			<fieldset>
				<legend>地址</legend>
				<ol>
					<li><label for='country'>国家:</label>
						<select>	
							<option value='1'>中国</option>
							<option value='2'>日本</option>
						</select>
					</li>
					<li><label for='city'>城市:</label><input id='city' type="text" placeholder="city" required>	</li>	
				</ol>
				
			</fieldset>
			<fieldset>
				<button type=submit>注册</button>
			</fieldset>
		</form>
		
		<footer>by xufei 2013/04</footer>
	</div>
	
</body>
</html>

 

 

css样式，里面有些 css3的东西

@CHARSET "UTF-8";

body {
	background: #ffffff;
	color: #111111;
}
header {
	text-align: center;
}
footer {
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
}
select {
	height:25px;
	width:156px;
}

input {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px; /* 圆角 */
	border-radius: 3px;
	height:20px;
	box-shadow: 0 0 3px #aaa; /* 阴影 */
}

.content {
	width : 800px;
	height: 100%;
	border: 1px solid;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

form {
	background: #9cbc2c;
	border-radius: 5px;
	padding: 20px;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
/* 表单分组  */
form fieldset {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 10px;
}
/* 表单分组 最后一个  */
form fieldset:last-of-type {
	margin-bottom: 0;
	border:none;
	text-align:center;		
}
/* 表单分组 的标题  他的位置根据fieldset的 text-align:center决定*/
form legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	text-shadow: 0 1px 1px #c0d576;
}

form label {
	float: left;
	width: 110px;
}
form fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
}
form fieldset label:hover {
	cursor: pointer;
}

form ol li {
	background: #b9cf6a;
	background: rgba(255,255,255,.3);
	border-color: #e3ebc3;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	float: left;

}

form ol ol {
	padding-left: 5px
}
form ol ol li {
	background: none;
	border: none;
	float: left;
}

form ol ol li label{
	background:none no-repeat left 50%;
	line-height: 20px;
	
	width: auto;
}

/* 提交按钮 */
form button {
	width:100px;
	height:30px;
	font-weight: bold;
    color: #2D2D2D;
    font-size: 14px;
    text-shadow: 0px 1px 1px #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(160,160,160);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(253,253,253)), to(rgb(190,190,190))); /* 渐变 在webkit核心浏览器下(Safari4+, Chrome) */
    background: -moz-linear-gradient(top, rgb(253,253,253), rgb(190,190,190)); /*  */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FDFDFD,endColorstr=#BEBEBE); /* IE */
    cursor: pointer;
    text-decoration: none;
}
/* 鼠标放到按钮上时，按钮的样式 */
form button:hover {
	 background: rgb(190,190,190 );
	 text-decoration: none;
     color: #000;
}

 

 

以上代码只在 google的Chrome下测试过

 

整个页面看起来跟用VB做出的效果很像

 

 说明：

    1，fieldset 元素可将表单内的相关元素分组。跟VB的一样，很好用的标签

    2，渐进效果让按钮看起来更立体，就像有个图片背景似的

    3，button:hover；鼠标放到按钮上时，改变按钮的样式

    4，html5的表单input还自带一些页面验证的功能，例如：type是number时自动验证是不是数字，还有一个必须输入的属性required

 

关于验证的部分，下次一个一个实验

 

分享到：
| html5 初探1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics