免費(fèi)AI編程助手
HTML 表單輸入
HTML表單輸入
如果將type屬性設(shè)置為input元素的文本，瀏覽器將顯示單行文本框。
以下列表總結(jié)了可用于文本輸入元素類型的屬性。
- dirname - 控制文本方向性。
- list - 指定為此元素提供值的datalist元素的ID。
- maxlength - 指定用戶可以在文本框中輸入的最大字符數(shù)。
- pattern - 指定正則表達(dá)式模式以用于輸入驗(yàn)證。
- placeholder - 指定一個(gè)提示，告訴用戶您希望輸入的種類。
- readonly - 如果存在，此屬性使文本框?yàn)橹蛔x。
- required - 指定用戶必須輸入值以進(jìn)行輸入驗(yàn)證。
- size - 指定元素在文本框中可見的字符數(shù)中的寬度。
- value - 指定文本框的初始值。
文本輸入大小和最大長度
有兩個(gè)屬性對文本框的大小有影響。
maxlength 屬性指定用戶可以輸入的最大字符數(shù)，而 size 屬性指定文本框可以顯示的字符數(shù)。
對于這兩個(gè)屬性，字符數(shù)表示為正整數(shù)值。
以下代碼顯示了正在使用的這兩個(gè)屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input maxlength="10" id="name" name="name" />
</label>
</p>
<p>
<label for="city"> City:
<input size="10" id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit:
<input size="10" maxlength="10" id="fave" name="fave" />
</label>
<button type="submit">Submit Vote</button>
</p>
</form>
</body>
</html>第一個(gè)輸入元素具有值為10的maxlength屬性。
第二個(gè)輸入元素的size屬性的值為10.這意味著瀏覽器必須確保其大小的文本框，以便它可以顯示十個(gè)字符。
size屬性不會(huì)對用戶可以輸入的字符數(shù)量應(yīng)用任何限制。
第三個(gè)輸入元素具有兩個(gè)大小設(shè)置，效果是：固定屏幕上的大小，并限制用戶可以輸入的字符數(shù)。
文本輸入占位符和值
您可以使用value屬性指定默認(rèn)值，并使用placeholder屬性為用戶提供有用的提示。
以下代碼顯示了正在使用的這些屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name:
<input placeholder="Your name" id="name" name="name" />
</label>
</p>
<p>
<label for="city"> City:
<input placeholder="Where you live" id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit:
<input value="Apple" id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>當(dāng)您使用按鈕元素重置表單時(shí)，瀏覽器將恢復(fù)占位符和默認(rèn)值。
文本輸入數(shù)據(jù)列表
list屬性允許您指定datalist元素的id值，這將用于建議用戶可能的值。
對于 text 類型，值顯示為自動(dòng)完成建議。您可以通過選項(xiàng)元素指定要給用戶的值。
datalist可以有option元素。
option 元素可以具有局部屬性: disabled，selected，label，value 。
以下代碼顯示用于文本框創(chuàng)建一組值的datalist 和option元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input placeholder="Your name"
id="name" name="name" />
</label>
</p>
<p>
<label for="city"> City: <input placeholder="Where you live"
id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit: <input list="fruitlist" id="fave"
name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
<datalist id="fruitlist">
<option value="A" label="First" />
<option value="B">Second</option>
<option value="C"/>
</datalist>
</body>
</html> datalist 中包含的每個(gè)option元素表示要向用戶建議的值。
value屬性指定將在輸入元素中使用的數(shù)據(jù)值（如果選擇了該選項(xiàng)）。
您可以使用不同的label來描述該option，方法是使用label屬性或在選項(xiàng)元素中定義內(nèi)容。
文本輸入只讀和禁用
readonly和 disabled屬性允許您創(chuàng)建用戶無法編輯的文本框。每個(gè)都創(chuàng)建不同的視覺效果。
以下代碼使用readonly和disabled屬性。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="name"> Name: <input value="XML" disabled
id="name" name="name" />
</label>
</p>
<p>
<label for="city"> City: <input value="Boston" readonly
id="city" name="city" />
</label>
</p>
<p>
<label for="fave"> Fruit: <input id="fave" name="fave" />
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>來自輸入元素的數(shù)據(jù)（具有disabled屬性）不會(huì)提交到服務(wù)器。
輸入自動(dòng)對焦
您可以選擇在顯示表單時(shí)瀏覽器專注于哪個(gè)輸入元素。
以下代碼使用 autofocus 屬性設(shè)置自動(dòng)對焦輸入元素。
<!DOCTYPE HTML>
<html>
<body>
<form method="post" action="http://example.com/form">
<p>
<label for="fave">Fruit: <input autofocus id="fave"
name="fave" /></label>
</p>
<p>
<label for="name">Name: <input id="name" name="name" /></label>
</p>
<button>Submit Vote</button>
</form>
</body>
</html>您可以將 autofocus 屬性僅應(yīng)用于一個(gè)input元素。如果嘗試多次應(yīng)用元素，最后一個(gè)獲得焦點(diǎn)。
使用tabindex屬性設(shè)置制表順序
以下代碼顯示如何使用tabindex屬性設(shè)置Tabbing Order。
<html>
<head>
<title>Tabbing Order using the tabindex Attribute</title>
</head>
<body>
<form action="http://your server/" method="get" name="frmTabExample">
<input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br />
<input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br />
<input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br />
<input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br />
<input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br />
<input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br />
<input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven<br />
<input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br />
<input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br />
<input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
更多建議：