| 06 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| 07 |
<link rel="stylesheet" type="text/css" href="/index.css" /> |
| 08 |
<script type="text/javascript"> |
| 09 |
document.write("Hello World!") |
| 12 |
<style type="text/css"> |
| 17 |
<input type="button" value="我是個按鈕"/> |
| 18 |
<input type="checkbox" value="我是個複選框" /> |
| 20 |
<input type="hidden" value="我是個隱藏的input"/> |
| 21 |
<input type="password" value="我是個密碼輸入框"/> |
| 22 |
<input type="radio" value="我是個單選框"/> |
| 23 |
<input type="reset" value="我是個重置按鈕"/> |
| 24 |
<input type="submit" value="我是個提交按鈕"/> |
| 25 |
<input type="text" value="我是個文本輸入框"/> |
| 29 |
<button type="button" value="我只是個普通按鈕" name="普通按鈕">普通</button> |
| 30 |
<button type="reset" value="我是個重置按鈕" name="重置按鈕"/>重置</button> |
| 31 |
<button type="submit" value="我是個提交按鈕" name="提交按鈕"/>提交</button> |
| 32 |
<select name="select"> |
| 33 |
<option>下拉選擇框1</option> |
| 34 |
<option>下拉選擇框2</option> |
| 35 |
<option>下拉選擇框3</option> |
| 38 |
<label for="test1">label1</label><input type="radio" id="test1"name="test" />試試點擊labe1 |
| 40 |
<label for="test2">label2</label><input type="radio" id="test2"name="test"/>試試點擊labe2 |
| 43 |
<legend>豬哥每日一貼</legend> |
| 44 |
www.qaforcode.net: <input type="text" /> |
| 45 |
www.qaforcode.net2: <input type="text" /> |
表單相關標籤
表單通常是由form包圍的內容、 form的必須屬性有action，用來指定表單提交的頁面，可選屬性有accept規定上傳提交的文件的類型，accept-charset服務器處理表單數據接受的字符集。enctype 規定表單數據在發送到服務器以前應該如何編碼method 規定如何發送表單數據（get|post）,name規定表單的名字，target規定在何處打開action url， 標準屬性id, class, title, style, dir, lang, xml:lang， 事件屬性：onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup javascript
一、<input>標籤讓用戶輸入信息的標籤，根據屬性type不一樣表現形式也不一樣。上例中已經列出了全部的樣子。 css
| 屬性 |
值 |
描述 |
DTD |
| accept |
mime_type |
規定經過文件上傳來提交的文件的類型。 |
STF |
| align |
- left
- right
- top
- middle
- bottom
|
不同意使用。規定圖像輸入的對齊方式。 |
TF |
| alt |
text |
定義圖像輸入的替代文本。 |
STF |
| checked |
checked |
規定此 input 元素首次加載時應當被選中。 |
STF |
| disabled |
disabled |
當 input 元素加載時禁用此元素。 |
STF |
| maxlength |
number |
規定輸入字段中的字符的最大長度。 |
STF |
| name |
field_name |
定義 input 元素的名稱。 |
STF |
| readonly |
readonly |
規定輸入字段爲只讀。 |
STF |
| size |
number_of_char |
定義輸入字段的寬度。 |
STF |
| src |
URL |
定義以提交按鈕形式顯示的圖像的 URL。 |
STF |
| type |
- button 按鈕
- checkbox 複選框
- file 文件選擇框
- hidden 隱藏輸入框
- image 圖片按鈕
- password 密碼輸入框
- radio 單選框 須要name設置爲同樣的才能實現單選
- reset 重置框
- submit 提交按鈕
- text 文本輸入框
|
規定 input 元素的類型。 |
STF |
| value |
value |
規定 input 元素的值。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang html
事件屬性：tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup java
二、<textarea>標籤是多行輸入標籤，實質和input的text有點相似，只是他能多寫幾行罷了 jquery
必須屬性： ajax
| 屬性 |
值 |
描述 |
DTD |
| cols |
number |
規定文本區內的可見寬度。 |
STF |
| rows |
number |
規定文本區內的可見行數。 |
STF |
可選屬性： api
| 屬性 |
值 |
描述 |
DTD |
| disabled |
disabled |
規定禁用該文本區。 |
STF |
| name |
name_of_textarea |
規定文本區的名稱。 |
STF |
| readonly |
readonly |
規定文本區爲只讀。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang, tabindex, accesskey 服務器
事件屬性：onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup post
三、<button>標籤和有三種類型button，reset，submit分別和input中的button，reset，submit相同實際使用中用input的形式就好了 ui
四、下拉列表標籤包括<select><optgroup><option>實際使用中通常只用到select 和 option如上例中，option必須和select配合使用，不然沒有意義
其中select的可選屬性
| 屬性 |
值 |
描述 |
DTD |
| disabled |
disabled |
規定禁用該下拉列表。 |
STF |
| multiple |
multiple |
規定可選擇多個選項。 |
STF |
| name |
name |
規定下拉列表的名稱。 |
STF |
| size |
number |
規定下拉列表中可見選項的數目。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
事件屬性：onfocus, onblur, onchange
optgroup的必須屬性
| 屬性 |
值 |
描述 |
DTD |
| label |
text |
爲選項組規定描述。 |
STF |
可選屬性：
| 屬性 |
值 |
描述 |
DTD |
| disabled |
disabled |
規定禁用該選項組。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang
事件屬性：tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
option的可選屬性
| 屬性 |
值 |
描述 |
DTD |
| disabled |
disabled |
規定此選項應在首次加載時被禁用。 |
STF |
| label |
text |
定義當使用 <optgroup> 時所使用的標註。 |
STF |
| selected |
selected |
規定選項（在首次顯示在列表中時）表現爲選中狀態。 |
STF |
| value |
text |
定義送往服務器的選項值。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang, tabindex
事件屬性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
五、<label> 標籤，label標籤用來描述input的內容，當你點擊label時相應的input會被focus
可選屬性：
| 屬性 |
值 |
描述 |
DTD |
| for |
element_id |
規定 label 與哪一個表單元素綁定。 |
STF |
標準屬性：id, class, title, style, dir, lang, xml:lang
事件屬性：accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
六、<fieldset> 標籤將表單內容的一部分打包，生成一組相關表單的字段。和<legend>一塊兒使用，<legend>用來寫標題如本例中的豬哥每日一貼，具體看例子就能夠了。
標準屬性：id, class, title, style, dir, lang, xml:lang
事件屬性：accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
本文固定連接: http://www.qaforcode.net/archives/317 | 豬哥每日一貼