<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
<style>
div{
width: 300px;
height: 510px;
border: 1px solid #a8c6ea;
margin: 20px auto;
line-height: 35px;
padding: 20px 20px;
}
label:first-child {
font-weight: bolder;
font-size: 16px;
}
</style>
</head>
<body>
<div>
<form action="#">
<label>用户注册</label><br>
账号: <input name="user" type="text" placeholder="不超过八个字母"><br>
密码: <input name="pasWd" type="password" placeholder="6-16个字符"><br>
邮箱: <input name="e-mail" type="email" placeholder="example@mail.com"><br>
年龄: <input name="eg" type="text" style="width: 30px"><br>
生日: <input name="year" type="date"><br>
课程: <select>
<option value="1">HTML5</option>
<option value="2">CSS</option>
<option value="2">JavaScript</option>
<option value="2">PHP</option>
</select><br>
爱好:
<label><input name="aiHao" type="checkbox" value="">打游戏</label>
<label><input name="aiHao" type="checkbox" value="">看电影</label>
<label><input name="aiHao" type="checkbox" value="">撸代码</label><br>
性别:
<label><input name="sex" type="radio">男</label>
<label><input name="sex" type="radio">女</label>
<label><input name="sex" type="radio">保密</label><br>
简介: <textarea name="" id="" cols="30" rows="10"></textarea><br>
<input type="submit" name="tiJiao" value="提交">
<input type="button" name="ajax" value="Ajax">
</form>
</div>
</body>
</html>
效果图如下