程序員web前端培訓(xùn)分享HTMLCSS之HTML表單標簽：表單

1 ： 表單標簽

<form></form>

屬性：

action='接口地址'

method='get / post'

name='表單名稱'

2 ： 表單控件

<input>

屬性：

type='控件類型'

name：屬性標識表單域的名稱；

Value：屬性定義表單域的默認值，其他屬性根據(jù)type的不同而有所變化。

maxlength：控制最多輸入的字符數(shù)，

Size：控制框的寬度（以字符為單位）

1）文本框

<input type="text" value="默認值"/>

2)密碼框

<input type="password" />

3)提交按鈕

<input type="submit" value="按鈕內(nèi)容" />

4)重置按鈕

<input type="reset" value="按鈕內(nèi)容" />

5)空按鈕

<input type="button" value="按鈕內(nèi)容" />

3：表單補充

1）單選按鈕組

<input type=“radio” name=“ral” />男

<input type=“radio” name=“ral”

checked=“checked”/>(默認選中)女

2）復(fù)選框組

<input type="checkbox" name="" />

<input type="checkbox" name="" disabled="disabled" />

* disabled="disabled" (禁用)

* checked="checked" (默認選中)

3）下拉列表（菜單）：

<select >

<option>下拉選項1</option>

<option>下拉選項2</option>

…………

</select>

表示下拉列表，name屬性不是必須的

默認選擇項用selected屬性；

4）表單域多行文本定義：

語法: <textarea name="" cols="" rows="" ></textarea>

多行文本。rows屬性和cols屬性用來設(shè)置文本輸入窗口的高度和寬度，單位是字符。

阻止瀏覽器對窗口的拖動設(shè)置:{resize:none;}（css屬性）

5)上傳文件：

語法：<input type="file">

4：表單標簽補充

1）表單字段集

語法：<fieldset></fieldset>

?

說明：相當(dāng)于一個方框，在字段集中可以包含文本和其他元素。該元素用于對表單中的元素進行分組并在文檔中區(qū)別標出文本。fieldset元素可以嵌套，在其內(nèi)部可以在設(shè)置多個fieldset對象。disabled定義空間禁制可用；

?

2）字段級標題：

語法：<legend align="left/center/right/justify"></legend>

說明：legend元素可以在fieldset對象繪制的方框內(nèi)插入一個標題。legend元素必須是fieldset內(nèi)的唯一個元素。

3)提示信息標簽：

語法：<label for="綁定控件id名"></label>

?

說明：label元素用來定義標簽，為頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上，可以將label元素的for屬性設(shè)置為與該控件的id屬性值相同。

拓展：post/get

· (1). 從功能上講，GET一般用來從服務(wù)器上獲取資源，POST一般用來更新服務(wù)器上的資源；

· (2). 從REST服務(wù)角度上說，GET是冪等的，即讀取同一個資源，總是得到相同的數(shù)據(jù)，而POST不是冪等的，因為每次請求對資源的改變并不是相同的；進一步地，GET不會改變服務(wù)器上的資源，而POST會對服務(wù)器資源進行改變；

· (3). 從請求參數(shù)形式上看，GET請求的數(shù)據(jù)會附在URL之后，即將請求數(shù)據(jù)放置在HTTP報文的 請求頭 中，以?分割URL和傳輸數(shù)據(jù)，參數(shù)之間以&相連。特別地，如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送；否則，會將其編碼為 application/x-www-form-urlencoded MIME 字符串(如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII)；而POST請求會把提交的數(shù)據(jù)則放置在是HTTP請求報文的 請求體 中。

· (4). 就安全性而言，POST的安全性要比GET的安全性高，因為GET請求提交的數(shù)據(jù)將明文出現(xiàn)在URL上，而且POST請求參數(shù)則被包裝到請求體中，相對更安全。

· (5). 從請求的大小看，GET請求的長度受限于瀏覽器或服務(wù)器對URL長度的限制，允許發(fā)送的數(shù)據(jù)量比較小，而POST請求則是沒有大小限制的。

.form 標簽

1）作用

<form></form>定義表單的開始位置和結(jié)束位置，表單提交時的內(nèi)容就是<form>表單中的內(nèi)容

2）基本格式

<form action="服務(wù)器端地址（接受表單內(nèi)容的地址）" name="表單名稱" method="post|get">...</form>

3）常用屬性

1.name

表單名稱

2.method

傳送數(shù)據(jù)的方式，分為post和get兩種方式：

0. get方式：get方式提交時，會將表單的內(nèi)容附加在URL地址的后面，所以限制了提交的內(nèi)容的長度，不超過8192個字符，且不具備保密性。
1. post方式：post方式提交時，將表單中的數(shù)據(jù)一并包含在表單主體中，一起傳送到服務(wù)器中處理，沒有數(shù)據(jù)大小限制。

3.action

表單數(shù)據(jù)的處理程序的URL地址，如果為空則使用當(dāng)前文檔的URL地址，如果表單中不需要使用action屬性也要指定其屬性為”no“。

4.enctype

設(shè)置表單的資料的編碼方式。屬性值：

0. application/x-www-form-urlencoded：在發(fā)送前編碼所有字符（默認）
1. multipart/form-data：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
2. text/plain：空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。

5.target

和超鏈接的屬于類似，用來指定目標窗口。

2.input 標簽

1）注意

input 標記沒有結(jié)束標記。

2）基本語法

<input type="" name="" value="" size="" maxlength="">

3）屬性

1.type屬性

0. text：文本輸入域
1. password：密碼輸入域
2. submit：提交按鈕
3. reset：重置按鈕
4. button：普通按鈕
5. radio：單選按鈕，可以使用”checked“屬性來設(shè)置默認選中項
6. checkbox：復(fù)選框，可以使用”checked“屬性來設(shè)置默認選中項
7. hidden：隱藏表單域
8. file：文件域

2.name屬性

定義控件的名稱

3.value屬性

初始化值，打開瀏覽器時，文本框中的內(nèi)容

4.size屬性

設(shè)置控件的長度

5.maxlength屬性

輸入框中最大允許輸入的字符數(shù)

3.textarea 標簽

1）作用

使用 textarea 標記可以實現(xiàn)一個能夠輸入多行文本的區(qū)域。

2）語法格式

rows屬性和cols屬性分別用來指定，顯示的行數(shù)和列數(shù)，單位是字符個數(shù)；value指定傳送到服務(wù)器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 標簽

1）作用

菜單下拉列表域，生成一個下拉列表。

2）option 標簽

作用：

option 標記用來指定列表中的一個選項，需要放在 select 之間。

值：

0. value：給選項賦值，指定傳送到服務(wù)器上面的值。
1. selected：指定默認的選項。

3）語法格式

<select name="" size="value" multiple>    <option value="value1" selected>選項1</option>    <option value="value2">選項2</option>    <option value="value3">選項3</option>    ... ... ...</select>

4)屬性

0. multiple屬性：multiple屬性不用賦值，其作用是，表示用可以多選的下來列表，如果沒有這個屬性就只能單選。
1. size屬性：設(shè)置列表的高度。
2. name屬性：定義這個列表的名稱。

5.label 標簽

1）作用

用于綁定一個表單元素, 當(dāng)點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

2）語法

<label for="male">Male</label><input type="radio" name="sex" id="male">

6.舉例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">賬號：</label><input type="text" name="username" value="admin"  id="male"><br>  密碼：<input type="password" name="password" size="50" maxlength="6"><br>  性別：<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  興趣：<input type="checkbox" name="interest" value="籃球">籃球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  頭像：<input type="file" name="file"><br>  簡介：    <textarea rows="10" cols="30">        </textarea><br>  城市：    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">廣東</option>    </select>  <br>  <input type="submit" value="注冊">  <input type="reset">  <input type="button" value="普通按鈕"></form>