好程序員web前端培訓分享HTMLCSS之HTML表

好程序員web前端培訓分享HTMLCSS之HTML表單標簽

程序員web前端培訓分享HTMLCSS之HTML表單標簽：表單

1 ：表單標簽

屬性：

action='接口地址'

method='get / post'

name='表單名稱'

2 ：表單控件

<input>

屬性：

type='控件類型'

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

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

maxlength：控制最多輸入的字符數，

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

1）文本框

2)密碼框

3)提交按鈕

4)重置按鈕

5)空按鈕

3：表單補充

1）單選按鈕組

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

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

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

2）復選框組

* disabled="disabled" (禁用)

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

3）下拉列表（菜單）：

…………

</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請求則是沒有大小限制的。

.form 標簽

1）作用

<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容

2）基本格式

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

3）常用屬性

1.name

表單名稱

2.method

傳送數據的方式，分為post和get兩種方式：

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

3.action

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

4.enctype

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

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

5.target

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

2.input 標簽

1）注意

input 標記沒有結束標記。

2）基本語法

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

3）屬性

1.type屬性

text：文本輸入域
password：密碼輸入域
submit：提交按鈕
reset：重置按鈕
button：普通按鈕
radio：單選按鈕，可以使用”checked“屬性來設置默認選中項
checkbox：復選框，可以使用”checked“屬性來設置默認選中項
hidden：隱藏表單域
file：文件域

2.name屬性

定義控件的名稱

3.value屬性

初始化值，打開瀏覽器時，文本框中的內容

4.size屬性

設置控件的長度

5.maxlength屬性

輸入框中最大允許輸入的字符數

3.textarea 標簽

1）作用

使用 textarea 標記可以實現一個能夠輸入多行文本的區域。

2）語法格式

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

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

4.select 標簽

1）作用

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

2）option 標簽

作用：

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

值：

value：給選項賦值，指定傳送到服務器上面的值。
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)屬性

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

5.label 標簽

1）作用

用于綁定一個表單元素, 當點擊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>

tml表單元素-html教程

表單元素文本類：

123456

表單元素-按鈕類：

復選框與單選框：

你的愛好是:

吃飯

睡覺

打豆豆

你的性別是：

男

女

文件選擇：

下拉列表與下拉框：div+css,html學習,html入門

iframeset：

iframe：

[成笑笑博客]SEO中DIV+CSS命名規則-seo教程

[成笑笑博客]HTML標簽概述-html教程

CSS樣式表知識總結-css教程

html5和html4之間的區別-html5教程

在線咨詢

上一篇：簡單實用：web前端實現網頁主題切換功能
下一篇：python學習之路（八）：牛刀小試，使用OCR技術

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

好程序員web前端培訓分享HTMLCSS之HTML表

程序員web前端培訓分享HTMLCSS之HTML表單標簽：表單

1 ： 表單標簽

2 ： 表單控件

3：表單補充

4：表單標簽補充

拓展：post/get

.form 標簽

1）作用

2）基本格式

3）常用屬性

1.name

2.method

3.action

4.enctype

5.target

2.input 標簽

1）注意

2）基本語法

3）屬性

1.type屬性

2.name屬性

3.value屬性

4.size屬性

5.maxlength屬性

3.textarea 標簽

1）作用

2）語法格式

4.select 標簽

1）作用

2）option 標簽

3）語法格式

4)屬性

5.label 標簽

1）作用

2）語法

6.舉例

您的項目需求

1 ：表單標簽

2 ：表單控件