一个简单的表单
?
<!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 