HTML5中新增的表单控件

最新推荐文章于 2024-04-27 21:00:39 发布

xuekatie

最新推荐文章于 2024-04-27 21:00:39 发布

阅读量365

点赞数

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/xuekatie/article/details/121949334

版权

更丰富的input种类

type属性值	控件
color	颜色选择控件
date,time	日期，时间选择控件
–	–
email	电子邮件输入控件
file	文件选择控件
–	–
number	数字输入控件
range	拖拽条
–	–
search	搜索框
url	网址输入控件

<body>
    <form>
        <p>
            颜色选择控件:
            <input type="color">
        </p>
        <p>
            日期选择:
            <input type="date">
        </p>
        <p>
            时间选择:
            <input type="time">
        </p>
        <p>
            必填:
            <!-- required是必填项 -->
            <input type="text"  required>
        </p> 
        <p>
            电子邮件:
            <input type="email" required>
        </p> 
        <p>
            数字:
            <!-- 可以限制它的最小值min和最大值 max-->
            <input type="number" min="10" max="20">
        </p> 
        <p>
            数字拖拽条:
            <!-- 拖拽的是10-20之间的数 -->
            <input type="range" min="10" max="20">
        </p> 
        <p>
            搜索框:
            <!-- 本身不能实现搜索，得需要后台开发工程师来书写程序才能实现 -->
            <input type="search">
        </p> 
        <p>
            网址:
            <input type="url">
        </p> 

        <p>
            <input type="submit" value="提交表单">
        </p> 

    </form>
</body>

datalist控件
datalist控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应

<p>
         省份:
         <!-- list属性来与id进行绑定，值要相同才能匹配上 -->
         <input type="text" list="province-list">
         <datalist id="province-list">
            <!-- option在这是单标签，这是html5的新写法 -->
            <option value="山西">
            <option value="山东">
            <option value="广西">
            <option value="广东">
            <option value="湖南">
            <option value="湖北">
            <option value="河南">
            <option value="河北">
         </datalist>
</p>