守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 354|回复: 0

[HTML基础] HTML 5 <input> type 属性

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    51756
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-9 11:24:11 | 显示全部楼层 |阅读模式

    实例

    带有不同输入类型的表单:

    <form action="demo_form.asp" method="get">
      First name: <input type="text" name="fname" /><br />
      Last name: <input type="text" name="lname" /><br />
      <input type="submit" value="Submit" />
    </form>
    

    亲自试一试

    (下面有更多实例)

    定义和用法

    type 属性规定 input 元素的类型。

    注释:该属性不是必需的,但是我们认为您应该始终使用它。

    HTML 4.01 与 HTML 5 之间的差异

    以下类型是 HTML5 中的新类型:color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel 以及 url。

    语法

    <input type="value">

    属性值

    描述
    button定义可点击的按钮(大多与 JavaScript 使用来启动脚本)
    checkbox定义复选框。
    color定义拾色器。
    date定义日期字段(带有 calendar 控件)
    datetime定义日期字段(带有 calendar 和 time 控件)
    datetime-local定义日期字段(带有 calendar 和 time 控件)
    month定义日期字段的月(带有 calendar 控件)
    week定义日期字段的周(带有 calendar 控件)
    time定义日期字段的时、分、秒(带有 time 控件)
    email定义用于 e-mail 地址的文本字段
    file定义输入字段和 "浏览..." 按钮,供文件上传
    hidden定义隐藏输入字段
    image定义图像作为提交按钮
    number定义带有 spinner 控件的数字字段
    password定义密码字段。字段中的字符会被遮蔽。
    radio定义单选按钮。
    range定义带有 slider 控件的数字字段。
    reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。
    search定义用于搜索的文本字段。
    submit定义提交按钮。提交按钮向服务器发送数据。
    tel定义用于电话号码的文本字段。
    text默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。
    url定义用于 URL 的文本字段。

    输入类型 - text

    定义单行输入字段的文本输入类型,用户可在其中输入文本。

    实例

    Email: <input type="text" name="email" /><br />
    Pin: <input type="text" name="pin" />
    

    亲自试一试

    输入类型 - button

    button 输入类型定义可点击的按钮,这个按钮本身不会做任何事情。button 类型常用于在用户单击按钮时启动一段 JavaScript。

    实例

    <input type="button" value="Click me" onclick="msg()" />

    亲自试一试

    输入类型 - checkbox

    checkbox 输入类型定义复选框。复选框允许用户在一定数量的选择中选取一个或多个选项。

    实例

    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
    <input type="checkbox" name="vehicle" value="Car" /> I have a car
    

    亲自试一试

    输入类型 - color

    color 输入类型用于规定颜色。

    该输入类型允许您从拾色器中选取颜色:

    实例

    Color: <input type="color" name="user_color" />

    亲自试一试

    日期和时间选择器

    HTML5 拥有多个供选择日期和时间的新的输入类型:

    • date - 选择日、月、年
    • month - 选择月、年
    • week - 选择周、年
    • time - 选择时间(时、分)
    • datetime - 选择时间、日期、月、年(UTC 时间)
    • datetime-local - 选择时间、日期、月、年(本地时间)

    下面的例子允许您从日历选取一个日期:

    实例

    Date: <input type="date" name="user_date" />

    亲自试一试

    输入类型 "month": 亲自试一试

    输入类型 "week": 亲自试一试

    输入类型 "time": 亲自试一试

    输入类型 "datetime": 亲自试一试

    输入类型 "datetime-local": 亲自试一试

    输入类型 - email

    email 输入类型用于应该包含电邮地址的输入字段。

    当提交表单时,会自动地对 email 字段的值进行验证。

    实例

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

    亲自试一试

    提示:iPhone 的 Safari 浏览器会识别 email 输入类型,然后改变触摸屏的键盘来适应它(添加 @ 和 .com 选项)。

    输入类型 - file

    file 输入类型用于文件上传。

    实例

    Select images: <input type="file" name="img" />

    亲自试一试

    输入类型 - hidden

    hidden 输入类型定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由 JavaScript 改变它们的值。

    实例

    <input type="hidden" name="country" value="Norway" />

    亲自试一试

    输入类型 - image

    image 输入类型将图像定义为提交按钮。

    对于 <input type="image">,src 和 alt 属性是必需的。

    实例

    <input type="image" src="img_submit.gif" alt="Submit" />

    亲自试一试

    输入类型 - number

    number 输入类型用于包含数字值的输入字段。

    您可以设置可接受数字的限制。

    实例

    Points: <input type="number" name="points" min="1" max="10" />

    亲自试一试

    请使用下面的属性来为 number 类型规定限制:

    属性描述
    maxnumber规定允许的最大值。
    minnumber规定允许的最小值。
    stepnumber规定合法数字间隔(如果 step="3",则合法的数字是 -3,0,3,6, 以此类推)
    valuenumber规定默认值。

    提示:iPhone 的 Safari 浏览器会识别 number 输入类型,然后改变触摸屏的键盘来适应它(显示数字)。

    输入类型 - password

    password 输入类型定义密码字段。密码字段中的字符会被遮蔽(显示为星号或实心圆)。

    实例

    <input type="password" name="pwd" />

    亲自试一试

    输入类型 - radio

    radio 输入类型定义单选按钮。单选按钮允许用户选择有限数目的选项。

    实例

    <input type="radio" name="sex" value="male" /> Male<br />
    <input type="radio" name="sex" value="female" /> Female
    

    亲自试一试

    输入类型 - range

    range 输入类型用于应该包含指定范围值的输入字段。

    range 类型显示为滑块。

    您也可以设置可接受数字的限制:

    实例

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

    亲自试一试

    请使用下面的属性来规定 range 类型的限定:

    属性描述
    maxnumber规定允许的最大值。
    minnumber规定允许的最小值。
    stepnumber规定合法数字间隔(如果 step="3",则合法数字是 -3,0,3,6,以此类推)
    valuenumber规定默认值。

    输入类型 - reset

    Reset 输入类型定义重置按钮。重置按钮会把所有表单字段重置为初始值。

    提示:请谨慎使用重置按钮!对于用户来说,不慎点击了重置按钮是件很恼火的事情。

    实例

    <input type="reset" />

    亲自试一试

    输入类型 - search

    search 输入类型用于搜索字段,比如站内搜索或谷歌搜索等。

    搜索字段的外观与常规的文本字段无异。

    输入类型 - submit

    submit 输入类型定义提交按钮。

    提交按钮用于向服务器发送表单数据。数据会被发送到在表单的 action 属性中规定的页面。

    实例

    <form action="form_action.asp" method="get">
    Email: <input type="text" name="email" /><br />
    <input type="submit" />
    </form>
    

    亲自试一试

    输入类型 - tel

    tel 输入类型用于应该包含电话号码的输入字段。

    实例

    Mobile: <input type="tel" name="user_mobile" />

    亲自试一试

    输入类型 - url

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

    会在提交表单时对 url 字段的值自动进行验证。

    实例

    Homepage: <input type="url" name="user_url" />

    亲自试一试

    提示:iPhone 的 Safari 浏览器会识别 url 输入类型,然后改变触摸屏的键盘来适应它(添加 .com 选项)。

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2019-10-23 01:07 , Processed in 0.059221 second(s), 31 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表