?
This document uses PHP Chinese website manual Release
"text"類型的<input>元素 創(chuàng)建通用的單行文本字段。
<input type="text">
值 | 表示文本字段中包含的值的DOMString。 |
|---|---|
活動 | change 和 input |
支持的通用屬性 | autocomplete, list, maxlength, minlength, pattern, placeholder, required, size. |
IDL屬性 | value |
方法 | select（），setRangeText（），setSelectionRange（） |
例子
該value屬性包含一個DOMString表示文本字段中包含的值。您可以使用HTMLInputElement.valueJavaScript中的屬性來檢索它。
myTextInput.value;
如果輸入沒有驗證約束（請參閱驗證以獲取更多詳細(xì)信息），該值可以是文本字符串或空字符串（“”）。
使用文本輸入
text類型的<input>元素 用于創(chuàng)建通用的單行輸入 - 您應(yīng)該使用它們，無論您希望用戶輸入一個單行值，并沒有一個更好的輸入類型可用于收集該值（如果它是一個日期，網(wǎng)址，電子郵件或搜索詞，例如，你有更好的選擇）。
基本的例子
<form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name"> </div> <div> <button>Submit</button> </div> </form>
這呈現(xiàn)如下：
提交時，發(fā)送到服務(wù)器的數(shù)據(jù)鍵/值將是uname=Chris（如果在提交之前輸入“Chris”作為輸入值）。你必須記得name為你的輸入設(shè)置一個，否則什么都不會被提交。
設(shè)置占位符placeholders
你可以在你的文本輸入中提供一個有用的占位符，它可以給出使用該placeholder屬性輸入內(nèi)容的提示?？聪旅娴睦樱?/p>
<form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" placeholder="Lower case, all one word"> </div> <div> <button>Submit</button> </div> </form>
呈現(xiàn)如下：
物理輸入元素大小
輸入框的物理尺寸可以使用size屬性進(jìn)行控制。有了它，您可以指定文本輸入可以一次顯示的字符數(shù)。在這個例子中，例如，輸入寬度為30個字符：
<form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" placeholder="Lower case, all one word" size="30"> </div> <div> <button>Submit</button> </div> </form>
驗證
text類型的<input>元素 沒有應(yīng)用自動驗證，但有一些客戶端驗證選項可供他們使用，我們將在下面討論。
注意：HTML表單驗證 不能 取代服務(wù)器端腳本，以在被允許進(jìn)入數(shù)據(jù)庫之前確保輸入的數(shù)據(jù)格式正確。有人很容易調(diào)整HTML，使他們繞過驗證，或完全刪除它。也有人可能完全繞過你的HTML，直接提交數(shù)據(jù)到你的服務(wù)器。如果您的服務(wù)器端代碼無法驗證其接收到的數(shù)據(jù)，那么當(dāng)格式不正確的數(shù)據(jù)（或數(shù)據(jù)太大，類型錯誤等等）輸入到您的數(shù)據(jù)庫時，可能會導(dǎo)致災(zāi)難。
關(guān)于造型的說明
有效的偽類可用于有效/無效的表單元素 - :valid和:invalid。在本節(jié)中，我們將使用下面的CSS，它將在包含有效值的輸入旁邊進(jìn)行檢查（打勾），并在包含無效值的輸入旁邊放置一個十字。
div {
margin-bottom: 10px;
position: relative;}input + span {
padding-right: 30px;}input:invalid+span:after {
position: absolute; content: '?';
padding-left: 5px;}input:valid+span:after {
position: absolute;
content: '?';
padding-left: 5px;}The technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. This was necessary because some input types on some browsers don't display icons placed directly after them very well.
要求輸入
您可以使用該required屬性作為允許在提交表單之前輸入所需值的簡單方法：
<form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required> <span class="validity"></span> </div> <div> <button>Submit</button> </div> </form>
呈現(xiàn)如下：
如果您嘗試提交沒有輸入搜索詞的表單，瀏覽器將顯示一條錯誤消息。
輸入值長度
您可以使用minlength屬性為輸入的值指定最小字符長度; 同樣，maxlength用來設(shè)置輸入值的最大長度。
以下示例要求輸入的值為4-8個字符。
<form> <div> <label for="uname">Choose a username: </label> <input type="text" id="uname" name="name" required size="45" placeholder="Usernames must be 4-8 characters in length" minlength="4" maxlength="8"> <span class="validity"></span> </div> <div> <button>Submit</button> </div> </form>
呈現(xiàn)如下：
如果您嘗試提交少于4個字符的表單，則會給出相應(yīng)的錯誤消息（這在瀏覽器中會有所不同）。如果您嘗試輸入超過8個字符，瀏覽器將不會讓您。
格式驗證
如果要進(jìn)一步限制輸入的數(shù)字以使其必須符合指定的模式才是有效的，則可以使用該pattern屬性，該屬性將必須匹配的正則表達(dá)式的輸入值作為其值。。
下面的例子實際上要求輸入的值是4-8個字符的長度，不像以前的版本。
<form>
<div>
<label for="uname">Choose a username: </label>
<input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}">
<span class="validity"></span>
<p>Usernames must be lowercase and 4-8 characters in length.</p>
</div>
<div>
<button>Submit</button>
</div>
</form>div {
margin-bottom: 10px;
position: relative;}p {
font-size: 80%;
color: #999;}input + span {
padding-right: 30px;}input:invalid+span:after {
position: absolute;
content: '?';
padding-left: 5px;}input:valid+span:after {
position: absolute;
content: '?';
padding-left: 5px;}規(guī)范
規(guī)范 | 狀態(tài) | 評論 |
|---|---|---|
HTML生活標(biāo)準(zhǔn)在該規(guī)范中定義了'<input type ='text'>''。 | 生活水平 | 初始定義 |
HTML 5.1該規(guī)范中的<input type =“text”>“的定義。 | 建議 | 初始定義 |
瀏覽器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | 1.0 |
Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | iOS WebKit (Safari/Chrome/Firefox/etc) |
|---|---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 4.0 (4.0) | (Yes) | (Yes) | (Yes) |