2025-09-04 HTML3——區塊布局與表單

文章目錄

1 塊元素與行內元素
- 1.1 塊元素 (Block-level Element)
- 1.2 行內元素 (Inline Element)
2 HTML 布局
- 2.1 使用 `<div>` 元素
- 2.2 使用 `<table>` 元素
3 表單 (`<form>`)
- 3.1 輸入域（`<input>`）
- - 3.1.1 文本域（Text Fields）
  - 3.1.2 密碼（password）
  - 3.1.3 單選按鈕（Radio Buttons）
  - 3.1.4 復選框（Checkboxes）
  - 3.1.5 提交按鈕（Submit）
- 3.2 文本域（`<textarea>`）
- 3.3 標簽（`<label>`）
- 3.4 分組輸入域（`<fieldset>`）
- 3.5 下拉列表（`<select>`）
- 3.6 示例

1 塊元素與行內元素

大多數 HTML 元素被定義為塊元素或行內元素（內聯元素）。

1.1 塊元素 (Block-level Element)

塊元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

特性：
1. 獨占一行：無論其內容多少，塊元素總是會從新的一行開始，并占據其父容器的全部可用寬度。
2. 可以設置寬高：你可以為塊元素設置 width（寬度）和 height（高度）。
3. 可以包含其他元素：塊元素通常作為其他元素的容器，可以包含行內元素和其它的塊元素。
常見示例：
- 標題：<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- 段落：<p>
- 列表：<ul>, <ol>, <li>
- 表格：<table>
- 分隔塊：<div>

<div> 元素是最常用的塊元素，它沒有任何特定的語義，常用于組織和布局網頁內容。

<p>這是一些文本。</p><div style="color:#0000FF"><h3>這是一個在 div 元素中的標題。</h3><p>這是一個在 div 元素中的文本。</p>
</div><p>這是一些文本。</p>

1.2 行內元素 (Inline Element)

內聯元素在顯示時通常不會以新行開始。

特性：
1. 不獨占一行：多個行內元素可以并排顯示在同一行上。
2. 寬高無效：width 和 height 屬性對行內元素不起作用。其寬度和高度由其內容決定。
3. 不能包含塊元素：行內元素通常只能包含文本或其它的行內元素。
常見示例：
- 超鏈接：<a>
- 圖像：<img>
- 文本格式化：<b>, <i>, <strong>, <em>
- 跨度：<span>（<span> 是最常用的行內元素，與 <div> 類似，它也沒有特定的語義，常用于對行內的一小部分文本進行樣式修改。）

<span> 元素是最常用的行內元素，與 <div> 類似，它也沒有特定的語義，常用于對行內的一小部分文本進行樣式修改。

<p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，我的父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p>

2 HTML 布局

大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。

可以使用 <div> 或者 <table> 元素來創建多列。

2.1 使用 `<div>` 元素

<div> 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 <div> 元素來創建多列布局：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鳥教程(runoob.com)</title></head><body><div id="container" style="width: 500px"><div id="header" style="background-color: #ffa500"><h1 style="margin-bottom: 0">主要的網頁標題</h1></div><divid="menu"style="background-color: #ffd700;height: 200px;width: 100px;float: left;"><b>菜單</b><br />HTML<br />CSS<br />JavaScript</div><divid="content"style="background-color: #eeeeee;height: 200px;width: 400px;float: left;">內容在這里</div><divid="footer"style="background-color: #ffa500; clear: both; text-align: center">版權 ? runoob.com</div></div></body>
</html>

2.2 使用 `<table>` 元素

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鳥教程(runoob.com)</title></head><body><table width="500" border="0"><tr><td colspan="2" style="background-color: #ffa500"><h1>主要的網頁標題</h1></td></tr><tr><td style="background-color: #ffd700; width: 100px"><b>菜單</b><br />HTML<br />CSS<br />JavaScript</td><td style="background-color: #eeeeee; height: 200px; width: 400px">內容在這里</td></tr><tr><td colspan="2" style="background-color: #ffa500; text-align: center">版權 ? runoob.com</td></tr></table></body>
</html>

3 表單 (`<form>`)

HTML 表單表示文檔中的一個區域，此區域包含交互控件，將用戶收集到的信息發送到 Web 服務器。

HTML 表單通常包含各種輸入字段、復選框、單選按鈕、下拉列表等元素。

我們可以使用 <form> 標簽來創建表單:

<form>. input 元素 .</form>

多數情況下被用到的表單標簽是輸入標簽 <input>，輸入類型由 type 屬性定義。

3.1 輸入域（`<input>`）

3.1.1 文本域（Text Fields）

文本域通過 <input type="text"> 標簽來設定，當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">
</form>

表單本身并不可見。同時，在大多數瀏覽器中，文本域的默認寬度是 20 個字符。

3.1.2 密碼（password）

密碼字段通過標簽 <input type="password"> 來定義:

<form>Password: <input type="password" name="pwd">
</form>

密碼字段字符不會明文顯示，而是以星號 ***** 或圓點 . 替代。

3.1.3 單選按鈕（Radio Buttons）

<input type="radio"> 標簽定義了表單的單選框選項:

<form action=""><input type="radio" name="sex" value="male">男<br><input type="radio" name="sex" value="female">女
</form>

3.1.4 復選框（Checkboxes）

<input type="checkbox"> 定義了復選框，可以選取一個或多個選項：

<form><input type="checkbox" name="vehicle[]" value="Bike">我喜歡自行車<br><input type="checkbox" name="vehicle[]" value="Car">我喜歡小汽車
</form>

3.1.5 提交按鈕（Submit）

<input type="submit"> 定義了提交按鈕。當用戶單擊確認按鈕時，表單的內容會被傳送到服務器。表單的動作屬性 action 定義了服務端的文件名。action 屬性會對接收到的用戶輸入數據進行相關的處理:

<form name="input" action="html_form_action.php" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit">
</form>

假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 html_form_action.php 文件，該頁面將顯示出輸入的結果。

以上實例中有一個 method 屬性，它用于定義表單數據的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表單數據會包含在表單體內然后發送給服務器，用于提交敏感數據，如用戶名與密碼等。
get：默認值，指的是 HTTP GET 方法，表單數據會附加在 action 屬性的 URL 中，并以 ? 作為分隔符，一般用于不敏感信息，如分頁等。例如：https://www.runoob.com/?page=1，這里的 page=1 就是 get 方法提交的數據。

3.2 文本域（`<textarea>`）

<textarea> 標簽定義一個多行的文本輸入控件。

文本區域中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

<textarea rows="10" cols="30">我是一個文本框。
</textarea>

3.3 標簽（`<label>`）

<label> 標簽為 input 元素定義標注（標記）。label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽的 for 屬性可把 label 綁定到另外一個元素，應當與相關元素的 id 屬性相同。

<form action="demo_form.php"><label for="male">Male</label><input type="radio" name="sex" id="male" value="male"><br><label for="female">Female</label><input type="radio" name="sex" id="female" value="female"><br><br><input type="submit" value="提交">
</form>

3.4 分組輸入域（`<fieldset>`）

<fieldset> 標簽可以將表單內的相關元素分組，會在相關表單元素周圍繪制邊框。

<legend> 元素為 <fieldset> 元素定義標題。

<form><fieldset><legend>Personalia:</legend>Name: <input type="text"><br>Email: <input type="text"><br>Date of birth: <input type="text"></fieldset>
</form>

3.5 下拉列表（`<select>`）

<select> 元素用來創建下拉列表。

<select> 元素中的 <option> 標簽定義了列表中的可用選項。

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option>
</select>

3.6 示例

以下是一個簡單的HTML表單的例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜鳥教程(runoob.com)</title></head><body><form action="/" method="post"><!-- 文本輸入框 --><label for="name">用戶名:</label><input type="text" id="name" name="name" required /><br /><!-- 密碼輸入框 --><label for="password">密碼:</label><input type="password" id="password" name="password" required /><br /><!-- 單選按鈕 --><label>性別:</label><input type="radio" id="male" name="gender" value="male" checked /><label for="male">男</label><input type="radio" id="female" name="gender" value="female" /><label for="female">女</label><br /><!-- 復選框 --><input type="checkbox" id="subscribe" name="subscribe" checked /><label for="subscribe">訂閱推送信息</label><br /><!-- 下拉列表 --><label for="country">國家:</label><select id="country" name="country"><option value="cn">CN</option><option value="usa">USA</option><option value="uk">UK</option></select><br /><!-- 提交按鈕 --><input type="submit" value="提交" /></form></body>
</html>

<form> 元素用于創建表單，action 屬性定義了表單數據提交的目標 URL，method 屬性定義了提交數據的 HTTP 方法（這里使用的是 “post”）。
<label> 元素用于為表單元素添加標簽，提高可訪問性。
<input> 元素是最常用的表單元素之一，它可以創建文本輸入框、密碼框、單選按鈕、復選框等。type 屬性定義了輸入框的類型，id 屬性用于關聯 <label> 元素，name 屬性用于標識表單字段。
<select> 元素用于創建下拉列表，而 <option> 元素用于定義下拉列表中的選項。<requried>規定用戶在提交表單前必須選擇一個下拉列表中的選項。