HTML5中新增的一些表单控件

最新推荐文章于 2023-03-08 23:57:32 发布

hello_xujj

最新推荐文章于 2023-03-08 23:57:32 发布

阅读量450

点赞数

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/xjj19999272/article/details/116019713

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML5中新增的表单控件

在HTML5，新增加了一些表单控件，这些表单控件提供了非常有用的一些功能。

更丰富的input种类

下表是新增加的type属性值和其所对应的控件：

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

示例代码如下：

<body>
    <form action="" method="post">
        <!-- 颜色选择控件 -->
        <p>
            请选择你喜欢的颜色：
            <input type="color">
        </p>
        <!-- 时间、日期选择控件 -->
        <p>
            请输入时间、日期：
            <input type="date">
            <input type="time">
        </p>
        <!-- 电子邮件输入控件 -->
        <p>
            请输入收件人的邮箱：
            <input type="email">
        </p>
        <!-- 数字输入控件 -->
        <p>
            请输入你的幸运数字：
            <input type="number">
        </p>
        <!-- 文件选择控件 -->
        <p>
            请选择文件：
            <input type="file">
        </p>
        <!-- 搜索框、拖拽条 -->
        <p>
            搜索框、拖拽条：
            <input type="search">
            <input type="range">
        </p>
        <!-- 网址输入控件 -->
        <p>
            请输入网址：
            <input type="url">
        </p>
        <p>
            <input type="submit" value="提交表单">
        </p>
    </form>
</body>

在HTML5中新增的表单控件中、电子邮件输入控件和网址输入控件都需要输入规范，邮箱必须加@符号，网址须以http开头，否则会提示你。代码效果如下：
在这里插入图片描述

<datalist>控件

<datalist>控件可以为输入框提供一些备选项，当用户输入的内容与备选项文字相同时，将会显示智能感应。这个我相信在平常都遇到过，示例代码如下：

<p>
    省份：
    <input type="text" list="province-list">
    <datalist id="province-list">
        <option value="北京市">
        <option value="天津市">
        <option value="上海市">
        <option value="重庆市">
        <option value="山西省">
        <option value="山东省">
        <option value="广东省">
        <option value="广西省">
        <option value="湖南省">
        <option value="湖北省">
        <option value="河北省">
        <option value="河南省">
        <option value="台湾省">
    </datalist>
</p>

代码效果如下：
在这里插入图片描述

可以看到，我输入“北”字，下拉框会智能匹配带“北”字的省份。

hello_xujj

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5中新增的一些表单控件

HTML5中新增的表单控件在HTML5，新增加了一些表单控件，这些表单控件提供了非常有用的一些功能。更丰富的input种类下表是新增加的type属性值和其所对应的控件：type属性值控件color颜色选择控件email电子邮件输入控件date、time日期、时间选择控件number数字输入控件file文件选择控件search搜索框range拖拽条url网址输入控件示例代码如下：<body> &l
复制链接

扫一扫