超文字標記語言/表單

HTML 表單是收集最終使用者資料的簡便方法。處理它們需要使用伺服器端指令碼語言或（在某些情況下，當需要在單個頁面內提供有限的互動時）使用客戶端指令碼語言，例如 JavaScript。

這是一個簡單的表單

<form id="" action="" method="post">
 <fieldset>
  <legend>Personal details</legend>

  <label for="first">First name</label>
  <input type="text" name="first" id="first"><br />

  <label for="family">Family name</label>
  <input type="text" name="family" id="family"><br />

  <input type="submit" name="personal">

 </fieldset>
</form>

以下是解釋 -

id: 表單或控制元件的名稱。
action: 可以處理資料的伺服器端指令碼的 URL。
method: 用於傳送資訊的方法。支援兩種方法：POST 和 GET。POST 是首選方法，除了通常使用 GET 的簡單搜尋之外。與伺服器端語言一起使用。
fieldset: 表單控制元件通常包含在 fieldset 元素中。複雜的表單可能有多個 fieldset。Fieldset 可以包含其他 fieldset。
legend: 每個 fieldset 從一個 legend 元素開始。元素的內容用作放置在 fieldset 邊框中的標題。
label for="": 一個 label for 是單個表單控制元件。的 valuefor屬性必須與id同一表單中表單控制元件的屬性匹配。
input type="" name ="" id="": 各種型別的輸入控制元件。支援的型別包括：submit、text、password、checkbox、radio、reset、file、hidden、image 和 button。的name屬性由伺服器用來識別表單中給定框中輸入了哪些資料。的id屬性用於將輸入與標籤匹配。的name和id屬性對於文字輸入通常具有相同的值，但對於複選框和單選按鈕輸入則具有不同的值。
select: 還存在用於下拉列表的 SELECT 元素和用於多行文字輸入的 TEXTAREA 元素。

這個簡單的示例使用 <br /> 標籤在不同的控制元件之間強制換行。實際的表單將使用更結構化的標記來整齊地佈局控制元件。

使用 CSS 進行格式化

HTML

此表單的 HTML 非常簡單，您不必建立數百個 div 並將它們全部左對齊和右對齊；這會導致很多沮喪和很多除錯，因為各種瀏覽器仍然以不同的方式解釋 CSS 程式碼。

<form>

	<label for="name">Name</label>
	<input id="name" name="name"><br />

	<label for="address">Address</label>
	<input id="address" name="address">

</form>

CSS

此程式碼的 CSS 更有趣一些

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

br {
	clear: left;
}

讓我們解釋一下程式碼

label,input {
	float: left;
	width: 150px;
	display: block;
	margin-bottom: 10px;
}

標籤的 CSS 包含四個部分

float: float 命令用於確定標籤是否浮動到表單的左側。
width: 這定義了標籤的大小，保持所有標籤的寬度固定，使所有內容保持在整齊的順序行中。
display: 元素將顯示為塊級元素，在元素之前和之後有一個換行符。
margin-bottom: 透過在標籤底部新增邊距，可以確保標籤以整齊的方式一個接一個地排列，並且標籤之間有適當的填充。

label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}

width: 這再次是為了定義固定的寬度，使所有內容保持一致的整齊外觀。
Text-align: 將文字右對齊，使所有內容遠離左對齊的標籤，再次使所有內容保持一致。
Padding-right: 這表示在右側有一個適當的填充，再次使所有內容保持精緻的調整。

br {
	clear: left;
}

clear: 這是最重要的部分，如果沒有 clear:left，則沒有任何內容能夠正確對齊，這實際上會使每個元素序列中的所有內容彼此對齊，並向左對齊。

有關更多詳細資訊，請參閱本書的超文字標記語言/標籤列表/表單部分。

外部連結

HTML 文件中的表單，w3.org
HTML 表單，w3schools.com
HTML 表單 - 學習 Web 開發，developer.mozilla.org
表單 (HTML)，en.wikipedia.org