html 基礎(2) 表單_ZenDei技術網路在線

<form>表單 name 表單的名稱 action 表單的提交地址 target 打開方式 enctype MIME類型 method 表單數據提交方式，get：在url地址上面傳送參數到伺服器，post：在後臺傳送參數到伺服器 <label> label元素不會向用戶呈現任何特殊效果，不過它為鼠 ...

<form>表單

name 表單的名稱

action 表單的提交地址

target 打開方式

enctype MIME類型

method 表單數據提交方式，get：在url地址上面傳送參數到伺服器，post：在後臺傳送參數到伺服器

<label>

<label for="username">用戶名：</label>
<input type="text" id="username"/>

label元素不會向用戶呈現任何特殊效果，不過它為滑鼠用戶改進了可用性，如果你在label元素內點擊文本，就會觸發此控制項，就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控制項上

表單屬性

type 元素類型

name 元素的名稱

value 元素的值

size 元素的寬度

maxlength 輸入字元的最大長度

disabled 被禁用的input元素既不可用，也不可點擊，直到滿足某些條件為止

readonly 規定輸入欄位為只讀，不能修改，不過仍然可以使用tab鍵切換到該欄位，還可以選中或拷貝其文本

表單的type類型

text 定義單行輸入欄位，用戶可以在其中輸入文本，預設是20個字元

用戶名：<input type="text" name="username"/>

password 定義密碼欄位，欄位中的字元會被遮蔽

密　碼：<input type="password" name="password"/>

radio 定義單選按鈕

<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex" value="2"/>女

單選按鈕的name值必須相同

value值是提交給後臺的數據，代表你的選擇

checked是預設選擇

checkbox 定義覆選框

<input type="checkbox" name="love" value="music" checked/>音樂
<input type="checkbox" name="love" value="movie"/>電影
<input type="checkbox" name="love" value="game"/>游戲

button 定義可點擊的按鈕(大多與javascript使用來啟動腳本)

<input type="button" value="確定"/>

submit 定義提交按鈕，提交按鈕向伺服器發送數據

<input type="submit" value="提交"/>

reset 定義重置按鈕，重置按鈕會將所有表單欄位重置為初始值

<input type="reset" value="重寫"/>

image 定義圖像作為提交按鈕

<input type="image" src="url" alt=" "/>

file 定義輸入欄位和"瀏覽..."按鈕，供文件上傳

<input type="file" name="img" multiple/>

用這項功能時，在form標簽中要指定method屬性為"post"，enctype屬性指定為"multipart/form-data"

multiple控制是否上傳多個文件

color 定義拾色器

date，datetime，datetime-local，month，week，time 定義日期時間欄位

email 定義用於e-mail地址的文本欄位

當提交表單時，會自動地對email欄位的值進行驗證

hidden 定義隱藏輸入欄位

<input type="hidden" name="country" value="china"/>

隱藏欄位常常儲存預設值，或者由javascript改變它們的值

number 定義帶有spinner控制項的數字欄位

<input type="number" min="1" max="10"/>

max：規定允許的最大值

min：規定允許的最小值

step：規定合法數字間隔

value：規定預設值

range 定義帶有slider控制項的數字欄位

<input type="range" min="0" max="100" value="50" step="10"/>

range類型顯示為滑塊，可以設置可接受數字的限制

search 定義用於搜索的文本欄位

tel 定義用於電話號碼的文本欄位

url 定義用於URL的文本欄位

當提交表單時，會自動地對url欄位的值進行驗證

html5的新的表單屬性

novalidate 屬性規定當提交表單時不對其進行驗證

novalidate屬性適用於<form>，以及下麵的<input>類型：text，search，url，telephone，email，password，datepickers，range，color

<form action=" " novalidate>
    E-mail: <input type="email" />
    <input type="submit" />
</form>

autocomplete 屬性規定表單是否應該啟用自動完成功能

autocomplete屬性適用於<form>，以及下麵的<input>類型：text，search，url，telephone，email，password，datepickers，range，color

<input type="search" name="keywords" autocomplete="on/off" />

自動完成允許瀏覽器預測對欄位的輸入，當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項，一定要設置name或者id

autofocus 屬性規定當頁面載入時按鈕應當自動地獲得焦點，適用於所有<input>標簽的類型

form 屬性規定輸入域所屬的一個或多個表單，適用於所有<input>標簽的類型，form屬性必須引用所屬表單的id

<form action=" " id="zhuang">
    First name:<input type="text" name="fname" /> <input type="submit" />
</form>
    Last name:<input type="text" name="lname" form="zhuang" />

form overrides 表單重寫屬性，允許您重寫form元素的某些屬性設定

表單重寫屬性有：

formaction - 重寫表單的action屬性

formenctype - 重寫表單的enctype屬性

formmethod - 重寫表單的method屬性

formnovalidate - 重寫表單的novalidate屬性

formtarget - 重寫表單的target屬性

表單重寫屬性適用於以下類型的<input>標簽：submit，image

<form action=" ">
    e-mail: <input type="email" /><br />
    <input type="submit" value="確定1" /><br />
    <input type="submit" formnovalidate="true" value="確定2" /><br />
</form>

height，width 屬性規定於input標簽的image類型的圖像的高度和寬度

list 屬性規定輸入域的datalist，datalist是輸入域的選項列表

list屬性適用於以下類型的<input>標簽：text，search，url，telephone，email，datepickers，number，range，color

Webpage: <input type="url" list="zhuang" />
<datalist id="zhuang">
    <option label="W3Schools" value="http://www.w3school.com.cn" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min，max，step 屬性用於為包含數字或日期的input類型規定約束

max屬性規定輸入域所允許的最大值

min屬性規定輸入域所允許的最小值

step屬性為輸入域規定合法的數字間隔(如果step="3"，則合法的數是-3,0,3,6等)

min，max，step屬性適用於以下類型的<input>標簽：datepickers，number，range

<input type="number" min="0" max="10" step="3" />

multiple 屬性規定輸入域中可選擇多個值

multiple屬性適用於以下類型的<input>標簽：email，file

<input type="file" multiple />

pattern 屬性規定用於驗證input域的模式

[ ]限定類型範圍：[0-9]，[a-z]，[A-Z]，[0-9a-zA-Z]

{ }限定個數範圍：{1,10}，{1,}

title：提示文字

pattern屬性適用於以下類型的<input>標簽：text，search，url，telephone，email，password

<form action=" ">
    國家代碼：<input type="text" pattern="[A-z]{3}" title="三個字母的國家代碼" />
    <input type="submit" />
</form>

placeholder 屬性提供一種提示，描述輸入域所期待的值

提示會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失

placeholder屬性適用於以下類型的<input>標簽：text，search，url，telephone，email，password

<input type="search" placeholder="Search W3School" />

required 屬性規定必須在提交之前填寫輸入域(不能為空)

required屬性適用於以下類型的<input>標簽：text，search，url，telephone，email，password，datepickers，number，checkbox，radio，file

<form action=" ">
    Name: <input type="text" required />
    <input type="submit" />
</form>

<textarea>表單元素：多行文本域

可以通過cols和rows屬性來規定textarea的尺寸，不過更好的辦法是使用css的height和width屬性

<textarea name="content" rows="5" cols="50" style="resize:none;"> </textarea>

cols用來規定文本域內每一行可以容納多少個字

rows用來規定文本域一共可以顯示多少行

resize用來規定文本域的大小是否允許修改，及修改的可選項：屬性值包括：

1.none：不允許，2.horizontal：允許改變寬度，3.vertical：允許改變高度，4.both：允許改變寬高

<select>表單元素：下拉框

value 選項的值

multiple 是否多選

size 下拉列表框的顯示行數

selected 設置預設選中的選項

<select name="city" multiple size="3">
    <option value="0">請選擇</option>
    <option value="bj">北京</option>
    <option value="gz" selected>廣州</option>
    <option value="sh">上海</option>
</select>

<optgroup>表單元素：下拉框分組

用於組合選項，當您使用一個長的選項列表時，對相關的選項進行組合會使處理更加容易

必須的屬性：label

<select name="city" multiple>
    <optgroup label="廣東">
        <option value="1">廣州</option>
        <option value="2">深圳</option>
    </optgroup>
    <optgroup label="其他">
        <option value="3" selected>北京</option>
        <option value="4">香港</option>
    </optgroup>
</select>