html詳解之input

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

1、accept：accept 屬性規(guī)定了可通過文件上傳提交的服務器接受的文件類型。僅用于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" 類型 - 定義輸入字段的初始（默認）值
對于 "checkbox"、"radio"、"image" 類型 - 定義與 input 元素相關(guān)的值，當提交表單時該值會發(fā)送到表單的 action URL。

注意：value 屬性對于 <input type="checkbox"> 和 <input type="radio"> 是必需的。

注意：value 屬性不適用于 <input type="file">。

<input value="文本" />

3、name:表示的該文本輸入框名稱。用于表單提交后引用表單數(shù)據(jù)。只有設置了 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ī)定輸入字段是否應該啟用自動完成功能。

屬性值：on/off，默認啟動自動完成功能。

<input autocomplete="off" />

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

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

屬性值：autofocus

<input type="text"  autofocus />

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

屬性值：checked

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

12、disabled：disabled 屬性規(guī)定應該禁用的 <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ī)定當表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")

屬性值：URL

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

注意：

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

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

15、formenctype（new）：屬性規(guī)定當表單數(shù)據(jù)提交到服務器時如何編碼(只適合 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ī)定當表單數(shù)據(jù)提交到服務器時如何編碼（僅適用于 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ī)定表示提交表單后在哪里顯示接收到響應的名稱或關(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> 字段預期值的簡短的提示信息。

屬性值：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> 元素的預定義選項。

屬性值：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：定義復選框。

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：定義重置按鈕（重置所有的表單值為默認值）。

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

submit：定義提交按鈕。

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

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

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

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

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

TML DOM INPUT FILE 大文件上傳方法，HTML DOM INPUT FILE 大文件上傳技術(shù)，HTML DOM INPUT FILE 大文件上傳技巧，HTML5大文件上傳方案，HTML DOM INPUT FILE 大文件上傳組件，HTML5大文件上傳API，HTML DOM INPUT FILE 大文件上傳函數(shù)，INPUT FILE 大文件上傳教程，DOM INPUT FILE 大文件上傳源碼，HTML大文件上傳代碼，HTML大文件上傳分片，HTML大文件上傳分段，HTML大文件上傳分割，HTML大文件上傳切割，HTML大文件上傳解決方案，

現(xiàn)在chrome提供了相關(guān)的API，在HTML5中也能夠上傳文件，不過有限制，每個域名限制了5個TCP連接。用起來不是那么的舒服，也不夠靈活，當然也能夠滿足一般的使用場景。不太復雜的也能夠湊合著用。

但是如果有上傳文件夾，文件夾中包含很多文件，比如1萬或者10萬，這種場景下用起來就不是那么的舒服了，如果單個文件的大小超過10G，比如20G，這種場景下用起來也不是特別的舒服。

還有批量下載的話HTML5的能力也有限，下是能下，但是每下一個文件就需要用戶手動確認一下，那比如我要下載100個文件，也需要確認100次，用戶不太接受這種方式。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經(jīng)包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數(shù)據(jù)上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數(shù)據(jù)庫

TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證，今天將為大家?guī)鞨TML中的表單及其input輸入類型。

一、HTML表單

1、HTML表單用于收集不同類型的用戶輸入，是一個包含表單元素的區(qū)域并且允許用戶在表單中輸入內(nèi)容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復選框（checkboxes）等。

2、表單使用標簽<form>來設置，示例：

運行結(jié)果：

二、HTML表單屬性：

1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。

2、action屬性

在上面的示例中出現(xiàn)了action屬性，action屬性定義在提交表單執(zhí)行的動作，向服務器提交表單的通常做法是使用提交按鈕。

通常，表單會被提交到web服務器上的網(wǎng)頁，上面的例子中，則指定了某個服務器腳本來處理被提交表單。

如果省略 action 屬性，則 action 會被設置為當前頁面。

3、method 屬性

method屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）：

如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息，使用get。

如果表單正在更新數(shù)據(jù)，或者包含敏感信息（例如密碼），使用post。

4、如果要正確地被提交，每個輸入字段必須設置一個 name 屬性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 demo_form.asp 的頁面。</p>

<p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p>

</body>

</html>

運行結(jié)果：

5、target 屬性

target 屬性規(guī)定提交表單后在何處顯示響應，target 屬性可設置以下值之一：

默認值為 _self，這意味著響應將在當前窗口中打開。

6、Autocomplete 屬性

autocomplete 屬性規(guī)定表單是否應打開自動完成功能。

啟用自動完成功能后，瀏覽器會根據(jù)用戶之前輸入的值自動填寫值，示例：

運行結(jié)果：

7、所有<form>屬性的列表：

三、HTML表單元素：

1、<input>元素是最重要的表單元素，有很多的形態(tài)，根據(jù)不同的type屬性，例如：

①　文本輸入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>請注意表單本身是不可見的。</p>

<p>同時請注意文本字段的默認寬度是 20 個字符。</p>

</body>

</html>

運行結(jié)果：

②　單選按鈕輸入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

運行結(jié)果：

③　提交按鈕（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數(shù)據(jù)會被發(fā)送到名為 demo_form.asp 的頁面。</p>

</body>

</html>

運行結(jié)果：

2、<select>元素

<select>元素定義下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

運行結(jié)果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關(guān)數(shù)據(jù)

<legend>元素為<fieldset>元素定義標題，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運行結(jié)果：

4、<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運行結(jié)果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規(guī)定預定義選項列表。

用戶會在他們輸入數(shù)據(jù)時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結(jié)果：

四、HTML表單輸入類型

輸入類型	定義
text	定義供文本輸入的單行輸入字段
password	定義密碼字段
submit	定義提交表單數(shù)據(jù)至表單處理程序的按鈕
radio	定義單選按鈕
checkbox	定義復選框

<input>中的type：

類型	定義
radio	定義單選按鈕
checkbox	定義復選框
button	定義按鈕
number	用于應該包含數(shù)字值的輸入字段
date	用于應該包含日期的輸入字段
color	用于應該包含顏色的輸入字段
range	用于應該包含一定范圍內(nèi)的值的輸入字段
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年
time	允許用戶選擇時間（無時區(qū)）
datetime	允許用戶選擇日期和時間（有時區(qū)）
datetime-local	允許用戶選擇日期和時間（無時區(qū)）
email	用于應該包含電子郵件地址的輸入字段
search	用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）
tel	用于應該包含電話號碼的輸入字段
url	用于應該包含 URL 地址的輸入字段

輸入限制：

這就是有關(guān)HTML表單的大概內(nèi)容了，希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。

在線咨詢

上一篇：黑帽SEO教程為html中的js跳轉(zhuǎn)url加密
下一篇：統(tǒng)計列表（list）中每個元素出現(xiàn)的次數(shù)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

html詳解之input

您的項目需求