HTML/表單
< 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.