html5 javascript 表单练习案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单练习</title>
<style type="text/css">
form{ width: 400px; background: #9370d8;padding: 10px;margin-left: 500px;margin-top: 150px;}
button{background: #808080;padding: 8px;border-radius: 5px;}
button.hover{background: #2F4F4F;padding: 10px;border-radius: 5px;}
input{padding: 8px;background: #f8f8f8;}
input:focus{background: #FFC0CB;}
</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="密码"></p>
<p><label for="tel">电话号码</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
<p><label for="email">电子邮件</label><input type="email" id="email" placeholder="电子邮箱"></p>
<!-- <p><input type="submit" value="注册"></p> -->
<button>注册用户</button>
</fieldset>
</form>
</body>
</html>
