HTML 表單

HTML 區塊►◄HTML 框架

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

HTML 表單

表單是一個包含表單元素的區域

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

表單使用表單標簽 <form> 來設置

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

HTML 表單 - 輸入元素

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

輸入類型是由類型屬性（type）定義的，大多數經常被用到的輸入類型如下

文本域

<input type="text"> 標簽定義了文本域

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域

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

瀏覽器顯示如下

注意: 表單本身并不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是 20 個字符

密碼字段

<input type="password"> 標簽定義了密碼字段

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

瀏覽器顯示如下

注意: 密碼字段字符不會明文顯示，而是以星號或圓點替代

單選按鈕

<input type="radio"> 標簽定義了表單單選框選項

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

瀏覽器顯示如下

復選框

<input type="checkBox"> 定義了復選框

用戶需要從若干給定的選擇中選取一個或若干選項

<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"> 定義了提交按鈕

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件

表單的動作屬性定義了目的文件的文件名

由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理

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

瀏覽器顯示如下

可以在上面的文本框內鍵入幾個字母，然后點擊確認按鈕

那么輸入數據會傳送到 "/dy/html/getpost" 的頁面，該頁面將顯示出輸入的結果

表單元素屬性

form元素只是一個數據獲取元素的容器，而容器內的元素稱為表單控件。最常用的表單控件是input元素

accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個屬性是input元素的傳統元素屬性

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

傳統屬性

name

name屬性用于規定input元素的名稱，用于對提交到服務器后的表單數據進行標識，或者在客戶端通過JavaScript引用表單數據

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

type

type屬性用來規定input元素的類型

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

accept

accept屬性用來規定能夠通過文件上傳進行提交的文件類型。理論上可以用來限制上傳文件類型，然而它只是建設性的，并很可能被忽略，它接受逗號分隔的MIME類型

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

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

alt

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

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

<input type="image" src="#" alt="測試圖片">

checked

checked屬性規定在頁面加載時應該被預先選定的input元素，也可以在頁面加載后，通過JavaScript進行設置

[注意]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屬性規定應該禁用input元素。被禁用的字段是不能修改的，也不可以使用tab按鍵切換到該字段，但可以選中或拷貝其文本

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

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

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

readonly

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

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

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

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

maxlength

maxlength屬性規定輸入字段的最大長度，以字符個數計

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

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

size

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

[注意]由于size屬性是一個可視化的設計屬性，推薦使用css來代替它

<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="測試圖片">
</form>

value

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

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

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

[注意2]value屬性無法與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屬性可以在個別元素或整個表單上開啟或關閉瀏覽器的自動完成功能。當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，顯示出在字段中填寫的選項

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

[注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效

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

autofocus

autofocus屬性規定在頁面加載時，域自動地獲得焦點

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

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

novalidate

novalidate屬性規定在提交表單時不驗證form或input域

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

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

height

height屬性用于規定Image類型的input標簽的圖像高度

[注意]該屬性只適用于Image類型的input標簽

width

width屬性用于規定Image類型的input標簽的圖像寬度

[注意]該屬性只適用于Image類型的input標簽

//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

大多數輸入類型包含一個屬性list，它和一個新元素datalist結合使用，這個元素定義當在表單控件輸入數據時可用的一個選項列表。datalist元素自身不會在頁面顯示，而是為其他元素的list屬性提供數據

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

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

min

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

max

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

step

step屬性為輸入域規定合法的數字間隔

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屬性規定按住ctrl按鍵，輸入字段可以選擇多個值

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

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

<button id="btn1">打開文件多選</button>
<button id="btn2">關閉文件多選</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屬性規定用于驗證input域的模式。模型pattern是正則表達式

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

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

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

placeholder

placeholder屬性提供占位符文字，描述輸入域所期待的值。占位符會在輸入域為空時顯示出現，在輸入域獲得焦點時消失

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

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

<form action="#">
    <input type="tel" placeholder="請輸入數字" pattern="\d{11}">    
    <input type="submit">
</form>

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

::placeholder{color:green;}

required

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

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屬性規定輸入域所屬的一個或多個表單，form屬性必須和所屬表單的id

form屬性適用于所有input標簽的類型，若需要引用一個以上的表單時，用空格分隔

[注意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效

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

表單重寫屬性

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

HTML 區塊►◄HTML 框架

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

Html教程

HTML 表單

HTML 表單

HTML 表單 - 輸入元素

文本域

密碼字段

單選按鈕

復選框

提交按鈕

表單元素屬性

傳統屬性

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

表單重寫屬性