您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 相關知識

HTML 表單完整指南：九大控件類型、屬性詳解與實戰代碼

編輯：Java 相關知識

HTML 表單（`

`）是 Web 頁面與伺服器交互的核心介面。從簡單的登入框到複雜的數據錄入系統，掌握各類表單控件的語法、屬性、無障礙屬性（``）與提交機制，是前端開發的基本功。本文以九個遞進式實例，系統講解 ``、`

`、`<select>`、`<button>` 等標籤的完整用法，所有代碼可直接複製運行。</p>

<h2>一、表單容器：`<form>`</h2>
<pre><code><form action="/api/login" method="post">
  
</form></code></pre>
<table border="1" cellpadding="5" cellspacing="0">
  <thead><tr><th>屬性</th><th>說明</th><th>常用值</th></tr></thead>
  <tbody>
    <tr><td><code>action</code></td><td>提交目標 URL</td><td>相對/絕對路徑，如 `/save.php`</td></tr>
    <tr><td><code>method</code></td><td>HTTP 方法</td><td>`get` (預設，參數在 URL) / `post` (請求體，無長度限制、較安全)</td></tr>
    <tr><td><code>enctype</code></td><td>編碼類型 (僅 post)</td><td>`application/x-www-form-urlencoded` (預設) / `multipart/form-data` (上傳檔案) / `text/plain`</td></tr>
    <tr><td><code>novalidate</code></td><td>禁用瀏覽器原生驗證</td><td>布林屬性</td></tr>
  </tbody>
</table>

<h2>二、單行文字輸入：`<input type="text">` / `<input type="password">`</h2>
<pre><code><form action="/login" method="post">
  <label for="username">帳號：</label>
  <input type="text" id="username" name="username" placeholder="請輸入帳號" required><br><br>

<input type="submit" value="登入">
</form></code></pre>
<p><strong>關鍵屬性</strong>：<code>name</code> (提交鍵名)、<code>value</code> (預設值)、<code>placeholder</code> (提示文字)、<code>required</code> (必填)、<code>maxlength</code>、<code>autocomplete</code>。</p>

<h2>三、多行文字域：`<textarea>`</h2>
<pre><code><form action="/profile" method="post">
  <label for="bio">個人簡介：</label><br>
  <textarea id="bio" name="bio" rows="6" cols="50" placeholder="在此輸入...">預設內容</textarea><br>
  <input type="submit" value="送出"> <input type="reset" value="重置">
</form></code></pre>
<p><code>rows</code>/<code>cols</code> 設定可見行列數；CSS `resize: vertical/horizontal/both/none` 控制可否拖拽調整大小。</p>

<h2>四、單選與複選：`<input type="radio">` / `<input type="checkbox">`</h2>
<pre><code><form action="/survey" method="post">
  <fieldset>
    <legend>您喜歡旅遊嗎？</legend>
    <label><input type="radio" name="travel" value="like" checked> 喜歡</label>
    <label><input type="radio" name="travel" value="dislike"> 不喜歡</label>
    <label><input type="radio" name="travel" value="neutral"> 無所謂</label>
  </fieldset><br>

<fieldset>
    <legend>喜歡的運動 (可多選)：</legend>
    <label><input type="checkbox" name="sports" value="run" checked> 跑步</label>
    <label><input type="checkbox" name="sports" value="swim"> 游泳</label>
    <label><input type="checkbox" name="sports" value="bike"> 騎車</label>
    <label><input type="checkbox" name="sports" value="yoga"> 瑜伽</label>
  </fieldset><br>

<input type="submit" value="提交">
</form></code></pre>
<p><strong>核心規則</strong>：同組 `<radio>` **必須共用相同 `name`** 才能互斥；`<checkbox>` 同名提交時後端接收陣列/逗號分隔字串；`<label>` 包裹或 `for=id` 綁定，點擊文字即可選中，提升可用性。</p>

<h2>六、下拉多選：`<select multiple>`</h2>
<pre><code><select id="hobbies" name="hobbies" multiple size="4">
  <option value="read">閱讀</option>
  <option value="travel">旅遊</option>
  <option value="sport">運動</option>
  <option value="shop">購物</option>
</select>
<small>按住 Ctrl (Win) / Command (Mac) 點擊可多選</small></code></pre>
<p>`size` 指定可見行數；`multiple` 為布林屬性。提交時同名多值，後端需按陣列處理。</p>

<h2>七、提交按鈕：`<input type="submit">` / `<button type="submit">`</h2>
<pre><code><input type="submit" value="提交表單">

<button type="submit"><strong>提交</strong> 表單</button></code></pre>
<p><code><button></code> 內容可包含 HTML（圖標、粗體），樣式彈性更大；`type="submit"` 為預設，表單內無需明寫。</p>

<h2>八、重置按鈕：`<input type="reset">` / `<button type="reset">`</h2>
<pre><code><input type="reset" value="重置表單">
</code></pre>
<p>⚠️ 重置是**還原初始值**，非清空。若需清空，請用 JS：`form.reset()` 後再遍歷 `value = ''`。</p>

<h2>九、無障礙增強：`<label>` 與 `for` / `id` 綁定</h2>
<pre><code><form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" value="M"><br>

<label for="email">Email：</label>
  <input type="email" id="email" name="email" placeholder="name@example.com"><br>

<fieldset>
    <legend>運動偏好：</legend>
    <label><input type="checkbox" name="sport" id="run" value="run"> 跑步</label><br>
    <label><input type="checkbox" name="sport" id="swim" value="swim"> 游泳</label><br>
    <label><input type="checkbox" name="sport" id="bike" value="bike"> 騎車</label>
  </fieldset>
</form></code></pre>
<p><strong>兩種綁定方式</strong>：</p>
<ol>
  <li><strong>顯式綁定</strong>：`<label for="id">` + `<input id="id">`（推薦，結構分離）</li>
  <li><strong>隱式綁定</strong>：`<label><input ...> 文字</label>`（較簡潔，但樣式控制受限）</li>
</ol>
<p>綁定後：點擊 Label 文字 → 焦點自動移至關聯控件 → 螢幕閱讀器正確朗讀標籤 → 觸控裝置點擊區域擴大。</p>

<h2>十、綜合實戰範例：完整註冊表單</h2>
<pre><code><!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>會員註冊</title>
  <style>
    form { max-width: 400px; margin: 2rem auto; font-family: sans-serif; }
    label { display: block; margin: 0.8rem 0 0.2rem; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 0.5rem; box-sizing: border-box; }
    button { margin-top: 1rem; padding: 0.6rem 1.2rem; background: #0066cc; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
    button:hover { background: #0052a3; }
    .inline { display: inline-block; width: auto; margin-right: 1rem; }
    fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 0.5rem 1rem; }
  </style>
</head>
<body>
  <form action="/api/register" method="post" novalidate>
    <label for="uname">用戶名</label>
    <input type="text" id="uname" name="username" required minlength="3" maxlength="16" placeholder="3-16 字元">

<label for="email">Email</label>
    <input type="email" id="email" name="email" required placeholder="name@example.com">

<h2>十一、後端接收提示 (以 PHP/Node/Java 為例)</h2>
<ul>
  <li><code>GET</code>：參數在 URL Query String，`$_GET['name']` / `request.query.name` / `request.getParameter("name")`。</li>
  <li><code>POST</code> (`application/x-www-form-urlencoded`)：`$_POST['name']` / `request.body.name` / `request.getParameter("name")`。</li>
  <li><code>POST</code> (`multipart/form-data`，含檔案上傳)：需用 `FormData` / `multer` / `commons-fileupload` 解析。</li>
  <li>同名多值 (checkbox/multiple select)：PHP 需命名為 `name="hobbies[]"` 獲陣列；Node `body.hobbies` 自動為陣列；Java `request.getParameterValues("hobbies")` 返回 `String[]`。</li>
</ul>

<h2>結語</h2>
<p>HTML 表單看似基礎，實則細節決定體驗：正確的 `<label>` 綁定、語義化的 `<fieldset>/<legend>`、適當的 `type` (email/tel/url/number/date) 觸發原生鍵盤/驗證、`required`/`pattern` 降低無效提交、`autocomplete` 協助瀏覽器自動填充。掌握本文九大控件與綜合範例，即可構建無障礙、語義化、易維護的現代 Web 表單。</p>
							<div class="qcxs_ie_he"></div>
						</div>
						<div class="akevx_own"> <script language='javascript' src='/ad/p.js'></script></div>
						<div class="akevx_mj"> </div>	
						<div class="qcxs_ie_he"></div>
						
						<ol class="qmsbvx_hsb ovv_hex">
							<li>上一篇文章： <a class='LinkPrevArticle' href='https://code.yunyiwangluo.com/bianchen/gyjava/233622.html' >Java 類生命週期深度解析：載入、連結、初始化、實例化到卸載全流程</a> <li>下一篇文章： <a class='LinkNextArticle' href='https://code.yunyiwangluo.com/bianchen/gyjava/233624.html'  >HTML 表單元素完整指南：從基礎到進階實作</a> 
						</ol>
					</div>
				</div>
				<div class="qirnxbd bg1 mt20">
					<div class="jdbsbav">
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/' target="_blank">Java 相關知識</a>
						<div class="jdbsbav_hx"></div>
					</div>
					<div class="qirnxbd_rbx">
						
						<div class="oiendx">
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/114102.html' target="_blank"><img  src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011317134936_S.jpg'  width='100' height='70' alt='Java 正則表達式完全指南：從語法基礎到 Jakarta-ORO 實戰應用'  border='0'></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/114102.html' target="_blank"><strong>Java 正則表達式完全指南：從語法基礎到 Jakarta-ORO 實戰應用</strong></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/114102.html' target="_blank"><p>正則表達式是文本處理的「瑞士軍刀」。Java 1.4 前無原</p></a>			
						</div>
						
						<div class="oiendx">
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/127174.html' target="_blank"><img  src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011417481241_S.jpg'  width='100' height='70' alt='Java集合框架全景圖：核心體系與工具類總覽'  border='0'></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/127174.html' target="_blank"><strong>Java集合框架全景圖：核心體系與工具類總覽</strong></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/127174.html' target="_blank"><p>Java 集合框架四大板塊
Java 集合工具包（java.</p></a>			
						</div>
						
						<div class="oiendx">
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/232322.html' target="_blank"><img  src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201707/2017072711015910.png'  width='100' height='70' alt='Java 實戰案例：隨機驗證碼生成器實現（字符數組、Random、StringBuilder、indexOf 去重）'  border='0'></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/232322.html' target="_blank"><strong>Java 實戰案例：隨機驗證碼生成器實現（字符數組、Random、StringBuilder、indexOf 去重）</strong></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/232322.html' target="_blank"><p>本文通過一個「生成 4 位不重複字符驗證碼」的完整案例，串講</p></a>			
						</div>
						
						<div class="oiendx">
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/130029.html' target="_blank"><img  src='https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017011609111949_S.jpg'  width='100' height='70' alt='MyEclipse 打開 Struts 配置文件報錯終極解決：缺失 Struts Nature 配置'  border='0'></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/130029.html' target="_blank"><strong>MyEclipse 打開 Struts 配置文件報錯終極解決：缺失 Struts Nature 配置</strong></a>
							<a href='https://code.yunyiwangluo.com/bianchen/gyjava/130029.html' target="_blank"><p>問題現象
手動添加 Struts JAR 包後，雙擊 str</p></a>			
						</div>
						
						<div class="qcxs_ie_he"></div>
					</div>
				</div>
			</div>
			<div class="eccsgxsg mt20">
				
				<div class="akevx_oin"> </div>	
				<div class="nenxnxb bg1 mt20">
					<div class="enxvsfgg">
						<div class="enxvsfgg_1"></div>
					</div>
					<div class="pdirbvx lbhevs ovv_hex">
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/235168.html' target="_blank">JavaMail API 完整指南：從核心架構到郵件發送實戰</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/237139.html' target="_blank">Oracle + MyBatis foreach 批量插入報錯 ORA-00933 根因與解決方案</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/110721.html' target="_blank">Java 動態綁定機制深度解析：多態實現的核心原理</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/233436.html' target="_blank">Jersey 處理 HTTP Multipart 協議完整實戰：客戶端與服務端雙向解析</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/131232.html' target="_blank">Java 長時間任務執行框架設計：基於 Worker 抽象類的健壯多線程實作模式</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/127783.html' target="_blank">Eclipse 插件開發深度指南：菜單功能全解析與三大擴展點實戰</a>
						
						<a href='https://code.yunyiwangluo.com/bianchen/gyjava/111079.html' target="_blank">Log4j 核心組件與配置實戰筆記</a>
						
					</div>
				</div>
			
				<div class="eqibneb bg1 mt20">
					<div class="lkebxsg">欄目導航</div>
					<div class="eqibneb_1 ovv_hex">
						<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/javarm/' target="_self">Java 程式設計入門</a></li>
<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/gyjava/' target="_self">Java 相關知識</a></li>
<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/j2ee/' target="_self">J2EE</a></li>
<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/j2se/' target="_self">J2SE</a></li>
<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/j2me/' target="_self">J2ME</a></li>
<li><a class='childclass' href='https://code.yunyiwangluo.com/bianchen/javazh/' target="_self">Java 綜合教學</a></li>
					</div>
					
				</div>
			</div>
			<div class="qcxs_ie_he"></div>
		</div>
	</div>
		<div class="qcxs_ie_he"></div>
	<div class="ebrxbsbf">Copyright © <a href="https://code.yunyiwangluo.com/" target="_blank" title="程式碼之家">程式碼之家</a> All Rights Reserved   </div>

</body>
</html>