首页 > 软件开发 > HTML >

快速学会HTML5语言-37-HTML5-input(实例)

来源:互联网 2023-03-16 19:11:54 163

快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

工具/原料

  • 电脑软件Sublime

方法/步骤

  • 1

    在创建网站页面的时候,经常会做表单开发。用户输入的大部分内容都是在表单form>中并提交到后台的。HTML5中input>标记新增很多type类型,如url类型。dWU办公区 - 实用经验教程分享!

    url类型是一种专门用来输入url地址的文本框,如果该文本框中内容不是url地址格式的文字,则不允许提交,如图本例子效果。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="url">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 2

    新增email类型,提交表单时,自动验证此输入框的内容是否为电子邮件格式,如果不是则无法提交,如图本例子效果。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="email">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 2相关内容未经许可获取自百度经验
  • 3

    新增date类型,购买日期、发布时间、订票时间等都是以date类型的时间以日历形式来方便用户输入。在HTML4中需要结合JavaScript才能实现日历选择日期的效果,在HTML5中,只需要设置input为date类型。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="date">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 4

    新增time类型,专门用来输入时间的文本框,并在提交时对输入时间的有效性进行检查。它的外观根据不同游览器呈现不同。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="time">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 5

    新增datetime类型,专门用来输入本地日期和时间的文本框,目前主流游览器都不支持datetime类型。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="datetime">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 6

    新增color类型,拾色器专门用来输入颜色值。dWU办公区 - 实用经验教程分享!

    form>dWU办公区 - 实用经验教程分享!

    input type="color">dWU办公区 - 实用经验教程分享!

    input type="submit" value="提交">dWU办公区 - 实用经验教程分享!

    /form>dWU办公区 - 实用经验教程分享!

    快速学会HTML5语言-37-HTML5-input(实例)dWU办公区 - 实用经验教程分享!

  • 注意事项

    • gif动态图将重复播放。
    • 按住Ctrl键 鼠标滚动滑轮可以放大网页查看。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!dWU办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码