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. nameid屬性對於文本框通常有相同值,但對於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;
}
  1. float: label向form的左端浮動
  2. width: label的最大寬度
  3. display: 作為block級元素顯示,即不會被回車換行符分開。
  4. margin-bottom: 底部填充空間
label {
	width: 75px;
	text-align: right;
	padding-right: 20px;
}
  1. width: 固定寬度
  2. Text-align: 文本對齊向右
  3. Padding-right: 右側填充20px
br {
	clear: left;
}
  1. 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.

更多參見 HyperText Markup Language/Tag List/form