HTMLCSS學習筆記(二)-- HTML表單標籤

表單

1 : 表單標籤

<form></form>
屬性 : 
action = '接口地址'
method = 'get / post'
name = '表單名稱'

2 : 表單控件

<input>
屬性:
type = '控件類型'
name:屬性標識表單域的名稱;
Value:屬性定義表單域的默認值,其他屬性根據type的不同而有所變化。
maxlength:控制最多輸入的字符數,
Size:控制框的寬度(以字符爲單位)
1)文本框
<input type="text" value="默認值"/>
2)密碼框
<input type="password" />
3)提交按鈕
<input type="submit" value="按鈕內容" />
4)重置按鈕
<input type="reset" value="按鈕內容" />
5)空按鈕
<input type="button" value="按鈕內容" />

3:表單補充

1)單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked=“checked”/>(默認選中)女
2)複選框組
<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屬性用來設置文本輸入窗口的高度和寬度,單位是字符。
阻止瀏覽器對窗口的拖動設置:{resize:none;}(css屬性)
5)上傳文件:
語法:<input type="file">

4:表單標籤補充

1)表單字段集
語法:<fieldset></fieldset>

說明:相當於一個方框,在字段集中可以包含文本和其他元素。該元素用於對錶單中的元素進行分組並在文檔中區別標出文本。fieldset元素可以嵌套,在其內部可以在設置多個fieldset對象。disabled定義空間禁制可用;

2)字段級標題:
語法:<legend align="left/center/right/justify"></legend>
說明:legend元素可以在fieldset對象繪製的方框內插入一個標題。legend元素必須是fieldset內的唯一個元素。
3)提示信息標籤:
語法:<label for="綁定控件id名"></label>

說明:label元素用來定義標籤,爲頁面上的其他元素指定提示信息。要將label元素綁定到其他的控件上,可以將label元素的for屬性設置爲與該控件的id屬性值相同。

拓展:post/get

  • (1). 從功能上講,GET一般用來從服務器上獲取資源,POST一般用來更新服務器上的資源;
  • (2). 從REST服務角度上說,GET是冪等的,即讀取同一個資源,總是得到相同的數據,而POST不是冪等的,因爲每次請求對資源的改變並不是相同的;進一步地,GET不會改變服務器上的資源,而POST會對服務器資源進行改變;
  • (3). 從請求參數形式上看,GET請求的數據會附在URL之後,即將請求數據放置在HTTP報文的 請求頭 中,以?分割URL和傳輸數據,參數之間以&相連。特別地,如果數據是英文字母/數字,原樣發送;否則,會將其編碼爲 application/x-www-form-urlencoded MIME 字符串(如果是空格,轉換爲+,如果是中文/其他字符,則直接把字符串用BASE64加密,得出如:%E4%BD%A0%E5%A5%BD,其中%XX中的XX爲該符號以16進製表示的ASCII);而POST請求會把提交的數據則放置在是HTTP請求報文的 請求體 中。
  • (4). 就安全性而言,POST的安全性要比GET的安全性高,因爲GET請求提交的數據將明文出現在URL上,而且POST請求參數則被包裝到請求體中,相對更安全。
  • (5). 從請求的大小看,GET請求的長度受限於瀏覽器或服務器對URL長度的限制,允許發送的數據量比較小,而POST請求則是沒有大小限制的。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章