表單标簽
常用手冊網站
案例代碼
前端學習筆記二---表單标簽常用手冊網站案例代碼 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>綜合案例</title>
</head>
<body>
<!-- 寫頁面先分析頁面結構架構，如使用的标題元素，表格元素，表格内的骨架 -->
<h1>龍之領首頁面</h1>
<!-- 用table而不用form的原因是什麼呢？，form是一個表單，而這個格式的排版是表格類型的 -->
<table width="500">
<!-- 表格第一行 -->
<tr>
<!-- tr按行分成表格元素，td按列拆分表格 -->
<td>性别</td>
<td>
<!-- 為了保證單選的效果，需要用name屬性來限定這一個類 -->
<!-- 增強使用者點選的體驗，使用label标簽來擴大點選的範圍，将label裡的點選傳入到for裡的id -->
<input type="radio" name="sex" id="nan"> <label for="nan"><img src="images/man.jpg">男</label>
<input type="radio"name="sex" id="nv"> <label for="nv"><img src="images/women.jpg">女</label>
</td>
</tr>
<!-- 表格第二行 -->
<tr>
<!-- <th> 元素中的文本通常呈現為粗體并且居中。 -->
<td>左對齊</td>
<th>加粗居中</th>
</tr>
<!-- 表格第三行 -->
<tr>
<!-- <td> 元素中的文本通常是普通的左對齊文本。 -->
<td>生日</td>
<td>
<!-- 如何處理生日的選擇邏輯？ -->
<select>
<option selected="selected">--請選擇年--</option>
<option>1994</option>
<option>1996</option>
<option>1998</option>
<option>2000</option>
</select>
<select>
<option selected="selected">--請選擇月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select>
<option selected="selected">--請選擇日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 表格第四行 -->
<tr>
<td>位址資訊</td>
<!-- 用了value之後不能直接自己選中，如何操作呢？ -->
<td><input type="text" value="請輸入位址資訊"></td>
</tr>
<!-- 表格第五行 -->
<tr>
<td>喜歡的類型</td>
<td>
<!-- checkbox複選框 -->
<input type="checkbox" id="i1" name="profession"> <label for="i1">雙手劍士</label>
<input type="checkbox" id="i2" name="profession"> <label for="i2">劍盾</label>
<input type="checkbox" id="i3" name="profession"> <label for="i3">全能法師</label>
<input type="checkbox" id="i4" name="profession"> <label for="i4">鉗工</label>
</td>
</tr>
<!-- 表格第六行 -->
<tr>
<td></td>
<td>
<input type="submit" value="注冊成為龍裔">
</td>
</tr>
<!-- 表格第7行 -->
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked">我同意注冊條款和加入帝國
</td>
</tr>
<!-- 表格第8行 -->
<tr>
<td></td>
<td>
<a href="https://www.bilibili.com/">我是梭莫立即登入</a>
</td>
</tr>
<!-- 表格第9行 -->
<tr>
<td></td>
<td>
<h5>我承諾：</h5>
<!-- ul無序清單，li是配套的元素 -->
<ul>
<li>諾德人血統</li>
<li>侍奉女王</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)