Input標籤開發小技巧

<input>標籤是咱們前段平常開發使用的很是多的一個元素,可是我敢確定，咱們有很多同窗都只用到了就那麼幾個type類型，如：text password button checkbox radio search number file等,還有屬性，如：value id name disabled checked placeholder title等，而<input>標籤還有不少實用屬性和type類型能夠用來提升咱們的開發效率， 下面開始進入正題。

inupt是表單元素

用個這麼大的標題醒目的說明，就是爲了提醒同窗們，在現下前端流行佈局都是使用div加css，而後都習慣使用ajax進行數據提交的方式，這樣作自己並無錯，而是想說，想要完整的使用好 <input>標籤自己的特性，那麼<input>的有些屬性你就必須在<form>表單元素裏使用。 在以前，ajax沒有流行起來以前，咱們提交的方式是使用表單方式提交數據的，也就是 <form></form> 標籤，使用 form 的 action 屬性，而咱們的 <input> 就是屬於 <form>表單裏的元素，而咱們要想用好 <input> ，更多的時候就是須要結合 <form>表單元素一塊兒使用，下面就簡單介紹下 <input>哪些屬性和特性須要結合<form>表單元素標籤。

一. 實用屬性

<input>標籤上還有一些屬性，很是實用，有的用來作些驗證，有的用來知足一些特殊小功能的，好比只讀readonly屬性，也就是說， <input>裏的內容只是給看的，不能夠修改的，下面看例子。

• 1. 驗證屬性；

`

<form action="/example/html5/demo_form.asp" method="get">
    <label>用戶：</label> <input type='text' required />
    <input type="submit" value="提交" />
</form>
複製代碼

`

上面這段HTML代碼，要是用戶沒有輸入值，點擊提交，是提交不出去，並且還會給出個默認的提示，請你輸入該字段，是否是以爲好神奇,也是否是以爲好眼熟，像咱們常常用到的一些ui框架裏面的表單驗證，都是仿照此功能來作的，也就是說，它纔是鼻祖。可是這個 required 屬性是必須<input>要在<form></form>表單標籤裏使用纔有效的哦，上面只寫了一個關於驗證的屬性，下面還有兩個有用的 (=^_^=)

`

<form action="/example/html5/demo_form.asp" method="get">
    <label>mobile：</label> <input type='number' pattern="[0-9]{3}" />
    <-- pattern="[0-9]{3}" 意思就是隻能輸入0-9之間的一個三位數的數字 -->
    
    <label>count：</label><input type="number" name="points" min="5" max="10" />
    <-- min="5" max="10" 輸入的最小值爲5 最大值爲10 這個兩個屬性適用於type類型爲 number,range和date 特別是type爲range 很是好用-->
    
    <input type="submit" value="提交" />
</form>
複製代碼

`

• 2. 功能屬性；

`

聚焦文本框：	<input type='number' autofocus="autofocus" />
	禁用文本框：	<input type="text" disabled="disabled" />
	限制輸入長度：	<input type="text" maxlength="6" />
	只讀文本框：	<input type="text" readonly="readonly" value="只讀" />
	複選框默認選中：<input type="checkbox" checked="checked"/>
複製代碼

`

上面這幾個<input> 使用的屬性，不常常看文檔的，確定有人不知道，而這幾個是真的超級超級實用，特別是限制輸入長度的 maxlength和 只讀的readonly，不少人不知道 input有這兩屬性，都是使用js模仿去實現的，那多浪費性能呀。

二. 實用type屬性

type類型是 <input>標籤的核心，不一樣的類型，徹底決定了這個<input>標籤的主要功能，像上面那節的實用屬性的介紹，也行能夠用幾行js就模仿到，可是這個要模仿，那就好多好多行代碼了，並且仍是js+html ^_^'，如今的HTML流行的是HTML5，那麼<input>一樣多了好多使用的新type類型，下面看代碼：

`

數字輸入類型：<input type="number" min="1" max="10" onchange="inputFn(event)" />
電話號碼類型：<input type="tel" min="11" max="11" onchange="inputFn(event)" />
數值範圍類型：<input type="range" max="50" min="0" onchange="inputFn(event)"/>
日期類型：<input type="date" onchange="inputFn(event)" />
郵箱輸入類型： <input type="email" name="email" />
複製代碼

`

在這幾個type 類型裏，每一個我都以爲很是實用，date類型是日期控件，對於界面展現要求不高的，用它真的徹底足夠了，email 類型是郵箱輸入控件，這個類型最大的特色是自帶了郵箱規則的驗證，固然這個驗證其實不怎麼準...,可是它還有另外個特點,那就是移動端輸入時，輸入鍵盤是默認帶出@符號的，不須要你切換來切換去的哦，number類型也是，這個類型只容許你輸入數字，tel這個類型我以爲它的差異體如今平臺上，在pc端，我測下來是能夠輸入其它字符，可是在移動端，它和number是同樣的功能，只能輸入數字。

三. input標籤的file文件類型

把這個類型單獨拿出來講，是有緣由的，由於這個類型不是輸入的了，而是選擇咱們的硬件設備裏的文件，這個類型平常開發其實用的挺多的，特別是pc端，可是這個類型在移動端使用，仍是有不同的體驗,因此這裏的說明也主要以移動端是用file 類型的應用。下面看例子： `

<input type="file" onchange="inputFn(event)"/>
複製代碼

`

就默認的file類型，不在加其它的屬性，在移動端使用,ios端是會調起默認的選pop選項框

，在這個選項框裏會包含拍照，照片圖庫，以及瀏覽的這麼個東西。可是在android，只會調起文件系統，也就是說和咱們的pc端差很少，打開一個文件目錄，讓你去選擇文件。只是如此，咱們自可沒必要說單獨說它，和 file 這個文件類型使用的還有另外兩個屬性，能夠幫助咱們默認打開咱們想要打開的東西，好比咱們只想調起相冊，那麼咱們在加一個 accept 屬性： `

<input type="file" accept="image/*" onchange="inputFn(event)"/>
複製代碼

`

加上accept屬性後，賦值 "image/*"，ios端的調用仍是以前的同樣，可是android端卻也只調起了個popup的彈框，上面會有兩選項，相機和文件，

，目前我只測試到了vivo,華爲，小米手機，其它品牌手機，我的以爲會差很少，而 accept的屬性還能夠賦其它值，例如：

`

只選擇word文檔<input type="file" accept=".doc" onchange="inputFn(event)"/>

只選擇excel文檔<input type="file" accept=".xlsx" onchange="inputFn(event)"/>

只選擇png圖片文件<input type="file" accept=".png" onchange="inputFn(event)"/>

只選擇jpg圖片文件<input type="file" accept=".jpg" onchange="inputFn(event)"/>

`

看了上面的代碼，相信你們就理解了，accept是定義選擇文件類型的一個屬性，並且也只適用於 file類型，而file類型默認一次只選擇一個文件，要是想一次選擇多個文件呢？這時，又一個和file類型配合使用的屬性出場，那就是 multiple: `

<input type="file" accept="image/*" onchange="inputFn(event)" multiple="multiple"/>
複製代碼

multiple`能夠幫助咱們一次選擇多個文件，在pc端使用，須要你按住shift或者ctrl鍵協助多選，而在移動端，你打開相冊，進入文件目錄就能夠勾選，可是呢，我本身兩臺手機，我在ios上是能夠勾選多個文件，可是android好像沒有能夠...

接下來，可是若是咱們想只要調起相機的功能呢？，和file搭配的又一個屬性出來了：

`

只調相機：<input type="file" accept="image/*" capture="camera">
調前置相機：<input type="file" accept="image/*" capture="user">
只調攝像機：<input type="file" accept="video/*" capture="camcorder">
調前置攝像機：<input type="file" accept="video/*" capture="user">
只調錄音機：<input type="file" accept="audio/*" capture="microphone">
複製代碼

`

在這個屬性上，ios和android總算有點同步了 capture="camera"和 capture="camcorder"調相機和錄像這一塊是一致的，可是在調起錄音文件上時，有差異，ios這回好像不能調起錄音功能模塊，可是android能夠，

，你們請注意，我在使用 capture屬性時， accept的值是有變化的哦，請留意html代碼。介紹到這裏， file類型算是介紹的差很少了，在咱們平常開發中須要使用也就介紹到了。

小結

學無止境，日積月累，總有一天，咱們也能夠成爲大神的。這句話就是我寫這篇博客的目的，個人目的也是學習和總結，把本身平常開發當中遇到的梳理出來。若有不足的地方，請各位留言指導...順便給個贊，(=^_^=)