效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是form表單應用</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.middle{
width: 100%;
height: 1024px;
}
.w{
width: 600px;
/*height: 1000px;*/
margin: 0 auto;
margin-top: 10px;
text-align: center;
}
.red{
color: red;
}
</style>
</head>
<body>
<div class="middle">
<div class="w">
<img src="img/qq.jpg" alt="">
<br><br>
<form action="http://www.baidu.com" method="post">
賬號：<input type="text"><span class="red"> 賬號輸入不能超過10個字符</span><br><br>
密碼：<input type="password"><span class="red"> 密碼必須填寫 </span><br><br>
性別： <input type="radio"name="sex" >男 <input type="radio" name="sex">女 <span class="red">性別單選按鈕</span> <br><br>
出生日期： <select name="cars" id="">
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
</select> 年
<select name="cars2" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 月
<select name="cars3" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> 日 <span class="red">默認1995年</span>
<br><br>
興趣愛好：
<input type="checkbox">編程
<input type="checkbox">跳舞
<input type="checkbox">跑步
<input type="checkbox">圍棋
<input type="checkbox">旅遊
<br><br>
<input type="checkbox">玩遊戲
<input type="checkbox">閱讀
<input type="checkbox">跆拳道
<input type="checkbox">演講
<br><br>
個人介紹：
<textarea name="" id="" cols="60" rows="5"></textarea>
<br>
<input type="image" src="img/submit.jpg">
<!--input
input表單新學知識：type="image" src="img/..."是以圖片提交爲按鈕來提交
type="reset"擦掉重寫
-->
<input type="reset" value="擦掉重寫">
</form>
</div>
</div>
</body>
</html>值得注意的地方：想給提交按鈕加圖片<input type="image" src="img/subimit.jpg">
想讓寫過的一鍵清空<input type="reset" value="擦掉重寫"