2022年4月12日 星期二

[研究]HTML5 的 input 標籤的 type 屬性的各種值

[研究]HTML5的input標籤的type屬性的各種值

2022-04-12

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

HTML Standard
https://html.spec.whatwg.org/multipage/input.html#the-input-element

Default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form>
        HTML5的input標籤的type屬性的各種值:<br \>
        <br \>
        button:<input type="button"><br \>
        checkbox:<input type="checkbox"><br \>
        color:<input type="color"><br \>
        date:<input type="date"><br \>
        datetime:<input type="datetime"><br \>
        datetime-local:<input type="datetime-local"><br \>   
        email:<input type="email"><br \>
        file:<input type="file"><br \>
        hidden:<input type="hidden"><br \>
        image:<input type="image"><br \>
        month:<input type="month"><br \>
        number:<input type="number"><br \>
        password:<input type="password"><br \>
        radio:<input type="radio"><br \>
        range:<input type="range"><br \>
        reset:<input type="reset"><br \>
        search:<input type="search"><br \>
        tel:<input type="tel"><br \>
        text:<input type="text"><br \>
        time:<input type="time"><br \>
        url:<input type="url"><br \>
        week:<input type="week"><br \>
        subimt:<input type="submit"><br \>
    </form>
</body>
</html>


(下圖)執行結果(Chrome 100)

(下圖)執行結果(Edge v100)

(下圖)執行結果(FireFox v99)


(下圖)執行結果(IE11)



********************************************************************************

 <input type="值"> 在 HTML5 多了一些輸入限制功能可方便使用。


button 可點擊的按鈕(通常與 JavaScript 一起使用來啟動腳本)。

checkbox 核取方塊。

color (HTML5) 拾色器。

date (HTML5)  date 控件(包括年、月、日,不包括時間)。

datetime (HTML5)  date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,基於 UTC 時區)。

datetime-local (HTML5)  date 和 time 控件(包括年、月、日、時、分、秒、幾分之一秒,不帶時區)。

email (HTML5) 用於 e-mail 地址的字段。

file 文件選擇字段和 "瀏覽..." 按鈕,供文件上傳。

hidden 隱藏輸入字段。

image 圖像作為提交按鈕。

month (HTML5)  month 和 year 控件(不帶時區)。

number (HTML5) 用於輸入數字的字段。

password 密碼字段(字段中的字符會被遮蔽)。

radio 單選按鈕。

range (HTML5) 用於精確值不重要的輸入數字的控件(比如 slider 控件)。

reset 重置按鈕(重置所有的表單值為預設值值)。

search (HTML5) 用於輸入搜索字符串的文本字段。

submit 提交按鈕。

tel (HTML5) 用於輸入電話號碼的字段。

text 預設值。一個單行的文本字段(預設值寬度為 20 個字符)。

time (HTML5) 用於輸入時間的控件(不帶時區)。

url (HTML5) 用於輸入 URL 的字段。

week (HTML5)  week 和 year 控件(不帶時區)。

(完)

相關

[研究]HTML5 的 input 標籤的 type 屬性的各種值
https://shaurong.blogspot.com/2022/04/html5-input-type.html

[研究]HTML5必填欄位檢查 required
https://shaurong.blogspot.com/2022/04/html5-required.html

[研究][ASP.NET][JavaScript]離開填寫欄位時,檢查必填並彈出alert對話盒視窗
https://shaurong.blogspot.com/2022/04/aspnetjavascriptalert.html

[研究] NuGet 對 jQuery.Validation 1.19.2 安裝測試
https://shaurong.blogspot.com/2020/08/nuget-jqueryvalidation-1192.html

沒有留言:

張貼留言