HTML入門-Day5：表格與表單

2024/09/17閱讀時間約 1 分鐘

表格

HTML 的表格標籤主要用於顯示結構化的數據，如報表、日程表等。表格由行（<tr>）和單元格（<td>）組成，並可以添加表頭（<th>）來增強可讀性。以下是常用表格標籤及其用途：

<table> (表格標籤)
- 定義一個表格的起始和結束。
<tr> (表格行標籤)
- 用於定義表格中的一行。
<td> (表格單元格標籤)
- 用於定義表格中的數據單元格，通常包含表格內容。
<th> (表格表頭標籤)
- 定義表格中的表頭單元格，通常用於行首或列首，並自帶加粗和居中的樣式。
<thead> (表頭區域標籤)
- 用於封裝表格的表頭部分，通常包含 <th> 標籤。
<tbody> (表體區域標籤)
- 定義表格的主體內容，通常包含多個 <tr> 行。
<tfoot> (表尾區域標籤)
- 用於封裝表格的底部信息，如匯總數據或說明文字。

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年齡</th>
            <th>職業</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>張三</td>
            <td>30</td>
            <td>工程師</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>設計師</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">這是表格的尾部</td>
        </tr>
    </tfoot>
</table>

表單

表單是網頁與用戶交互的重要部分，用於收集用戶輸入的數據，並提交到伺服器進行處理。以下是一些主要的表單標籤及其用途：

<form> (表單標籤)
- 表單的容器標籤，用於定義整個表單範圍，包含屬性如action（指定表單數據提交的URL）和method（提交方法，如GET或POST）。
<input> (輸入標籤)
- 用於創建輸入框，支持多種輸入類型如文本（type="text"）、密碼（type="password"）、按鈕（type="button"）、勾選框（type="checkbox"）等。
<button> (按鈕標籤)
- 定義可點擊的按鈕，支持提交表單或觸發JavaScript事件。
<textarea> (多行文本框標籤)
- 用於輸入多行文本，如留言或評論區域。
<select> 和 <option> (下拉選單標籤)
- <select> 定義一個下拉選單，而 <option> 定義選單中的各個選項。
<label> (標籤標籤)
- 用於描述表單控件，增強可用性和可訪問性，尤其是對於屏幕閱讀器。
<fieldset> 和 <legend> (字段集標籤和說明標籤)
- <fieldset> 用於將相關的表單元素分組，<legend> 為這些元素提供描述。

<form action="/submit-form" method="post">
    <fieldset>
        <legend>個人信息</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br>
        <label for="age">年齡：</label>
        <input type="number" id="age" name="age"><br>
        <label for="job">職業：</label>
        <select id="job" name="job">
            <option value="engineer">工程師</option>
            <option value="designer">設計師</option>
        </select><br>
        <input type="submit" value="提交">
    </fieldset>
</form>