阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    HTML5 新的 Input 类型

    HTML5 新的 Input 类型

    HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

    本章全面介绍这些新的输入类型:

    • color
    • date
    • datetime
    • datetime-local
    • email
    • month
    • number
    • range
    • search
    • tel
    • time
    • url
    • week

    注意: 并不是所有的主流浏览器都支持新的input类型,不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。


    Input 类型: color

    color 类型用在input字段主要用于选取颜色,如下所示:

    从拾色器中选择一个颜色:

    选择你喜欢的颜色: <input type="color" name="favcolor">
    

    Input 类型: date

    date 类型允许你从一个日期选择器选择一个日期。

    定义一个时间控制器:

    生日: <input type="date" name="bday">
    

    Input 类型: datetime

    datetime 类型允许你选择一个日期(UTC 时间)。

    定义一个日期和时间控制器(本地时间):

    生日 (日期和时间): <input type="datetime" name="bdaytime">
    

    Input 类型: datetime-local

    datetime-local 类型允许你选择一个日期和时间 (无时区).

    生日 (日期和时间): <input type="datetime-local" name="bdaytime">
    

    Input 类型: email

    email 类型用于应该包含 e-mail 地址的输入域。

    在提交表单时,会自动验证 email 域的值是否合法有效:

    E-mail: <input type="email" name="email">
    

    提示: iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。


    Input 类型: month

    month 类型允许你选择一个月份。

    定义月与年 (无时区):

    生日 (月和年): <input type="month" name="bdaymonth">
    
    

    Input 类型: number

    number 类型用于应该包含数值的输入域。

    您还能够设定对所接受的数字的限定:

    定义一个数值输入域(限定):

    数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
    

    使用下面的属性来规定对数字类型的限定:

    属性 描述
    disabled 规定输入字段是禁用的
    max 规定允许的最大值
    maxlength 规定输入字段的最大字符长度
    min 规定允许的最小值
    pattern 规定用于验证输入字段的模式
    readonly 规定输入字段的值无法修改
    required 规定输入字段的值是必需的
    size 规定输入字段中的可见字符数
    step 规定输入字段的合法数字间隔
    value 规定输入字段的默认值

    尝试一下带有所有限定属性的例子


    Input 类型: range

    range 类型用于应该包含一定范围内数字值的输入域。

    range 类型显示为滑动条。

    定义一个不需要非常精确的数值(类似于滑块控制):

    <input type="range" name="points" min="1" max="10">
    

    请使用下面的属性来规定对数字类型的限定:

    • max - 规定允许的最大值
    • min - 规定允许的最小值
    • step - 规定合法的数字间隔
    • value - 规定默认值

    search 类型用于搜索域,比如站点搜索或 Google 搜索。

    定义一个搜索字段 (类似站点搜索或者Google搜索):

    Search Google: <input type="search" name="googlesearch">
    

    Input 类型: tel

    定义输入电话号码字段:

    电话号码: <input type="tel" name="usrtel">
    

    Input 类型: time

    time 类型允许你选择一个时间。

    定义可输入时间控制器(无时区):

    选择时间: <input type="time" name="usr_time">
    

    Input 类型: url

    url 类型用于应该包含 URL 地址的输入域。

    在提交表单时,会自动验证 url 域的值。

    定义输入URL字段:

    添加您的主页: <input type="url" name="homepage">
    

    提示: iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。


    Input 类型: week

    week 类型允许你选择周和年。

    定义周和年 (无时区):

    选择周: <input type="week" name="week_year">
    

    HTML5 标签

    标签 描述
    <input> 描述input输入器
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录