《網頁設計基礎——表格與表單》
網頁設計基礎——表格與表單
一、表格的基礎框架；
規則：
- table：表示整個表格。
- caption：定義表格的標題
- tr：表示表格的一行。
- td：表示行中的一個列,需要嵌套在
<tr>標簽內。 - th：表示表頭單元格. 會居中加粗。
格式：
<table border="x"> <!-- 邊框寬度為x -->
<caption>標題</caption>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
</table>
例如：
<html>
<head>
<title>表格</title>
</head>
<body>
<table border="3"> <!-- 邊框寬度為3 -->
<caption>課程表</caption>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<th>第一節</th>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>物理</td>
<td>化學</td>
</tr>
<tr>
<th>第二節</th>
<td>生物</td>
<td>語文</td>
<td>數學</td>
<td>英語</td>
<td>物理</td>
</tr>
</table>
</body>
</html>
網頁效果：
二、表格的常用樣式；
1.表格邊框的合并與分離
border-collapse: collapse; /* 邊框合并 */
border-collapse: separate; /* 邊框分離 */
2.表格邊框的間距大小
border-collapse: separate; /* 邊框分離 */
border-spacing: 5px 10px /* 橫向 縱向*/
3.表格標題的位置
caption-side: top; /* 把標題放在表格上面。*/
caption-side: bottom; /* 把標題放在表格下面。*/
4.表頭的標識
<tr>
<th scope="col">星期一</th> <!-- 把<th>標識為列的表頭-->
<th scope="col">星期二</th> <!-- 把<th>標識為列的表頭-->
</tr>
<tr>
<th scope="row">第一節</th> <!-- 把<th>標識為行的表頭-->
<td>語文</td>
</tr>
三、表單的基礎框架；
規則：
<form>：定義供用戶輸入的表單標簽。<input>：輸入標簽。action屬性：規定當提交表單時，向何處發送表單數據——用于動態網頁，了解即可。method屬性：規定發送表單數據的方式 【URL 變量（method="get"）或者 HTTP post （method="post"）】——用于動態網頁，了解即可。type屬性：定義輸入類型，如文本域text、密碼字段password、提交按鈕submit。name屬性：定義表單的名稱，用于在表單提交之后引用表單數據，或者在 JavaScript 中引用元素——用于動態網頁，了解即可。placeholder屬性：定義輸入框中的提示信息。
格式：
<form>
<input type="~~~" name="~~~" placeholder="~~~">
</form>
例如：
<html>
<head>
<title>表單</title>
</head>
<body>
<form>
賬號：<input type="text" name="user_acount" placeholder="請輸入學號"><br>
密碼：<input type="password" name="user_password"><br> <!-- 默認隱藏輸入的內容 -->
<input type="submit" value="提交"> <!-- 此處的value用于定義按鈕上的文字 -->
</form>
</body>
</html>
網頁效果：
四、表單的常用樣式；
例一：文本域（Text Fields）
<html>
<head>
<title>文本域</title>
</head>
<body>
<form>
姓名：<input type="text" name="user_name"><br>
學號：<input type="text" name="user_id">
</form>
</body>
</html>
網頁效果：
例二：密碼字段（Password）
<html>
<head>
<title>密碼字段</title>
</head>
<body>
<form>
賬號：<input type="text" name="user_accound"><br>
密碼：<input type="password" name="user_password"> <!-- 默認隱藏輸入的內容 -->
</form>
</body>
</html>
網頁效果：
例三：單選按鈕（Radio Buttons）
<html>
<head>
<title>表單</title>
</head>
<body>
<form>
<input type="radio" name="user_sex" value="Man">男<br> <!-- 選擇此項后提交的值即為value的值 -->
<input type="radio" name="user_sex" value="Woman">女
</form>
</body>
</html>
網頁效果：
例四：復選框（Checkboxes）
<html>
<head>
<title>表單</title>
</head>
<body>
<form>
<input type="checkbox" name="user_career" value="Programmer">我是程序員<br> <!-- 選擇此項后提交的值即為value的值 -->
<input type="checkbox" name="user_career" value="Superhero">我是超級英雄
</form>
</body>
</html>
網頁效果：
例五：下拉選擇框（option）
<html>
<head>
<title>表單——下拉選擇框</title>
</head>
<body>
<form>
你喜歡的水果是：
<select>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="葡萄">葡萄</option>
</select>
</form>
</body>
</html>
網頁效果：
例六：提交按鈕（Submit）
<html>
<head>
<title>表單</title>
</head>
<body>
<form>
<input type="text" name="user_name" placeholder="請輸入姓名"><br> <!-- 與例一的區別就是通過 placeholder 設置了提示信息 -->
<input type="text" name="user_id" placeholder="請輸入學號"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
網頁效果：
浙公網安備 33010602011771號