10、表單元素之input標簽屬性(中)

一、type屬性總匯

  input元素可以用來生成一個供用戶輸入數據的簡單文本框。在默認的情況下，什么樣的數據都可以輸入。而通過不同的屬性值，可以限制輸入的內容。

二、input元素解析

1、type為text值時

<input type="text">

解釋：當type值為text時，呈現的就是一個可以輸入任意字符的文本框，這也是默認行為，并且，還提供了額外的屬性

//設置文本框長度

<input type="text" size="50">

//設置文本框輸入字符長度

<input type="text" maxlength="10">

//設置文本框的初始值

<input type="text" value="初始值">

<form>
    size=50<input type="text" name="user" size="50"><br><br>
    size=25<input type="text" name="user" size="25"><br><br>
    maxlength=10<input type="text" name="user" maxlength="10"><br><br>
    value=“初始值”<input type="text" name="user" value="初始值"><br><br>
    disable<input type="text" name="user" disabled><br><br>
    readonly<input type="text" name="user" value="初始值" readonly=""><br><br>
<form action="http://www.baidu.com">
    required<input type="text" name="user" required=""><button>提交</button>
</form>
</form>

2、type為password值時

<input type="password">

這里除了正則和驗證需要放在下一節，其余和文本框一致

3、type為search時

<input type="search">

解釋：和文本框一致，在處Firefox瀏覽器的其他現代瀏覽器，會顯示一個叉來取消搜索內容。額外屬性也和text一致

<form>
placeholder：<input type="password" placeholder="請輸入密碼"><button>提交</button><br><br>
search:<input type="search" ><button>提交</button>
</form>

4、type為number、range時

<input type="number">
<input type="range">

解釋：只限輸入數字的文本框，不同瀏覽器可能顯示方式不同，生成一個數值范圍文本框，只是樣式是拖動式，額外屬性如下：

<form>
    number屬性：<input type="number" step="2"><button>提交</button><br><br>
    number屬性：<input type="number" min="50" max="100"><button>提交</button><br><br>
</form>

5、type為date系列時

<input type="date">
<input type="month">
<input type="time">
<input type="week">
<input type="datetime">
<input type="datetime-local">

解釋：實現文本框可以獲取日期和時間的值，但支持的瀏覽器不完整。我們測試chrome和Opera支持。其他瀏覽器尚未支持。所以，在獲取日期和時間，目前還是推薦使用jQuery等前端庫來實現日歷功能，額外屬性和number一致。

6、type為color時

<input type="coler">

解釋：實現文本框獲取顏色的功能，最新的現代瀏覽器IE不支持，其余的都能顯示一個顏色對話框提供選擇

<form>
    date屬性<input type="date" name=""><button>提交</button><br><br>
</form>

7、type為checkbox、radio時

<form>
    音樂<input type="checkbox" name="">
    體育<input type="checkbox" name="">
    <input type="radio" name="sex" value="男">男
    <input type="radio" name="sex" value="女">女
</form>

解釋：生成一個獲取布爾值的復選框或固定選項的單選框。額外屬性如下：

//默認勾選，默認值為1

<input type="checkbox" name="music" checked value="1">

<form>
    音樂<input type="checkbox" name="">
    體育<input type="checkbox" name="">
    <input type="radio" name="sex" value="1" checked>男
    <input type="radio" name="sex" value="2">女<button>提交</button>
</form>

8、type為submit、reset和button時

<input type="submit">

解釋：生成一個按鈕，三種模式：提交、重置和一般按鈕，和<button>元素相同

9、type為p_w_picpath時

<input type="p_w_picpath" src="img.png">

解釋：生成一個圖片按鈕，點擊圖片就實現提交功能，并且傳送了分區響應數據，圖片按鈕也提供了一些額外屬性

10、type為email、tel、url時

<from>
    郵箱：<input type="email" name="">
    電話：<input type="tel" name="">
    主頁：<input type="url" name=""><button>提交</button>
</form>

解釋：email為電子郵件格式，tel為電話格式、url為網址格式。額外屬性和text一致。但對于這幾種類型，瀏覽器支持是不同的。email支持比較好，現在瀏覽器都支持格式驗證，tel基本不支持：url支持一般，部分瀏覽器只要檢測到http://就能通過

11、type為hidden時

<input type="hidden">

解釋：生成一個隱藏控件，一般用于表單提交時關聯主鍵ID提交，而這個數據作為隱藏存在

12、type為file時

<input type="file">

解釋：生成一個文件上傳控件，用于文件的上傳，額外提供一些屬性

accept="p_w_picpath/jpg,p_w_picpath/jpeg,p_w_picpath/png"