實現的html代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表單樣例</title> </head> <body> <h1>青春不常在,抓緊談戀愛</h1> <!-- 沒想到用表格來寫表單 --> <table border="0" width="500" cellspacing="0" cellpadding="0"> <!-- 第一行 --> <tr> <td>性別:</td> <!-- 要想點擊圖片也能進行選擇,lable標籤將img 包含 進來即可實現 --> <td><input type="radio" name="sex" id="man"><label for="man"><img src="images/man.jpg"> 男</label> <input type="radio" name="sex" id="woman"><label for="woman"><img src="images/woman.jpg"> 女</label></td> </tr> <!-- 第二行 --> <tr> <td> 生日: </td> <td> <select> <option>--請選擇年份--</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> <select> <option>--請選擇月份--</option> <option>01</option> <option>02</option> <option>03</option> </select> <select> <option>--請選擇日--</option> <option>1號</option> <option>2號</option> <option>3號</option> </select> </td> </tr> <!-- 第三行 --> <tr> <td>所在地區</td> <td> <!-- value屬性 默認顯示文字 --> <input type="text" value="北京思密達"> </td> </tr> <!-- 第四行 --> <tr> <td>婚姻狀況:</td> <td> <input type="radio" name="marry" checked="checked"> 未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry"> 離婚 </td> </tr> <!-- 第五行 --> <tr> <td>學歷</td> <td><input type="text " name="xueli " value="幼兒園 "></td> </tr> <!-- 第六 行 --> <tr> <td>喜歡的類型</td> <td> <input type="checkbox" name="like">嫵媚的 <input type="checkbox" name="like" checked="checked">可愛的 <input type="checkbox" name="like">小鮮肉 <input type="checkbox" name="like">老臘肉 <input type="checkbox" name="like">都喜歡 </td> </tr> <!-- 第七行 --> <tr> <td>自我介紹</td> <td> <textarea>個人簡介</textarea> </td> </tr> <!-- 第八行 --> <tr> <td></td> <td> <input type="submit" value="免費註冊"> </td> </tr> <!-- 第九行 --> <tr> <td></td> <td> <input type="checkbox" checked="checked ">我同意註冊條款和會員加入標準 </td> </tr> <!-- 第十行 --> <tr> <td></td> <td> <!-- 超級鏈接爲空時,可以使用# 代替 --> <a href="# ">我是會員,立即登錄 </a> </td> </tr> <!-- 第十一行 --> <tr> <td></td> <td> <h2>我承諾</h2> <ul> <li>年滿18歲、單身 </li> <li>抱着嚴肅的態度</li> <li>真誠尋找 另一伴</li> </ul> </td> </tr> </table> </body> </html>