这我也是刚学没多久,这表单是老师发布的作业,哈哈哈,好东西要分享嘛~~~希望能有帮助!
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8">
<title>支付表单</title>
<style type="text/css">
form{
margin:50 auto;
width: 400px;
padding: 1em;
border: 1px solid #000000;
border-radius: 1em;
}
form div + div{
margin-top: 1em;
}
label{
display: inline-block;
width: 130px;
text-align: right;
}
input, textarea{
font: 1em sans-serif;
border: 1px solid #999;
}
input{
width: 260px;
}
.input{
width: 10px;
}
input: focus,textarea: focus{
border-color: #000;
}
textarea{
vertical-align: top;
height: 4em;
}
.button{
padding-left: .5em;
padding-right: .5em;
margin-left:100px;
margin-top:5px
}
fieldset{
margin-left: 120px;
}
</style>
</head>
<body>
<form>
<h1>支付表单</h1>
<h4>必填字段 *.</h4>
<section>
<h2>联系人信息</h2>
<fieldset >
<legend>标题</legend>
<dl>
<dt>
<input type="radio" class="input" name="sex" value="先生" checked="checked"/>先生
</dt>
<dt>
<input type="radio" class="input" name="sex" value="女士"/>女士
</dt>
</dl>
</fieldset>
<dl>
<dt style="height: 40px">
<label for="name">姓名:*</label>
<input type="text" id="name" name="name"/>
</dt>
<dt style="height: 40px">
<label for="mail">E-mail:*</label>
<input type="text" id="mail" name="name"/>
</dt>
<dt style="height: 40px">
<label for="password">密码:*</label>
<input type="text" id="password" name="name"/>
</dt>
</dl>
</section>
<section>
<h2>支付信息</h2>
<dl>
<dt style="height: 40px">
<label for="visa">卡类型:</label>
<select name="Visa" id="visa">
<option value="" selected="selected">Visa</option>
<option value="1">建设银行</option>
<option value="2">储蓄银行</option>
<option value="3">工商银行</option>
<option value="4">农业银行</option>
</select>
</dt>
<dt style="height: 40px">
<label for="card-number">卡号:*</label>
<input type="text" id="card-number" />
</dt>
<dt style="height: 40px">
<label for="card-deadline">卡有效日期:*</label>
<input type="text" id="card-deadline" />
</dt>
<dt style="height: 40px">
<em>输入格式 月/年</em>
</dt>
<dt>
<button class="button" type="submit" formaction="http//www.baidu.com" formmethod="post">确认支付</button>
</dt>
</dl>
</section>
</form>
</body>
</html>
我相信,如上代码是可以简化的,嗨哟一些不妥的地方,自己也可以修改下哈