nput框作為一個簡單的輸入框,你對它的屬性知道有多少？
常見的屬性（帶new為h5新增屬性）:

1、accept：accept 屬性規(guī)定了可通過文件上傳提交的服務(wù)器接受的文件類型。僅用于input的type類型為"file"的時候。

屬性值：

audio/*，音頻

video/* ，視頻

image/* ，圖片

MIME_type，一個有效的 MIME 類型，不帶參數(shù)

  <input type="file" name="pic" accept="image/*" />

// 如需規(guī)定多個值，請使用逗號分隔

<input  type="file" accept="audio/*,video/*,image/*" />

2、value：指定元素的value值。

屬性值：text

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="文本" />

3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

屬性值：text

<input type="text" name="email" />

4、size：輸入框的長度大小。

屬性值：number

<input type="text" name="email" size="35" />

注意：size 屬性適用于下面的 input 類型：text、search、tel、url、email 和 password。

5、maxlength：輸入框中允許輸入字符的最大數(shù)。

屬性值：number

<input type="text" name="usrname" maxlength="10" />

6、readonly：表示該框中只能顯示，不能添加修改。

<input type="text" name="country" value="中國" readonly />

7、required（new）：屬性規(guī)定必須在提交表單之前填寫輸入字段。

 <input type="text" name="username" required />

8、alt：定義圖像輸入的替代文本。 (只針對type="image")

屬性值：text

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

9、autocomplete（new）：autocomplete 屬性規(guī)定輸入字段是否應(yīng)該啟用自動完成功能。

屬性值：on/off，默認(rèn)啟動自動完成功能。

<input autocomplete="off" />

注意：autocomplete 屬性適用于下面的 <input> 類型：text、search、url、tel、email、password、datepickers、range 和 color。

10、autofocus（new）：屬性規(guī)定當(dāng)頁面加載時 <input> 元素應(yīng)該自動獲得焦點。

屬性值：autofocus

<input type="text"  autofocus />

11、checked：checked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的 <input> 元素。 (只針對 type="checkbox" 或者 type="radio")

屬性值：checked

<input type="checkbox" name="vehicle" value="Car" checked />小汽車

12、disabled：disabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。

屬性值：disabled

<input type="text" name="lname" disabled />

13、form（new）: form 屬性規(guī)定 <input> 元素所屬的一個或多個表單。

位于 form 表單外的輸入字段（但仍然屬于 form 表單的一部分）：

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

14、formaction（new）:屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")

屬性值：URL

<input type="submit" formaction="demo-admin.php" value="提交" />

注意：

formaction 屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。

formaction 屬性覆蓋 <form> 元素的 action 屬性。

15、formenctype（new）：屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼(只適合 type="submit" 和 type="image")。

屬性值：application/x-www-form-urlencoded ；multipart/form-data text/plain

<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />

注意：

formenctype 屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼（僅適用于 method="post" 的表單）。

formenctype 屬性覆蓋 <form> 元素的 enctype 屬性。

16、formmethod （new）：定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")

屬性值：get / post

<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />

17、formnovalidate（new）：formnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。

屬性值：formnovalidate

<input type="submit" formnovalidate="formnovalidate" value="不驗證提交">

18、formtarget （new）:規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")

屬性值：_blank； _self； _parent； _top； framename

<input type="submit" formtarget="_blank" value="提交到一個新的頁面上">

19、height （new）;width（new）:屬性規(guī)定 <input> 元素的高度和寬度。 (只針對type="image")

屬性值：pixels

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />

20、max （new）;min（new）:屬性規(guī)定 <input> 元素的最大值和最小值。

屬性值：number；date

 <input type="date" name="bday" max="1979-12-31">
  <input type="date" name="bday" min="2000-01-02">  
<input type="number" name="quantity" min="1" max="5">

21、multiple （new）：屬性規(guī)定允許用戶輸入到 <input> 元素的多個值。

屬性值：multiple

<input type="file" name="img" multiple>

注意：multiple 適用于以下 input 類型：email 和 file。

22、pattern （new）：pattern 屬性規(guī)定用于驗證 <input> 元素的值的正則表達式。

屬性值：regexp;

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

23、placeholder （new）： 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡短的提示信息 。

屬性值：text

<input placeholder="請輸入姓名" />

24、src : src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")

屬性值：URL

<input type="image" src="submit.gif" alt="Submit" />

25、step （new）: step 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。

屬性值：number

<input type="number" name="points" step="3">

26、list（new） :屬性引用 <datalist> 元素，其中包含 <input> 元素的預(yù)定義選項。

屬性值：datalist_id

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

27、type: type 屬性規(guī)定要顯示的 <input> 元素的類型。

屬性值：button；checkbox；color；date；datetime；datetime-local；email；file；hidden；image；month；number；password；radio；range；reset；search；submit；tel；text；time；url；week

type的屬性值眾多，也是用的比較多的一個。

button：定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。

checkbox：定義復(fù)選框。

color（new）：定義拾色器。

date（new）：定義 date 控件（包括年、月、日，不包括時間）。

datetime（new）：定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基于 UTC 時區(qū)）。

datetime-local（new）：定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區(qū)）。

email（new）：定義用于 e-mail 地址的字段。file定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。

hidden：定義隱藏輸入字段。

image：定義圖像作為提交按鈕。

month（new）：定義 month 和 year 控件（不帶時區(qū)）。

number（new）：定義用于輸入數(shù)字的字段。

password：定義密碼字段（字段中的字符會被遮蔽）。

radio：定義單選按鈕。

range（new）：定義用于精確值不重要的輸入數(shù)字的控件（比如 slider 控件）。

reset：定義重置按鈕（重置所有的表單值為默認(rèn)值）。

search（new）：定義用于輸入搜索字符串的文本字段。

submit：定義提交按鈕。

tel（new）：定義用于輸入電話號碼的字段。

text：默認(rèn)。定義一個單行的文本字段（默認(rèn)寬度為 20 個字符）。

time（new）：定義用于輸入時間的控件（不帶時區(qū)）。

url（new）：定義用于輸入 URL 的字段。

week（new）：定義 week 和 year 控件（不帶時區(qū)）。

站開發(fā)入門指南：表單相關(guān)標(biāo)簽們。

接下來我們來學(xué)習(xí)一下表單以及相關(guān)的元素。

·表單其實英文是叫做fo.rm，在我們平時使用的這種互聯(lián)網(wǎng)產(chǎn)品中包括網(wǎng)站也好、app也好，經(jīng)常會看到這種需要你去填一些資料、填一些文字、填一些數(shù)據(jù)的這樣一種頁面。像這種頁面其實都是通過表單以及表單的元素去構(gòu)成、去實現(xiàn)的。

也就是說表單其實是用來收集用戶數(shù)據(jù)的，它是給用戶去輸入一些數(shù)據(jù)的。而且輸入完之后，一般它是要跟服務(wù)器去發(fā)生一些交互的。就是比如說把數(shù)據(jù)發(fā)送到服務(wù)器或者在本地處理過后，再給到服務(wù)器去進一步的處理或者去保存。所以其實表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實很多時候是要跟js打交道的。所以目前來說只要簡單的去了解一下表單的元素的基本使用就可以了。

·然后后面學(xué)了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關(guān)的元素有哪些？表單主要是有一個這樣一個表單本身的標(biāo)簽，另外這些就是跟它相關(guān)的一些標(biāo)簽元素了。這些元素一般都是放在這個for.m元素里面的嵌套在它里面的。

但是表單的元素，它跟我們之前學(xué)過的ul li-olli一定要進行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個和這個是經(jīng)常可以單獨使用的，也就是說不用嵌套在這個form表單里面也是可以用的。所以要明白這些表單內(nèi)的元素，如果你有需要是完全可以去獨立的去使用它的，并不一定要跟這個for.m.搭.配起來嵌套在它里面的。

·很多時候去使用form這樣的標(biāo)簽。然后把這些表單的元素嵌套在里面。它其實主要的一個目的，它是為了讓這些就是收集到的數(shù)據(jù)組成一種結(jié)構(gòu)化的一種模式，結(jié)構(gòu)化的一種狀態(tài)。這樣發(fā)送到服務(wù)器，服務(wù)器也可以通過這種更好的結(jié)構(gòu)去讀取數(shù)據(jù)。

所以目前的學(xué)習(xí)階段來講是沒有辦法給你去展示表單的作用。但是等你學(xué)到JS之后，你在有了這些基礎(chǔ)知識之后，就能通過JS其實非常清晰看到它的整個數(shù)據(jù)結(jié)構(gòu)。這節(jié)課主要是來講一講這個標(biāo)簽，這個標(biāo)簽其實會經(jīng)常單獨的來進行使用。這個標(biāo)簽之前也簡單的給大家去演示過，它是一個用來做這種文字輸入的標(biāo)簽。

很多時候，像這種真實的產(chǎn)品頁面，產(chǎn)品里面會發(fā)現(xiàn)很多的輸入欄都是用這個標(biāo)簽去實現(xiàn)。打開開發(fā)者工具之后，可以看到這里有一個這樣的小工具，選用它之后就可以去快速的定位到元素?？梢钥吹剿@邊有個input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁面上的輸入框其實都是用input元素來實現(xiàn)的。

input非常重要的屬性叫做type，type屬性之前演示過一個叫text(的值)，一個叫Checkbox，給大家演示過。這兩個設(shè)置之后是會產(chǎn)生不同的效果。這種能設(shè)置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。

這里主要是介紹一個是這個之前講過的，給大家簡單也再看一下。一個是checkbox，一個是checkbox，還有一個file，其他的。

還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡單，直接默認(rèn)的text它這邊，這邊先把它放大一點，放五倍大，大家看起來清楚一點。這樣就可以在這里輸入這樣一個內(nèi)容了，非常簡單。

然后比如這里改成password，然后這邊輸入的東西自動的就變成這種小圓點了，就相當(dāng)于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡簡單演示過了checkbox會變成這種勾選的框，它有一個屬性，如果你使用的checkbooks這樣的類型，你可以使用這個checked這樣的屬性，就讓元素默認(rèn)是打勾(選中)的狀態(tài)。

像這種東西其他的前面一般都會有一個文字，告訴你這個選項是什么，然后這里把這個改一下，就叫做選擇。想學(xué)習(xí)的語言其實一定是可以多選的。這里來一個寫一個span，叫做js好html，然后自己再多復(fù)制幾個，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。

但是其實在表單元素里面有一個標(biāo)簽叫做lab.el。label其實一般用來寫這種，就是告訴這個選項是什么樣的一個選項，這樣的一些文字。label有個特殊的作用，比如說把這個換成label，label之后這里有一個屬性叫做for，for可以去跟比如說input，這里設(shè)計一個id叫做html。

稍微跟寫的不一樣，這個其實寫一樣也沒有關(guān)系，但是這里寫不一樣，大家可能更容易理解一點。

把名字id名跟這個對應(yīng)上之后for里面是某個元素的id值，就是input這樣的一個元素的id值，label就跟input元素綁定了。注意這里寫錯了label。

·然后看一下可以點擊文字，就相當(dāng)于點擊了選項框，其他的用spam包裹的文字是沒有綁定的效果。所以label標(biāo)簽的作用就是有這樣的一個文字跟相應(yīng)的元素綁定起來。點擊文字相當(dāng)于就點擊元素這樣的效果。

·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實現(xiàn)的。然后來看一下input，把它設(shè)置成radio的類型就會變成這樣一個圓點。假如還是按照這種模式，比如說這里把ID也設(shè)置一下叫做htmltag，其實跟htmltag類型的數(shù)據(jù)庫也是一樣的。如果設(shè)置checked就默認(rèn)的，就相當(dāng)于是選中的狀態(tài)。

·如果這里還有單選，這里還有一個，如果叫CSS，把這個先取消掉。這里其實是有兩個選項，兩個可選項，整個的結(jié)果是希望是呈現(xiàn)單選的狀態(tài)，選中其中另外一個，肯定要呈現(xiàn)一種未選中的狀態(tài)。

·現(xiàn)在兩個都可以同時選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時也取名字，也是name同樣的值。

這里可以把它理解成用了同一個名字的單選框，他們最終只能選中其中一個?？梢栽囈幌?，比如說點CSS，點html，這個東西是單選框里面非常重要的知識點。

日常開發(fā)中，為了方便數(shù)據(jù)的輸入和輸出，JavaScript提供了一些常用的輸入輸出語句，具體如表1-3所示。
表1常用的輸入輸出語句

接下來將分別演示document.write0、console.log0和promptO的使用。

1. document.write()

document.write0的輸出內(nèi)容中如果含有HTML標(biāo)簽，會被瀏覽器解析。下面利用documenL.write0在頁面中輸出“我是document.write0語句!”，示例代碼如下。

document.write('我是document.write()語句！');

2. console.log()

利用console.log0語句在控制臺輸出“我是console.log0語句!”，示例代碼如下。

console.log('我是console.log()語句!');

console:.log0的輸出結(jié)果需要在瀏覽器的控制臺中查看。在Chrome 瀏覽器中按“F12”鍵(或在網(wǎng)頁空白區(qū)域右擊，在彈出的菜單中選擇“檢查”)啟動開發(fā)者工具，然后切換到“Console”(控制臺)面板，即可看到console.log0的輸出結(jié)果。

3.prompt()

利用prompt0語句實現(xiàn)在頁面中彈出一個帶有提示信息的輸入框，示例代碼如下。

prompt(請輸入姓名：');

上述示例代碼運行后，將在頁面中彈出一個輸人框并提示用戶“請輸人姓名：”提示框。