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
?
关于验证的部分，下次一个一个实验
?