瞭解HTML表單之input元素的23種type類型

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/02/04/5179909.html
-Advertisement-
Play Games

[1]傳統類型 [2]新增類型


目錄
傳統類型 text password file radio checkbox hidden button image reset submit 新增類型 color tel email url search number range date month week time datetime datetime-local

前面的話

　　隨著HTML5的出現，input元素新增了多種類型，用以接受各種類型的用戶輸入。其中，button、checkbox、file、hidden、image、password、radio、reset、submit、text這10個是傳統的輸入控制項，新增的有color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week共13個

 

傳統類型

　　text 　　   定義單行的輸入欄位，用戶可在其中輸入文本

　　password   定義密碼欄位。該欄位中的字元被掩碼

　　file 　　　 定義輸入欄位和 "瀏覽"按鈕，供文件上傳

　　radio　　  定義單選按鈕

　　checkbox   定義覆選框

　　hidden 　  定義隱藏的輸入欄位

　　button 　　定義可點擊按鈕（多數情況下，用於通過JavaScript啟動腳本）

　　image 　　定義圖像形式的提交按鈕

　　reset 　　 定義重置按鈕。重置按鈕會清除表單中的所有數據

　　submit 　  定義提交按鈕。提交按鈕會把表單數據發送到伺服器

text

　　type="text"表示一個文本輸入框，它是預設的輸入類型，是一個單行的控制項，一般是一個帶有內嵌框的矩形 

password

　　type="password"表示一個密碼輸入框，它與文本輸入框幾乎一模一樣，功能上唯一的不同的字母輸入後會被隱藏，一般是一連串的點 

【預設樣式】

chrome/safari/opera
    padding: 1px 0px;
    border: 2px inset;
firefox
    padding: 2px;
    border-width: 1px;
ie
    padding: 2px 1px;
    border-width: 1px;

【預設寬高】

chrome
    height: 14px;
    width: 148px;
safari
    height: 15px;
    width: 148px;
firefox
    height: 17px;
    width: 137px;
IE9+
    height: 14px;
    width: 147px;
IE8-
    height: 16px;
    width: 149px;

【重置樣式】

padding: 0;
border: 1px solid;

　　[註意]IE6瀏覽器設置的type="text"或"password"的input元素的寬高為包含padding和border的寬高

　　 <演示框>點擊下列相應按鈕可進行演示

【tips】模擬密碼顯示隱藏的功能

　　說明：現在很多軟體在密碼框右側都有一個小眼睛，用於設置密碼的顯示和隱藏。通過更改input元素的type屬性得以實現

<style>
body{
    margin: 0;
    font-size: 16px;
}    
#show{
    padding: 0;
    border: 1px solid black;
    height: 20px;
    width: 200px;
    line-height: 20px;
}
#set{
    display: inline-block;
    height: 22px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    line-height: 18px;
    margin-left: -72px;
    cursor: pointer;
}
</style>
</head>
<body>
<input id="show" type="password" maxlength="6">
<span id="set">顯示密碼</span>
<script>
set.onclick = function(){
    if(this.innerHTML == '顯示密碼'){
        this.innerHTML = '隱藏密碼';
        show.type="text";
    }else{
        this.innerHTML = '顯示密碼';
        show.type="password";
    }
}    
</script>

file

　　type="file"定義輸入欄位和"瀏覽"按鈕，用於文件上傳 

【重置樣式】

    padding: 0;
    border: 0;

【預設寬高】

chrome
    height: 21px;
    width: 238px;
safari
    height: 21px;
    width: 238px;
firefox
    height: 27px;
    width: 222px;
IE9+
    height: 21px;
    width: 220px;
IE8
    height: 16px;
    width: 214px;
IE7-
    height: 15px;
    width: 210px;

　　[註意]IE8-瀏覽器設置的type="file"的input元素的寬高為包含padding和border的寬高

　　該類型的input元素支持accept屬性和multiple屬性

　　關於accept屬性的詳細信息移步至此

　　關於multiple屬性的詳細信息移步至此

radio

　　type="radio"定義單選按鈕，允許用戶從給定數目的選擇中選一個選項。同一組按鈕，name值一定要一致

　　[註意]radio類型的input元素無法設置padding和border(除IE10-瀏覽器以外)

【預設樣式】

chrome/safari/opera/firefox
    margin: 3px 3px 0 5px;
    box-sizing:border-box;
ie11
    margin: 3px 3px 3px 4px;
    box-sizing:border-box;
ie10-
    padding: 3px;
    box-sizing:border-box;

【預設寬高】

chrome/safari/IE
    height: 13px;
    width: 13px;
firefox
    height: 16px;
    width: 16px;

【重置樣式】

    padding: 0;
    margin: 0;
    border: 0;

checkbox

　　type="checkbox"定義多選按鈕，允許用戶在給定數目的選擇中選擇一個或多個選項。同一組的按鈕，name取值一定要一致

　　[註意]checkbox類型的input元素無法設置padding和border(除IE10-瀏覽器以外)

【預設樣式】

chrome/safari/opera/firefox/ie11
    margin: 3px 3px 3px 4px;
    box-sizing:border-box;
ie10-
    padding: 3px;
    box-sizing:border-box;

【預設寬高】

chrome/safari/IE
    height: 13px;
    width: 13px;
firefox
    height: 16px;
    width: 16px;

【重置樣式】

    padding: 0;
    margin: 0;
    border: 0;

　　type="radio"或"checkbox"的input元素支持checked屬性

　　關於checked屬性的詳細情況移步至此

hidden

　　type="hidden"定義隱藏輸入類型用於在表單中增加對用戶不可見，但需要提交的額外數據

　　[註意]disabled屬性無法與type="hidden"的input元素一起使用

//點擊提交按鈕後，隱藏域的內容test=12會包含在URL中
<form name="form" action="#">
    <input type="hidden" name="test" value="12">
    <input type="submit">
</form>

button

　　type="button"的input輸入類型定義可點擊的按鈕，但沒有任何行為，常用於在用戶點擊時啟動javascript程式

【button、submit、reset的預設樣式】

chrome/safari
    padding: 1px 6px;
    border: 2px outset buttonface;
    box-sizing:border-box;
firefox
    padding: 0 6px;
    border: 3px outset;
    box-sizing:border-box;
IE9+
    padding: 3px 10px;
    border: 1px outset;
    box-sizing:border-box;    
IE8
    padding: 3px 10px;
    border: 1px outset;
IE7-
    padding: 1px 0.5px;
    border: 1px outset;

　　[註意]IE8-瀏覽器的box-sizing:content-box;而其他瀏覽器的box-sizing:border-box;

<input type="button" value="Click me" onclick="alert(1)" />

　　type="button"的input輸入類型和button元素有很多重疊特性

　　關於button元素的詳細信息移步至此

image

　　type="image"的input輸入類型定義圖像形式的提交按鈕，該類型可以設置width、height、src、alt這四個屬性

　　用圖片作為提交按鈕會一起發送點擊在圖片上的x和y坐標，這樣可以與伺服器端圖片地圖結合使用，如果圖片有name屬性，也會隨坐標發送

<form action="#">
    <input name="test">
    <input type="image" name="imagesubmit" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="測試圖片">
</form>

submit

　　type="submit"的input輸入類型用於創建提交表單的按鈕

reset

　　type="reset"的input輸入類型用於創建重置表單的按鈕

<form action="#" method="get">
    <input>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
</form>

新增類型

　　color 　　　　　　定義調色板
　 　tel 　　　　  　　 定義包含電話號碼的輸入域
　 　email 　　　  　　定義包含email地址的輸入域
　 　url 　　　　  　　 定義包含URL地址的輸入域
　 　search 　　　　　 定義搜索域
　 　number 　　 　　 定義包含數值的輸入域
　 　range 　　   　　  定義包含一定範圍內數字值的輸入域
　 　date 　　　　　　 定義選取日、月、年的輸入域
　 　month 　　  　　  定義選取月、年的輸入域
　 　week 　　　　　　定義選取周、年的輸入域
　 　time 　　    　　   定義選取月、年的輸入域
　 　datetime 　　　    定義選取時間、日 月、年的輸入域(UTC時間)
　　datatime-local 　  定義選取時間、日 月、年的輸入域(本地時間)

color

　　type="color"的input輸入類型會創建一個調色板用來選擇顏色，顏色值以URL編碼後的十六進位數值提交。如黑色會以%23000000發送，其中%23是#的URL編碼

　　[註意]safari和IE不支持該類型

【預設樣式】

chrome
    width:44px;
    height:23px;
    border: 1px solid rgb(169,169,169);
    padding: 1px 2px;
firefox
    width:46px;
    height:17px;
    border: 3px solid rgb(169,169,169);
    padding: 6px 0;    
<input type="color">

tel

　　type="tel"的input輸入類型用於表示語義上的電話輸入域，外觀上與type="text"的input輸入類型沒有差異

<form action="#">
    <input type="tel" placeholder="請輸入11位手機號碼" pattern="\d{11}">    
    <input type="submit">
</form>

email

　　type="email"的input輸入類型用於表示語義上的e-mail地址輸入域，會自動驗證email域的值，外觀上與type="text"的input輸入類型沒有差異 

　　email類型的input元素支持multiple屬性

　　[註意]IE9-瀏覽器及safari瀏覽器不支持

<form action="#" >
    <input type="email" name="email" multiple>
    <input type="submit">
</form>

url

　　type="url"的input輸入類型用於表示語義上的url地址的輸入域，會自動驗證url域的值，外觀上與type="text"的input輸入類型沒有差異

　　[註意]IE9-瀏覽器及safari瀏覽器不支持

<input type="url">

search

　　type="search"的input輸入類型用於表示語義上的搜索框，外觀上與type="text"的input輸入類型沒有差異

<input type="search">

number

　　type="number"的input輸入類型用於處理數字輸入

　　[註意]IE不支持該類型

【預設樣式】

chrome/safari
    border: 2px inset;
    padding-left: 1px;
firefox
    border: 1px inset;
    padding: 2px;

【屬性】

　　max 　　規定允許的最大值

　　min 　　 規定允許的最小值

　　step 　　規定合法的數字間隔

　　value 　  規定預設值

　　[註意]屬性的取值可為小數

<input type="number" min="0" max="10" step="0.5" value="6" />

range

　　type="range"的input輸入類型用於處理包含在一定範圍內的數字輸入，類似於type="number"的input類型 

　　[註意]IE9-不支持該類型

【預設樣式】

chrome/safari
    margin: 2px;
firefox
    border: 1px inset;
    padding: 1px;
    margin: 0 9.3px;
IE10+
    padding: 17px 0 32px;

【屬性】

　　max 　　規定允許的最大值

　　min 　　 規定允許的最小值

　　step 　　規定合法的數字間隔

　　value 　  規定預設值

　　[註意]屬性的取值可為小數

<input type="range" min="0" max="10" step="0.5" value="6" />

HTML5擁有多個可供選取日期和時間的新輸入類型

date

　　type="date"的input輸入類型用於選取日、月、年

month

　　type="month"的input輸入類型用於選取月、年

week

　　type="week"的input輸入類型用於選取周、年

time

　　type="time"的input輸入類型用於選取時、分

datetime

　　type="datetime"的input輸入類型用於選取時、日、月、年(UTC時間)

datetime-local

　　type="datetime-local"的input輸入類型用於選取時、日、月、年(本地時間)

　　[註意]IE和firefox這6種日期類型都不支持，chrome不支持datetime類型

【預設樣式】

chrome/safari
    border: 2px inset;
    padding-left: 1px;
<input type="date"><br><br>
<input type="month"><br><br>
<input type="week"><br><br>
<input type="time"><br><br>
<input type="datetime"><br><br>
<input type="datetime-local">

　　要預設控制項的日期和時間，可以用字元串設置value屬性

【value屬性格式】

date                　　 YYYY-MM-DD
time                 　　hh:mm:ss.s
datetime            　　 YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month            　　　　 YYYY-MM
week                　　 YYYY-Wnn
YYYY=年
MM=月
DD=日
hh=小時
mm=分鐘
ss=秒
s=0.1秒
T=日期與時間之間的分隔符
Z=Zulu時間的時區
Wnn=W周數，從1月的第一周開始是1，直到52

　　該類型的value屬性格式還可以用在min和max的屬性里，用來創建時間跨度；step可以用來設置移動的刻度

　　[註意]chrome不支持該類型的step設置

<input type="week" value="2015-W36" step="2" min="2015-W25" max="2015-W40">


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 觀察者模式
    觀察者模式 定義了對象之間的一對多依賴，這樣一來，當一個對象改變狀態時，它的所有依賴者都會收到通知並自動更新。 觀察者模式需要實現兩個介面。observable（可觀察者）和observer（觀察者）。 observable定義了三個方法：register、remove、notify observe
  • ENode框架單台機器在處理Command時的設計思路
    設計目標 儘量快的處理命令和事件，保證吞吐量； 處理完一個命令後不需要等待命令產生的事件持久化完成就能處理下一個命令，從而保證領域內的業務邏輯處理不依賴於持久化IO，實現真正的in-memory； 保證命令、事件處理的順序性，先來的先處理，先產生的先處理； 保證一個聚合根的事件只有一個線程在持久化，
  • springmvc mybatis（oracle 和 mysql sqlsever） HTML5 全新高大尚後臺框架 bootstrap
    獲取【下載地址】 QQ: 313596790 【免費支持更新】支持三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體A 代碼生成器(開發利器); 增刪改查的處理類，service層，mybatis的xml，SQL( mysql 和oracle)腳本, jsp頁面
  • 初學HTML 常見的標簽
    最近做iOS開發的過程中, 發現要涉及到JS和原生OC(Swift)的交互, 作為一個Developer, 本著剋服一切問題的原則, 開始學習HTML, 在這裡記錄下自己的學習筆記, 方便以後的複習, 和新手初學的參考. HTML不同於過去學過的各種面向對象語言, 函數式語言, 它不像其他語言有明確
  • ( 譯、持續更新 ) JavaScript 上分小技巧(三)
    最近家裡雜事較多，自學時間實在少的可憐，所以都在空閑時間看看老外寫的內容，學習之外順便翻譯分享~等學習的時間充足些再寫寫自己的一些學習內容和知識點分析(最近有在接觸的：複習(C#，SQL)、(學習)TypeScript，(基礎操作)MongoDB。TypeScript之後入手AngularJs 2.
  • css3 gradient 漸變
    分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。 1.線性漸變在Mozilla 下應用 語法：-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 參數;共三個參
  • 第一個關於ajax的代碼
    昨天由於需要，寫了第一個需要ajax的程式，之前只是看過相關介紹，沒想到這麼有用，記錄一下，如有錯誤，還希望大家提出$(document).ready(function () {//獲取url中名字為vid的值 var params = window.location.search; //獲取url
  • Pelican＋Github博客搭建詳細教程
    Git是一個開源的分散式版本控制系統，用以有效、高速的處理從很小到非常大的項目版本管理。GitHub可以托管各種git庫的站點。通過GitHub Pages生成的靜態站點，可以免費托管、自定義主題、並且自製博客界面。
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類