input 輸入框總結(jié)

`<input>` 標(biāo)簽屬性

accept - 文件選擇

定義
accept 屬性規(guī)定了可通過文件上傳提交的服務(wù)器接受的文件類型
注意
accept 屬性僅適用于 <input type="file">
提示
請不要將該屬性作為您的驗證工具。應(yīng)該在服務(wù)器上對文件上傳進(jìn)行驗證
語法

<input accept="audio/*|video/*|image/*|MIME_type">
<!--  提示：如需規(guī)定多個值，請使用逗號分隔（比如 <input accept="audio/*,video/*,image/*" />） -->

實例

<form action="demo_form.php">
    <input type="file" name="test-1" accept="audio/*"> <!-- 接受所有的聲音文件 -->
    <input type="file" name="test-2" accept="video/*"> <!-- 接受所有的視頻文件 -->
    <input type="file" name="test-3" accept="image/*"> <!-- 接受所有的圖像文件 -->
    <input type="file" name="test-4" accept="MIME_type"> <!-- 一個有效的 MIME 類型，不帶參數(shù) -->
</form>

alt - 圖像替代文本

定義
alt 屬性為用戶由于某些原因（比如網(wǎng)速太慢、src 屬性中的錯誤、瀏覽器禁用圖像狸相、用戶使用的是屏幕閱讀器）無法查看圖像時提供了替代文本
注意
alt 屬性只能與 <input type="image" name="test"> 配合使用
語法

<input alt="text">
<!-- text 規(guī)定圖像的替代文本 -->

實例

<form action="demo_form.php">
    <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

autocomplete - 顯示歷史紀(jì)錄下拉框

定義
autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能
自動完成允許瀏覽器預(yù)測對字段的輸入。當(dāng)用戶在字段開始鍵入時捐川，瀏覽器基于之前鍵入過的值脓鹃，應(yīng)該顯示出在字段中填寫的選項
注意
必須有 name 屬性
autocomplete 屬性適用于下面的 <input> 類型：text、search古沥、url瘸右、tel、email岩齿、password太颤、datepickers、range 和 color
提示
所有主流瀏覽器都支持 autocomplete 屬性
在某些瀏覽器中盹沈，您可能需要手動啟用自動完成功能（在瀏覽器菜單的"參數(shù)設(shè)置"中進(jìn)行設(shè)置）
語法

<input autocomplete="on|off">
<!-- on 默認(rèn)龄章。規(guī)定啟用自動完成功能 -->
<!-- off 規(guī)定禁用自動完成功能 -->

實例

<form action="demo_form.html" autocomplete="on">
    <input type="text" name="test-1"><br>
    <input type="text" name="test-2" autocomplete="off"><br>
    <input type="submit" name="test">
</form>

autofocus - 自動獲取焦點

定義
autofocus 屬性是一個布爾屬性
autofocus 屬性規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點
語法

<input autofocus>

實例

<form action="demo_form.html">
    First name: <input type="text" name="fname" autofocus><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit">
</form>

checked - 默認(rèn)選項

定義
checked 屬性是一個布爾屬性
checked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的 <input> 元素。
checked 屬性適用于 <input type="checkbox"> 和 <input type="radio">
checked 屬性也可以在頁面加載后，通過 JavaScript 代碼進(jìn)行設(shè)置
語法

<input checked>

實例

<form action="demo_form.php" method="get">
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
    <input type="submit" value="提交">
</form>

disabled - 禁用

定義
disabled 屬性是一個布爾屬性
disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素
被禁用的 input 元素是無法使用和無法點擊的
disabled 屬性進(jìn)行設(shè)置瓦堵，使用戶在滿足某些條件時（比如選中復(fù)選框基协，等等）才能使用 <input> 元素。然后菇用，可使用 JavaScript 來刪除 disabled 值澜驮，使該 <input> 元素變?yōu)榭捎玫臓顟B(tài)
注意
disabled 屬性不適用于 <input type="hidden">
提示
表單中被禁用的 <input> 元素不會被提交
語法

<input disabled>

實例

<form action="demo_form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname" disabled><br>
    <input type="submit" value="提交">
</form>

form - 表單

定義
form 屬性規(guī)定 <input> 元素所屬的一個或多個表單
注意
IE 不支持 form 屬性
語法

<input form="form_id">
<!-- form_id: 規(guī)定 <input> 元素所屬的一個或多個表單的 id 列表，以空格分隔 -->

實例

<form action="demo-form.php" id="form1">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
</form>

<p> "Last name" 字段沒有在 form 表單之內(nèi)惋鸥，但它也是 form 表單的一部分</p>

Last name: <input type="text" name="lname" form="form1">

formaction - 當(dāng)表單提交時處理輸入控件的文件的 URL

定義
formaction 屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL
formaction 屬性覆蓋 <form> 元素的 action 屬性
注意
formaction 屬性只適用于 type="submit" 和 type="image"
語法

<input formaction="URL">

實例

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formaction="demo-admin.php" value="提交">
</form>

formenctype - 當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼

定義
Internet Explorer 10杂穷、Firefox、Opera卦绣、Chrome 和 Safari 支持 formenctype 屬性
注意
Internet Explorer 9 及之前的版本不支持 <input> 標(biāo)簽的 formenctype 屬性
語法

<input formenctype="value">

實例

<form action="demo-post-enctype.php" method="post">
    First name: <input type="text" name="fname"><br>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

formmethod - 發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法

定義
formmethod 屬性定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法
formmethod 屬性覆蓋 <form> 元素的 method 屬性
注意
formmethod 屬性與 type="submit" 和 type="image" 配合使用
提示
表單數(shù)據(jù)可被作為 URL 變量的形式來發(fā)送（method="get"）或者作為 HTTP post 事務(wù)的形式來發(fā)送（method="post"）
語法

<input formmethod="get|post">

實例

<form action="demo-form.php" method="get">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

formnovalidate - 表單提交不驗證

定義
novalidate 屬性是一個布爾屬性
novalidate 屬性規(guī)定當(dāng)表單提交時 <input> 元素不進(jìn)行驗證
formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性 (表單提交驗證)
注意
formnovalidate 屬性可與 type="submit" 配合使用
語法

<input formnovalidate="formnovalidate">
<!-- formnovalidate 屬性是一個布爾屬性耐量，且可通過下面的方式進(jìn)行設(shè)置 -->
<!-- <input formnovalidate> -->
<!-- <input formnovalidate="formnovalidate"> -->
<!-- <input formnovalidate=""> -->

實例

<form action="demo-form.php">
    E-mail: <input type="email" name="userid"><br>
    <input type="submit" value="提交"><br>
    <input type="submit" formnovalidate="formnovalidate" value="不驗證提交">
</form>

formtarget - 提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞

定義
formtarget 屬性規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞
formtarget 屬性覆蓋 <form> 元素的 target 屬性
注意
formtarget 屬性可以與 type="submit" 和 type="image" 配合使用
語法

<input formtarget="_blank|_self|_parent|_top|framename">
<!-- _blank 在新窗口/選項卡中顯示響應(yīng) -->
<!-- _self 在同一框架中顯示響應(yīng)（默認(rèn)） -->
<!-- _parent 在父框架中顯示響應(yīng) -->
<!-- _top 在整個窗口中顯示響應(yīng) -->
<!-- framename 在指定的 iframe 中顯示響應(yīng) -->

實例

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一個新的頁面上">
</form>

height - `<input>`元素的高度

定義
height 屬性規(guī)定 <input> 元素的高度
注意
height 屬性只適用于 <input type="image">
提示
為圖片指定 height 和 width 屬性是一個好習(xí)慣。如果設(shè)置了這些屬性滤港，當(dāng)頁面加載時會為圖片預(yù)留需要的空間廊蜒。而如果沒有這些屬性，則瀏覽器就無法了解圖像的尺寸溅漾，也就無法為其預(yù)留合適的空間山叮。情況是當(dāng)頁面和圖片加載時，頁面布局會發(fā)生變化
語法

<input height="pixels">
<!-- pixels 以像素計的高度（比如 height="100"） -->

實例

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

list - 下拉框

定義
list 屬性引用 <datalist> 元素添履，其中包含 <input> 元素的預(yù)定義選項
注意
Safari 或者 Internet Explorer 9 及之前的版本不支持 <input> 標(biāo)簽的 list 屬性
語法

<input list="datalist_id">
<!-- datalist_id 規(guī)定綁定到 <input> 元素的 datalist 的 id -->

實例

<form action="demo-form.php" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

max - 最大值

定義
max 屬性規(guī)定 <input> 元素的最大值
注意
max 和 min 屬性適用于以下 input 類型：number屁倔、range、date暮胧、datetime锐借、datetime-local、month往衷、time 和 week
提示
max 屬性與 min 屬性配合使用钞翔，可創(chuàng)建合法值范圍
語法

<input max="number|date">
<!-- number 數(shù)字值。規(guī)定輸入字段允許的最大值 -->
<!-- date 日期炼绘。規(guī)定輸入字段允許的最大值 -->

實例

<form action="demo-form.php">

    輸入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>

    輸入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>

    數(shù)量 (在1和5之間):
    <input type="number" name="quantity" min="1" max="5"><br>

    <input type="submit">
</form>

maxlength - 允許的最大字符數(shù)

定義
maxlength 屬性規(guī)定 <input> 元素中允許的最大字符數(shù)
注意
type 為 number 時, maxlength 無效, 可用以下方式解決

<input type="number" oninput="if (value.length > 5) value = value.slice(0, 5)" />

vue 事件監(jiān)聽

<input type="number" v-on:input="inputVal" />

語法

<input maxlength="number">
<!-- number 在 <input> 元素中允許的最大字符數(shù) -->

實例

<form action="demo_form.php">
    Username: <input type="text" name="usrname" maxlength="10"><br>
    <input type="submit" value="提交">
</form>

min - 最小值

定義
min 屬性規(guī)定 <input> 元素的最小值
注意
max 和 min 屬性適用于以下 input 類型：number嗅战、range、date俺亮、datetime、datetime-local疟呐、month脚曾、time 和 week
提示
min 屬性與 max 屬性配合使用，可創(chuàng)建合法值范圍
語法

<input min="number|date">
<!-- number 數(shù)字值启具。規(guī)定輸入字段允許的最小值 -->
<!-- date 日期本讥。規(guī)定輸入字段允許的最小值 -->

實例

<form action="demo-form.php">

    輸入 1980-01-01 之前的日期:
    <input type="date" name="bday" max="1979-12-31"><br>

    輸入 2000-01-01 之后的日期:
    <input type="date" name="bday" min="2000-01-02"><br>

    數(shù)量 (在1和5之間):
    <input type="number" name="quantity" min="1" max="5"><br>

    <input type="submit">
</form>

multiple - 可選擇多個文件

定義
multiple 屬性是一個布爾屬性
multiple 屬性規(guī)定允許用戶輸入到 <input> 元素的多個值
注意
multiple 屬性適用于以下 input 類型：email 和 file
語法

<input multiple>

實例

<form action="demo-form.php">
    選擇圖片: <input type="file" name="img">
    <input type="submit">
</form>

name - `<input>` 元素名稱

定義
name 屬性規(guī)定 <input> 元素的名稱
name 屬性用于在 JavaScript 中引用元素，或者在表單提交后引用表單數(shù)據(jù)
注意
只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值
語法

<input name="text">
<!-- text 規(guī)定 <input> 元素的名稱 -->

實例

<form action="demo_form.php">
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email"><br>
    <input type="submit" value="提交">
</form>

pattern - 正則表達(dá)式

定義
pattern 屬性規(guī)定用于驗證 <input> 元素的值的正則表達(dá)式
注意
pattern 屬性適用于下面的 input 類型：text热某、search宋列、url丑孩、tel翠勉、email 和 password
提示
請使用全局的 title 屬性來描述模式以幫助用戶
語法

<input pattern="regexp">
<!-- regexp 規(guī)定用于驗證 <input> 元素的值的正則表達(dá)式 -->

實例

<form action="demo-form.php">
    Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>

placeholder - 輸入提示信息

定義
placeholder 屬性規(guī)定可描述輸入字段預(yù)期值的簡短的提示信息（比如：一個樣本值或者預(yù)期格式的短描述）
該提示會在用戶輸入值之前顯示在輸入字段中
注意
placeholder 屬性適用于下面的 input 類型：text洋侨、search炎咖、url厕吉、tel受扳、email 和 password
提示
可通過 CSS 設(shè)置顏色
語法

<input placeholder="text">
<!-- text 規(guī)定可描述輸入字段預(yù)期值的簡短的提示信息 -->

實例

<form action="demo-form.php">
    <input type="text" name="fname" placeholder="First name"><br>
    <input type="text" name="lname" placeholder="Last name"><br>
    <input type="submit" value="提交">
</form>

<style>
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #909;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #909;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #909;
}
</style>

readonly - 輸入字段只讀

定義
readonly 屬性是一個布爾屬性
readonly 屬性規(guī)定輸入字段是只讀的
注意
只讀字段是不能修改的序无。不過验毡，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本
readonly 屬性可以防止用戶對值進(jìn)行修改帝嗡，直到滿足某些條件為止（比如選中了一個復(fù)選框）晶通。然后，需要使用 JavaScript 消除 readonly 值哟玷，將輸入字段切換到可編輯狀態(tài)
只針對 input(text / password)和 textarea 有效
語法

<input readonly>

實例

<form action="demo_form.php">
    Email: <input type="text" name="email"><br>
    Country: <input type="text" name="country" value="Norway" readonly><br>
    <input type="submit" value="提交">
</form>

required - 必需在提交表單之前填寫輸入字段

定義
required 屬性是一個布爾屬性
required 屬性規(guī)定必需在提交表單之前填寫輸入字段
注意
required 屬性適用于下面的 input 類型：text狮辽、search、url巢寡、tel隘竭、email、password讼渊、date pickers动看、number、checkbox爪幻、radio 和 file
語法

<input required>

實例

<form action="demo-form.php">
    Username: <input type="text" name="usrname" required>
    <input type="submit">
</form>

size - `<input>` 元素寬度

定義
size 屬性規(guī)定以字符數(shù)計的 <input> 元素的可見寬度
注意
size 屬性適用于下面的 input 類型：text菱皆、search、tel挨稿、url仇轻、email 和 password
提示
如需規(guī)定 <input> 元素中允許的最大字符數(shù)，請使用 maxlength 屬性
語法

<input size="number">
<!-- number 規(guī)定以字符數(shù)計的 <input> 元素的寬度奶甘。默認(rèn)值是 20 -->

實例

<form action="demo_form.php">
    Email: <input type="text" name="email" size="35"><br>
    PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
    <input type="submit" value="提交">
</form>

src - 圖像 URL

定義
src 屬性規(guī)定顯示為提交按鈕的圖像的 URL
注意
src 屬性對于 <input type="image"> 是必需的屬性篷店，且只能與 <input type="image"> 配合使用
語法

<input src="URL">
<!-- URL 規(guī)定作為提交按鈕來使用的圖像的 URL -->

實例

<form action="demo_form.php">
    First name: <input type="text" name="fname"><br>
    <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

step - 合法數(shù)字間隔

定義
step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔
實例：如果 step="3"，則合法數(shù)字應(yīng)該是 -3臭家、0疲陕、3、6钉赁，以此類推
注意
step 屬性適用于下面的 input 類型：number蹄殃、range、date你踩、datetime诅岩、datetime-local讳苦、month、time 和 week
提示
step 屬性可以與 max 和 min 屬性配合使用吩谦，以創(chuàng)建合法值的范圍
語法

<input step="number">
<!-- number 規(guī)定輸入字段的合法數(shù)字間隔 -->

實例

<form action="demo-form.php">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>

type - `<input>` 元素的類型

定義
type 屬性規(guī)定要顯示的 <input> 元素的類型
默認(rèn)類型是：text
提示
該屬性不是必需的鸳谜，但是我們認(rèn)為您應(yīng)該始終使用它
語法

<input type="value">
<!-- value 輸入 <input> 元素的類型 -->

實例

<form action="demo-form.php">
    普通按鈕: <input type="button" value="確認(rèn)" name="type-1"><br>
    復(fù)選框: <input type="checkbox" name="type-2"><br>
    拾色器: <input type="color" name="type-3"><br>
    日期 (年月日): <input type="date" name="type-4"><br>
    日期+時間 (基于 UTC 時區(qū), 需配合JS): <input type="datetime" name="type-5"><br>
    日期+時間 (不帶時區(qū)): <input type="datetime-local" name="type-6"><br>
    郵箱: <input type="email" name="type-7"><br>
    選擇文件: <input type="file" name="type-8"><br>
    隱藏輸入字段: <input type="hidden" name="type-9"><br>
    圖像作為提交按鈕: <input type="image" src="http://www.baidu.com/img/bd_logo1.png?qua=high" width="80" name="type-10"><br>
    日期 (年月): <input type="month" name="type-11"><br>
    數(shù)字: <input type="number" name="type-12"><br>
    密碼: <input type="password" name="type-13"><br>
    單選: <input type="radio" name="type-14"><br>
    滑動條: <input type="range" min="1" max="10" name="type-15"><br>
    重置按鈕: <input type="reset" name="type-16"><br>
    搜索框 (可清空): <input type="search" name="type-17"><br>
    提交按鈕: <input type="submit" name="type-18"><br>
    電話號碼: <input type="tel" name="type-19"><br>
    單行的文本 (默認(rèn), 寬度為20字符): <input type="text" name="type-20"><br>
    時間: <input type="time" name="type-21"><br>
    輸入 URL: <input type="url" name="type-22"><br>
    年+周: <input type="week" name="type-23"><br>
</form>

value - `<input>` 元素 value 的值

定義
value 屬性規(guī)定 <input> 元素的值
value 屬性對于不同 input 類型，用法也不同：
- 對于 "button"式廷、"reset"咐扭、"submit" 類型 - 定義按鈕上的文本
- 對于 "text"、"password"懒棉、"hidden" 類型 - 定義輸入字段的初始（默認(rèn)）值
- 對于 "checkbox"草描、"radio"、"image" 類型 - 定義與 input 元素相關(guān)的值策严，當(dāng)提交表單時該值會發(fā)送到表單的 action URL
注意
value 屬性對于 <input type="checkbox"> 和 <input type="radio"> 是必需的
value 屬性不適用于 <input type="file">
語法

<input value="text">
<!-- text 規(guī)定 <input> 元素的值 -->

實例

<form action="demo_form.php">
    First name: <input type="text" name="fname" value="John"><br>
    Last name: <input type="text" name="lname" value="Doe"><br>
    <input type="submit" value="提交表單">
</form>

width - `<input>` 元素的寬度 (只針對type="image")

定義
width 屬性規(guī)定 <input> 元素的寬度
注意
width 屬性只適用于 <input type="image">
提示
為圖片指定 height 和 width 屬性是一個好習(xí)慣穗慕。如果設(shè)置了這些屬性，當(dāng)頁面加載時會為圖片預(yù)留需要的空間妻导。而如果沒有這些屬性逛绵，則瀏覽器就無法了解圖像的尺寸，也就無法為其預(yù)留合適的空間倔韭。情況是當(dāng)頁面和圖片加載時术浪，頁面布局會發(fā)生變化
語法

<input width="pixels">
<!-- pixels 以像素計的寬度（比如 width="100"） -->

實例

<form action="demo-form.php">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>

總結(jié)

readonly 和 disabled 比較

相同點
- 都是禁止修改表單內(nèi)容
不同點
- readonly 只針對 input (text/password)和 textarea 有效，而 disabled 對于 (除了<input type="hidden">) 以外的所有的表單元素有效寿酌，包括select,radio,checkbox,button等
- readonly 輸入框默認(rèn)背景為白色, disabled 輸入框默認(rèn)背景為灰色

type="tel" 和 type="number" 比較

相同點
- 在移動端中都能喚起系統(tǒng)的數(shù)字鍵盤, 方便輸入
不同點
- type="number" 只能輸入 數(shù)字 胰苏、+ 、 - 醇疼、 . 等, 而 type="tel" 沒有這些限制
- 注: 只能輸入數(shù)字可以直接用 <input type="number"> 進(jìn)行判斷, 它可以寫小數(shù), 但對于IOS好像不太友好; <input type="tel" min="0" maxlength="10"> 兼容IOS, 但不能輸入小數(shù), 而且只能對H5移動端有效

最后編輯于：2019.12.10 17:01:30

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末硕并，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子秧荆，更是在濱河造成了極大的恐慌倔毙，老刑警劉巖，帶你破解...
沈念sama閱讀 212,454評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件乙濒，死亡現(xiàn)場離奇詭異陕赃，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)颁股，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,553評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門么库，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人豌蟋，你說我怎么就攤上這事廊散。” “怎么了梧疲？”我有些...
開封第一講書人閱讀 157,921評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵允睹，是天一觀的道長。經(jīng)常有香客問我幌氮，道長缭受，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,648評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任该互，我火速辦了婚禮米者，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘宇智。我一直安慰自己蔓搞，他們只是感情好，可當(dāng)我...
茶點故事閱讀 65,770評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布随橘。她就那樣靜靜地躺著喂分，像睡著了一般。火紅的嫁衣襯著肌膚如雪机蔗。梳的紋絲不亂的頭發(fā)上蒲祈，一...
開封第一講書人閱讀 49,950評論 1贊 291
城市分裂傳說
那天，我揣著相機(jī)與錄音萝嘁，去河邊找鬼梆掸。笑死，一個胖子當(dāng)著我的面吹牛牙言，可吹牛的內(nèi)容都是我干的酸钦。我是一名探鬼主播，決...
沈念sama閱讀 39,090評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼咱枉，長吁一口氣：“原來是場噩夢啊……” “哼卑硫！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起庞钢，我...
開封第一講書人閱讀 37,817評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤拔恰，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后基括，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體颜懊，經(jīng)...
沈念sama閱讀 44,275評論 1贊 303
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 36,592評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年风皿，在試婚紗的時候發(fā)現(xiàn)自己被綠了河爹。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,724評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡桐款，死狀恐怖咸这，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情魔眨，我是刑警寧澤媳维，帶...
沈念sama閱讀 34,409評論 4贊 333
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布酿雪，位于F島的核電站，受9級特大地震影響侄刽，放射性物質(zhì)發(fā)生泄漏指黎。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 40,052評論 3贊 316
男人毒藥：我在死后第九天來索命
文/蒙蒙一州丹、第九天我趴在偏房一處隱蔽的房頂上張望醋安。院中可真熱鬧，春花似錦墓毒、人聲如沸吓揪。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,815評論 0贊 21
一樁弒父案所计，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽柠辞。三九已至，卻和暖如春醉箕，著一層夾襖步出監(jiān)牢的瞬間钾腺，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,043評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工讥裤，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留放棒，地道東北人。一個月前我還...
沈念sama閱讀 46,503評論 2贊 361
代替公主和親
正文我出身青樓己英，卻偏偏與公主長得像间螟，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子损肛，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 43,627評論 2贊 350

input 輸入框總結(jié)

<input> 標(biāo)簽屬性

accept - 文件選擇

alt - 圖像替代文本

autocomplete - 顯示歷史紀(jì)錄下拉框

autofocus - 自動獲取焦點

checked - 默認(rèn)選項

disabled - 禁用

form - 表單

formaction - 當(dāng)表單提交時處理輸入控件的文件的 URL

formenctype - 當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼

formmethod - 發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法

formnovalidate - 表單提交不驗證

formtarget - 提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞

height - <input>元素的高度

list - 下拉框

max - 最大值

maxlength - 允許的最大字符數(shù)

min - 最小值

multiple - 可選擇多個文件

name - <input> 元素名稱

pattern - 正則表達(dá)式

placeholder - 輸入提示信息

readonly - 輸入字段只讀

required - 必需在提交表單之前填寫輸入字段

size - <input> 元素寬度

src - 圖像 URL

step - 合法數(shù)字間隔

type - <input> 元素的類型

value - <input> 元素 value 的值

width - <input> 元素的寬度 (只針對type="image")

總結(jié)

readonly 和 disabled 比較

type="tel" 和 type="number" 比較

推薦閱讀更多精彩內(nèi)容

`<input>` 標(biāo)簽屬性

height - `<input>`元素的高度

name - `<input>` 元素名稱

size - `<input>` 元素寬度

type - `<input>` 元素的類型

value - `<input>` 元素 value 的值

width - `<input>` 元素的寬度 (只針對type="image")