HTML/表單

HTML表單(form）用於搜集數據傳給伺服器端腳本server-side scripting language或客戶端腳本如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.
fieldset: 表單控制項包含在fieldset中。表單可有多個fieldset. Fieldset自身可嵌套。
enctype {string}: 規定在發送表單數據之前，如何對表單數據進行編碼。指定的值有：application/x-www-form-urlencoded ：在發送前編碼所有字符（默認方式）；multipart/form-data ：不對字符編碼。使用包含文件上傳控制項的表單時，必須使用該值.
legend: 每個fieldset以legend元素開始。其內容在fieldset邊界上作為標題.
label for="": 是表單控制項. for屬性的值必須匹配同一表單中某個控制項的id屬性。
input type="" name ="" id="": 多種輸入控制項。支持的類型包括 - submit, text, password, checkbox, radio, reset, file, hidden, image, button. name用於伺服器辨識是哪個輸入控制項提供的數據。id屬性用於匹配label. name與id屬性對於文本框通常有相同值，但對於checkbox或radio輸入控制項具有不同值。
select: 對於下拉列表有SELECT元素，對於多行文本輸入有TEXTAREA屬性。

上述例子使用 <br /> 標記以在控制項之間強制新行。

成功控制項

瀏覽器不是將表單所有的控制項全部發送到伺服器，而是查找所有「成功控制項」，只把成功控制項的數據發送到服務端。

成功控制項是：表單中的有name屬性和「當前值」的控制項，以及一些特殊情況：

控制項不能是禁用狀態，即指定disabled="disabled"。
如果一個表單包含了多個提交按鍵，那麼僅當用戶點擊的那個提交按鈕才是成功控制項。
對於checkbox控制項來說，只有被用戶勾選的才算是成功控制項。
對於radio button來說，只有被用戶勾選的才算是成功控制項。
對於select控制項來說，所有被選擇的選項都做為成功控制項，name由select控制項提供。
對於file上傳文件控制項來說，如果它包含了選擇的文件，那麼它將是一個成功控制項。
瀏覽器不會考慮Reset按鈕以及OBJECT元素。
對於checkbox, radio button來說，如果它們被確認為成功控制項，但沒有為控制項指定value屬性，那麼在表單提交時，將會以"on"做為它們的value

使用CSS格式化

HTML

非常簡單，無需創建很多div。

<form>

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

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

</form>

The CSS

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

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

br {
	clear: left;
}

上述CSS代碼解釋如下：

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

float: label向form的左端浮動
width: label的最大寬度
display: 作為block級元素顯示，即不會被回車換行符分開。
margin-bottom: 底部填充空間

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

width: 固定寬度
Text-align: 文本對齊向右
Padding-right: 右側填充20px

br {
	clear: left;
}

clear: this is the most important part without the clear:left nothing will align properly this basically makes everything within each element sequence align underneath each other and to the left.