17站長(zhǎng)網(wǎng) › 首頁(yè) ›編程教程› Html教程 › 查看內(nèi)容

HTML 表單

HTML 區(qū)塊►◄HTML 框架

html 表單用于收集不同類型的用戶輸入,所有瀏覽器都支持 <form> 標(biāo)簽。定義和用法 <form> 標(biāo)簽用于為用戶輸入創(chuàng)建 html 表單。表單能夠包含 input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等。

HTML 表單

表單是一個(gè)包含表單元素的區(qū)域

表單元素是允許用戶在表單中輸入內(nèi)容，如文本域、下拉列表、單選框、復(fù)選框等等

表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置

<form>. *input 元素* .</form>

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽 ( <input> )

輸入類型是由類型屬性（type）定義的，大多數(shù)經(jīng)常被用到的輸入類型如下

文本域

<input type="text"> 標(biāo)簽定義了文本域

當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本域

<form>
<p>First name: <input type="text" name="firstname"></p>
<p>Last name: <input type="text" name="lastname"></p>
</form>

瀏覽器顯示如下

注意: 表單本身并不可見(jiàn)。同時(shí)，在大多數(shù)瀏覽器中，文本域的缺省寬度是 20 個(gè)字符

密碼字段

<input type="password"> 標(biāo)簽定義了密碼字段

<form>Password:
<input type="password" name="pwd">
</form>

瀏覽器顯示如下

注意: 密碼字段字符不會(huì)明文顯示，而是以星號(hào)或圓點(diǎn)替代

單選按鈕

<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)

<form>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
</form>

瀏覽器顯示如下

復(fù)選框

<input type="checkBox"> 定義了復(fù)選框

用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)

<form>
    <input type="checkBox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkBox" name="vehicle" value="Car"> I have a car
</form>

瀏覽器顯示如下

提交按鈕

<input type="submit"> 定義了提交按鈕

當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會(huì)被傳送到另一個(gè)文件

表單的動(dòng)作屬性定義了目的文件的文件名

由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對(duì)接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理

<form name="input" action="/dy/html/getpost" method="get">
<p>用戶名：<input type="text" name="user"></p>
<p><input type="submit" value="Submit"></p>
</form>

瀏覽器顯示如下

可以在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕

那么輸入數(shù)據(jù)會(huì)傳送到 "/dy/html/getpost" 的頁(yè)面，該頁(yè)面將顯示出輸入的結(jié)果

表單元素屬性

form元素只是一個(gè)數(shù)據(jù)獲取元素的容器，而容器內(nèi)的元素稱為表單控件。最常用的表單控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個(gè)屬性是input元素的傳統(tǒng)元素屬性

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width這19個(gè)屬性是HTML5新增的元素屬性

傳統(tǒng)屬性

name

name屬性用于規(guī)定input元素的名稱，用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，或者在客戶端通過(guò)JavaScript引用表單數(shù)據(jù)

[注意]只有設(shè)置了name屬性的表單元素才能在提交表單時(shí)傳遞它們的值

type

type屬性用來(lái)規(guī)定input元素的類型

[注意]如果input元素沒(méi)有設(shè)置type屬性，或者設(shè)置的值在瀏覽器中不支持，那么輸入類型會(huì)變成type="text"

accept

accept屬性用來(lái)規(guī)定能夠通過(guò)文件上傳進(jìn)行提交的文件類型。理論上可以用來(lái)限制上傳文件類型，然而它只是建設(shè)性的，并很可能被忽略，它接受逗號(hào)分隔的MIME類型

[注意]該屬性只能與type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

alt屬性為圖像輸入規(guī)定替代文本，功能類似于image元素的alt屬性，為用戶由于某些原因無(wú)法查看圖像時(shí)提供備選信息

[注意]alt屬性只能與type="image"的input元素配合使用

<input type="image" src="#" alt="測(cè)試圖片">

checked

checked屬性規(guī)定在頁(yè)面加載時(shí)應(yīng)該被預(yù)先選定的input元素，也可以在頁(yè)面加載后，通過(guò)JavaScript進(jìn)行設(shè)置

[注意]checked屬性只能與type="radio"或type="checkBox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkBox" name="checkBox" value="1">
<input type="checkBox" name="checkBox" value="2">
<script>var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
    oInput[i].onmouSEOver = function(){
        this.checked = 'checked';
    }
}    
</script>

disabled

disabled屬性規(guī)定應(yīng)該禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按鍵切換到該字段，但可以選中或拷貝其文本

[注意1]disabled屬性無(wú)法與type="hidden"的input元素一起使用

[注意2]對(duì)于IE7-瀏覽器必須設(shè)置為disabled="disabled"，而不可以直接設(shè)置disabled，否則使用javascript控制時(shí)將失效

<button id="btn1">輸入域可用</button>
<button id="btn2">輸入域不可用</button>
<input id="test" disabled value="內(nèi)容">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

readonly

readonly屬性規(guī)定輸入字段為只讀。只讀字段是不能修改的，但用戶仍然可以使用tab按鍵切換到該字段，還可以選中或拷貝其文本

readonly屬性可與type="text"或"password"的input元素配合使用

[注意]IE7-瀏覽器不支持使用javascript控制readonly屬性

<button id="btn1">輸入域只讀</button>
<button id="btn2">輸入域可讀寫</button>
<input id="test" value="內(nèi)容" readonly>
<script>
btn1.onclick = function(){
    test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
    test.removeAttribute('readonly');
}    
</script>

maxlength

maxlength屬性規(guī)定輸入字段的最大長(zhǎng)度，以字符個(gè)數(shù)計(jì)

[注意]該屬性只能與type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size

size屬性對(duì)于type="text"或"password"的input元素是可見(jiàn)的字符數(shù)；而對(duì)于其他類型，是以像素為單位的輸入字段寬度

[注意]由于size屬性是一個(gè)可視化的設(shè)計(jì)屬性，推薦使用css來(lái)代替它

<input size="1">
<input type="password" size="2">

src

src屬性作為提交按鈕顯示的圖像的URL

[注意]src屬性只能且必須與type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="http://sandBox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="測(cè)試圖片">
</form>

value

value屬性為input元素設(shè)定值。對(duì)于不同的輸入類型，value屬性的用法也不同：

type="button"、"reset"、"submit"用于定義按鈕上的顯示的文本
type="text"、"password"、"hidden"用于定義輸入字段的初始值
type="checkBox"、"radio"、"image"用于定義與輸入相關(guān)聯(lián)的值

[注意1]type="checkBox"或"radio"必須設(shè)置value屬性

[注意2]value屬性無(wú)法與type="file"的input元素一起使用

<button id="btn1">1</button>
<button id="btn2">2</button>
<input id="test">
<script>
btn1.onclick = btn2.onclick =function(){
    test.value=this.innerHTML;
}    
</script>

新增屬性

autocomplete

autocomplete屬性可以在個(gè)別元素或整個(gè)表單上開(kāi)啟或關(guān)閉瀏覽器的自動(dòng)完成功能。當(dāng)用戶在字段開(kāi)始鍵入時(shí)，瀏覽器基于之前鍵入過(guò)的值，顯示出在字段中填寫的選項(xiàng)

autocomplete屬性適用form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

[注意]IE瀏覽器不支持該屬性，只有元素?fù)碛衝ame屬性，該屬性才有效

<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off">

autofocus

autofocus屬性規(guī)定在頁(yè)面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)

autofous屬性適用于button、input、keygen、select和textarea元素

<input name="test1">
<input name="test2" autofocus>

novalidate

novalidate屬性規(guī)定在提交表單時(shí)不驗(yàn)證form或input域

novalidate屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

[注意]IE9-瀏覽器不支持

height

height屬性用于規(guī)定Image類型的input標(biāo)簽的圖像高度

[注意]該屬性只適用于Image類型的input標(biāo)簽

width

width屬性用于規(guī)定Image類型的input標(biāo)簽的圖像寬度

[注意]該屬性只適用于Image類型的input標(biāo)簽

//http://127.0.0.1/form.html?test=123&x=38&y=57#
<form action="#">
    <input name="test">
    <input type="image" src="submit.jpg" width="99" height="99">
</form>

list

大多數(shù)輸入類型包含一個(gè)屬性list，它和一個(gè)新元素datalist結(jié)合使用，這個(gè)元素定義當(dāng)在表單控件輸入數(shù)據(jù)時(shí)可用的一個(gè)選項(xiàng)列表。datalist元素自身不會(huì)在頁(yè)面顯示，而是為其他元素的list屬性提供數(shù)據(jù)

list屬性適用于form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

[注意]IE9-瀏覽器及safari瀏覽器不支持

min

min屬性規(guī)定輸入域所允許的最大值

max

max屬性規(guī)定輸入域所允許的最小值

step

step屬性為輸入域規(guī)定合法的數(shù)字間隔

min、max、step屬性適用于以下類型的input元素:date pickers、number、range

<input type="number" min="0" max="10" step="0.5" value="6" />
<input type="range" min="0" max="10" step="0.5" value="6" />

multiple

multiple屬性規(guī)定按住ctrl按鍵，輸入字段可以選擇多個(gè)值

該屬性適用于type="email"和"file"的input元素

[注意]該屬性IE9-瀏覽器不支持

<button id="btn1">打開(kāi)文件多選</button>
<button id="btn2">關(guān)閉文件多選</button>
<br><br>
<input id="test" type="file" multiple>
<script>
btn1.onclick = function(){
    test.setAttribute('multiple','');
};
btn2.onclick = function(){
    test.removeAttribute('multiple');
};
</script>

pattern

pattern屬性規(guī)定用于驗(yàn)證input域的模式。模型pattern是正則表達(dá)式

pattern屬性適用于以下類型的input元素：text、search、url、tel、email、password

[注意]IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder

placeholder屬性提供占位符文字，描述輸入域所期待的值。占位符會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，在輸入域獲得焦點(diǎn)時(shí)消失

placeholder屬性適用于以下類型的input元素:text、search、url、tel、email、password

[注意]IE9-瀏覽器不支持

<form action="#">
    <input type="tel" placeholder="請(qǐng)輸入數(shù)字" pattern="\d{11}">    
    <input type="submit">
</form>

要修改placeholder的顏色需要使用::placeholder

::placeholder{color:green;}

required

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

required屬性適用于以下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkBox、radio、file

[注意]IE9-瀏覽器及safari瀏覽器不支持

<form action="#">
    <input required>    
    <input type="submit">
</form>

form

form屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單，form屬性必須和所屬表單的id

form屬性適用于所有input標(biāo)簽的類型，若需要引用一個(gè)以上的表單時(shí)，用空格分隔

[注意]IE瀏覽器不支持該屬性，只有元素?fù)碛衝ame屬性，該屬性才有效

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

表單重寫屬性

表單重寫屬性允許重寫form元素的某些屬性設(shè)定。其中，formnovalidate適用于button或input元素，而其他屬性適用于submit或reset的button或input元素

HTML 區(qū)塊►◄HTML 框架

精品免费在线观看-精品欧美-精品欧美成人bd高清在线观看-精品欧美高清不卡在线-精品欧美日韩一区二区

Html教程

HTML 表單

HTML 表單

HTML 表單 - 輸入元素

文本域

密碼字段

單選按鈕

復(fù)選框

提交按鈕

表單元素屬性

傳統(tǒng)屬性

name

type

accept

alt

checked

disabled

readonly

maxlength

size

src

value

新增屬性

autocomplete

autofocus

novalidate

height

width

list

min

max

step

multiple

pattern

placeholder

required

form

表單重寫屬性