<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单综合练习</title>
<style type="text/css">
form{ 400px;background: #f7f7f7;padding: 10px;margin-top: 150px;margin-left: 300px;}
button{background: #808080;padding: 8px;border-radius:5px;}
button:hover{background: #919191;padding: 10px;border-radius:5px;}
input{padding: 8px;background: #f8f8f8;}
input:focus{padding: 8px;background: #a9a9a9;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>信息注册</legend>
<p><label for="user">账号：</label><input type="text" name="user" id="user" placeholder="账号" required=""></p>
<p><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="密码"></input></p>
<p><label for="tel">电话：</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
<p><label for="email">邮件：</label><input type="email" name="email" id="email" placeholder="电子邮箱"></p>
<!-- <p><label for=""></label>这样单击后自动获得焦点</p> -->
<!-- <input type="submit" value="注册"></input> -->
<button>注册用户</button>
</fieldset>
</form>
</body>
</html>
html5，表单的综合案例
天道酬勤，厚积薄发。
君子之行，静以修身，俭以养德。
非淡泊无以明志，非宁静无以致远。
如有恒，何须三更起，半夜眠；最怕莫，三天打鱼两天晒网，竹篮打水一场空。