瞭解HTML表單之input元素的30個元素屬性

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

[1]傳統屬性 [2]新增屬性


目錄
傳統屬性 name type accept alt checked disabled readonly maxlength size src value 新增屬性 autocomplete autofocus novalidate height width list min max step multiple pattern placeholder required form formaction formenctype formmethod formnovalidate formtarget

前面的話

　　form元素只是一個數據獲取元素的容器，而容器內的元素稱為表單控制項。最常用的表單控制項是input元素

　　accept、alt、checked、disabled、maxlength、name、readonly、size、src、type、value這11個屬性是input元素的傳統元素屬性

　　autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width這19個屬性是HTML5新增的元素屬性

 

傳統屬性

name

　　name屬性用於規定input元素的名稱，用於對提交到伺服器後的表單數據進行標識，或者在客戶端通過javascript引用表單數據

　　[註意]只有設置了name屬性的表單元素才能在提交表單時傳遞它們的值

type

　　type屬性用來規定input元素的類型

　　[註意]如果input元素沒有設置type屬性，或者設置的值在瀏覽器中不支持，那麼輸入類型會變成type="text"

　　詳細情況移步至此

accept

　　accept屬性用來規定能夠通過文件上傳進行提交的文件類型。理論上可以用來限制上傳文件類型，然而它只是建設性的，並很可能被忽略，它接受逗號分隔的MIME類型

　　[註意]該屬性只能與type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt

　　alt屬性為圖像輸入規定替代文本，功能類似於image元素的alt屬性，為用戶由於某些原因無法查看圖像時提供備選信息

　　[註意]alt屬性只能與type="image"的input元素配合使用

<input type="image" src="#" alt="測試圖片">

checked

　　checked屬性規定在頁面載入時應該被預先選定的input元素，也可以在頁面載入後，通過javascript進行設置

　　[註意]checked屬性只能與type="radio"或type="checkbox"的input元素配合使用

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<script>
var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
    oInput[i].onmouseover = function(){
        this.checked = 'checked';
    }
}    
</script>

disabled

　　disabled屬性規定應該禁用input元素。被禁用的欄位是不能修改的，也不可以使用tab按鍵切換到該欄位，但可以選中或拷貝其文本

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

　　[註意2]對於IE7-瀏覽器必須設置為disabled="disabled"，而不可以直接設置disabled，否則使用javascript控制時將失效

<button id="btn1">輸入域可用</button>
<button id="btn2">輸入域不可用</button>
<input id="test" disabled value="內容">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

readonly

　　readonly屬性規定輸入欄位為只讀。只讀欄位是不能修改的，但用戶仍然可以使用tab按鍵切換到該欄位，還可以選中或拷貝其文本

　　readonly屬性可與type="text"或"password"的input元素配合使用

　　[註意]IE7-瀏覽器不支持使用javascript控制readonly屬性

<button id="btn1">輸入域只讀</button>
<button id="btn2">輸入域可讀寫</button>
<input id="test" value="內容" readonly>
<script>
btn1.onclick = function(){
    test.setAttribute('readonly','readonly');
}
btn2.onclick = function(){
    test.removeAttribute('readonly');
}    
</script>

maxlength

　　maxlength屬性規定輸入欄位的最大長度，以字元個數計

　　[註意]該屬性只能與type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size

　　size屬性對於type="text"或"password"的input元素是可見的字元數；而對於其他類型，是以像素為單位的輸入欄位寬度

　　[註意]由於size屬性是一個可視化的設計屬性，推薦使用CSS來代替它

<input size="1">
<input type="password" size="2">

src

　　src屬性作為提交按鈕顯示的圖像的URL

　　[註意]src屬性只能且必須與type="image"的input元素配合使用

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

value

　　value屬性為input元素設定值。對於不同的輸入類型，value屬性的用法也不同：

　　type="button"、"reset"、"submit"用於定義按鈕上的顯示的文本

　　type="text"、"password"、"hidden"用於定義輸入欄位的初始值

　　type="checkbox"、"radio"、"image"用於定義與輸入相關聯的值

　　[註意1]type="checkbox"或"radio"必須設置value屬性

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

<button id="btn1">1</button>
<button id="btn2">2</button>
<input id="test">
<script>
btn1.onclick = btn2.onclick =function(){
    test.value=this.innerHTML;
}    
</script>

 

新增屬性

autocomplete

　　autocomplete屬性可以在個別元素或整個表單上開啟或關閉瀏覽器的自動完成功能。當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，顯示出在欄位中填寫的選項

　　autocomplete屬性適用form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

　　[註意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效

<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off">

　　詳細情況移步至此

autofocus

　　autofocus屬性規定在頁面載入時，域自動地獲得焦點

　　autofous屬性適用於button、input、keygen、select和textarea元素

<input name="test1">
<input name="test2" autofocus>

novalidate

　　novalidate屬性規定在提交表單時不驗證form或input域

　　novalidate屬性適用於form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

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

　　詳細情況移步至此

height

　　height屬性用於規定image類型的input標簽的圖像高度

　　[註意]該屬性只適用於image類型的input標簽

width

　　width屬性用於規定image類型的input標簽的圖像寬度

　　[註意]該屬性只適用於image類型的input標簽

//http://127.0.0.1/form.html?test=123&x=38&y=57#
<form action="#">
    <input name="test">
    <input type="image" src="submit.jpg" width="99" height="99">
</form>

list

　　大多數輸入類型包含一個屬性list，它和一個新元素datalist結合使用，這個元素定義當在表單控制項輸入數據時可用的一個選項列表。datalist元素自身不會在頁面顯示，而是為其他元素的list屬性提供數據

　　list屬性適用於form元素以及以下類型的input元素：text、search、url、telephone、email、password、date pickers、range、color

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

　　詳細情況移步至此

min

　　min屬性規定輸入域所允許的最大值 

max

　　max屬性規定輸入域所允許的最小值

step

　　step屬性為輸入域規定合法的數字間隔

　　min、max、step屬性適用於以下類型的input元素:date pickers、number、range

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

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

multiple

　　multiple屬性規定按住ctrl按鍵，輸入欄位可以選擇多個值

　　該屬性適用於type="email"和"file"的input元素

　　[註意]該屬性IE9-瀏覽器不支持

<button id="btn1">打開文件多選</button>
<button id="btn2">關閉文件多選</button>
<br><br>
<input id="test" type="file" multiple>
<script>
btn1.onclick = function(){
    test.setAttribute('multiple','');
};
btn2.onclick = function(){
    test.removeAttribute('multiple');
};
</script>

pattern

　　pattern屬性規定用於驗證input域的模式。模型pattern是正則表達式

　　pattern屬性適用於以下類型的input元素：text、search、url、tel、email、password

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

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder

　　placeholder屬性提供占位符文字，描述輸入域所期待的值。占位符會在輸入域為空時顯示出現，在輸入域獲得焦點時消失

　　placeholder屬性適用於以下類型的input元素:text、search、url、tel、email、password

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

<form action="#">
    <input type="tel" placeholder="請輸入數字" pattern="\d{11}">    
    <input type="submit">
</form>

required

　　required屬性規定必須在提交之前填寫輸入域(不能為空)

　　required屬性適用於以下類型的input元素：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file

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

<form action="#">
    <input required>    
    <input type="submit">
</form>

form

　　form屬性規定輸入域所屬的一個或多個表單，form屬性必須和所屬表單的id

　　form屬性適用於所有input標簽的類型，若需要引用一個以上的表單時，用空格分隔

　　[註意]IE瀏覽器不支持該屬性，只有元素擁有name屬性，該屬性才有效

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

表單重寫屬性

　　表單重寫屬性允許重寫form元素的某些屬性設定。其中，formnovalidate適用於button或input元素，而其他屬性適用於submit或reset的button或input元素

formaction

　　重寫表單的action屬性

　　關於action的詳細信息移步至此

<form action="#" >
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formaction="#" value="以管理員身份提交" />
</form>

formenctype

　　重寫表單的enctype屬性

　　關於enctype的詳細信息移步至此

<form action="#" method="post">
  First name: <input type="text" name="fname" /><br />
  <input type="submit" value="提交" />
  <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data編碼提交" />
</form>

formmethod

　　重寫表單的method屬性

　　關於method的詳細信息移步至此

<form action="#" method="get">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
</form>

formnovalidate

　　重寫表單的novalidate屬性

　　關於novalidate的詳細信息移步至此

<form action="#" method="get">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="提交" /><br />
<input type="submit" formnovalidate="formnovalidate" value="進行沒有驗證的提交" />
</form>

formtarget

　　重寫表單的target屬性

　　關於target的詳細信息移步至此

<form action="#">
  First name: <input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
<input type="submit" value="提交" />
<input type="submit" formtarget="_blank" value="提交到新視窗/選項卡" />
</form>


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

-Advertisement-
Play Games
更多相關文章
  • ( 譯、持續更新 ) 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生成的靜態站點，可以免費托管、自定義主題、並且自製博客界面。
  • 瞭解HTML表單之input元素的23種type類型
    [1]傳統類型 [2]新增類型
  • js插件開發的一些感想和心得
    如果大家平時做過一些前端開發方面的工作，一定會有這樣的體會：頁面需要某種效果或者插件的時候，我們一般會有兩種選擇： 1、上網查找相關的JS插件，學習其用法;2、自己造輪子，開發插件。本文主要談談一些編寫JS插件的感想和心得
  • 【jQuery基礎學習】09 jQuery與前端（這章很水）
    這章主要是將如何將jQuery應用到網站中，或者說其實就是一些前端知識，對於我這種後端程式來說其實還是蠻有用的。 關於網站結構 文件結構 前端文件分三個文件夾放 images文件夾用來存放將要用到的圖片 styles文件夾用來存放css樣式表 scripts文件夾用來存放js腳本 網頁結構 頭部：網
  • Node.js刷新session過期時間
    在Node.js中，我們通常使用express-session這個包來使用和管理session，保存服務端和客戶端瀏覽器之間的會話狀態。那如何才能實現當用戶刷新當前頁面或者點擊頁面上的按鈕時重新刷新session的過期時間呢？類似於ASP.NET中session會話狀態，只要在一定的時間內頁面一直保
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類