HTML5基礎 input type 多種類型的輸入框


             OS : Windows 10
        browser : Chrome 83.0.4103.116
         editor : Visual Studio Code 1.46.1       
    typesetting : Markdown

html


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form>
        郵箱:<input type="email" /><br />

        <!--  -->
        手機號:<input type="tel" /><br />

        <!-- number類型的input,字母是輸不進去的 -->
        數字:<input type="number" /><br />

        <!-- http要帶上 -->
        網址:<input type="url" /><br />

        <!--
            輸入內容后
            輸入框的末尾會出現一個可以清空全部內容的 小叉
          -->
        搜索:<input type="search" /><br />

        <!-- range配合上javascript,可以調節音量和背景顏色 -->
        可以拖動的滑塊:<input type="range" /><br />

        <!-- 顏色 -->
        顏色:<input type="color" /><br />

        <fieldset>
            <!-- 時間類型的input 在移動端另有效果 -->
            <legend>設置時間</legend>
            時間:<input type="time" /><br /> 年月日:
            <input type="date" /><br /> 月份:
            <input type="month" /><br /> 星期:
            <input type="week" /><br />
        </fieldset>
        <input type="submit" />
    </form>
</body>

</html>

result

resource

  • [ 教程 ] www.w3school.com.cn/html/index.asp
  • [ 手冊 ] www.w3cschool.cn/html5_reference.html
  • [ 規范 ] www.runoob.com/html/html5-syntax.html
  • [ 平台 ] www.cnblogs.com
  • [ 規范-參考 ] www.w3cschool.cn/wematy
  • [ 統計-參考 ] tongji.baidu.com/research/site#browser


感恩曾經幫助過 客名利 的人。
html,xhtml和html5的發展歷史及其特性,建議學習。
代碼的書寫是有規范的,適當地遵守規范,助人助己。
Chromium和Firefox是開源瀏覽器,新功能眾多,建議關注。
Blink,EdgeHTML,Gecko,KHTML,Trident,WebCore,WebKit等,空閑時可以了解一下。
不同的瀏覽器解析代碼是有差別的,要多關注兼容性問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM