• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > html5新增的表单控件和表单属性有哪些

html5新增的表单控件和表单属性有哪些

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了html5,表单控件,表单属性等相关知识,希望对您有所帮助

html5新增的表单控件和表单属性有哪些


HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。

HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。

新的输入性表单控件:

email:电子邮箱文本框,跟普通的没什么区别

- 当输入不是邮箱的时候,验证不通过

- 移动端的键盘会发生变化


tel:电话号码

url:网页的URL

search:搜索引擎

- chrome下输入文字后,会多出一个关闭的X


range:特定范围内的数值选择器

- min、max、step(步数)

- 例子: 用js来显示当前数值


number:只能包含数字的输入框

- 输入框末尾有两个箭头 上为加 下为减


color:颜色选择器

- 点击显示颜色版


datetime:显示完整日期

- 类似select选择样式


datetime-local:显示完整日期, 不包含时区

time:显示时间,不含时区

date:显示日期{年月日}

week:显示周{年月日周}

mouth:显示月{年月}

<form>    <input type="email" />    <input type="tel" />    <input type="url" />    <input type="search" />    <!--一个滑块加一根长条 min最小表示数 max最大表示数 step 划一格跳几个数字-->    <input type="range" min="1" max="10"  step="2"/>  <!---->  <input type="number" />  <input type="color" />    <input type="submit" /></form>


新的表单特性和函数

placeholder:输入框提示信息

- 例子:微博的密码框提示


autocomplete

- 默认为on,关闭提示选择off


autofocus:指定表单获取输入焦点

list和datalist:为输入框构造一个选择列表

- list值为datalist标签的id


required:此选项必填, 不能为空

Pattern:正则验证

- pattern=“\d{1,5}”


Formaction在submit里定义提交地址

<input type="text"    placeholder="请输入4-16个字符" // 输入框内显示    autocomplete="off" // 是否记录输入的值    autofocus // 聚焦    required // 输入框不能为空    pattern="\d{1,5}" // 必须输入1到5个数字/>// required 和 pattern 具有安全隐患 如果在控制台修改input的pattern和required 那么就可以破除校验 // 如果用户在某个页面输入相当多的数据,临时有事需要离开一段时间,此时数据应该保存至草稿箱,那么同一个form表单下,将会有两个不同地址的sumbit提交 ope浏览器已支持 其余浏览器可能不支持<form action="https://www.baidu.com">    <input type="text">    <input type="submit" value="提交" />    <input type="submit" value="保存至草稿箱" formaction="http://www.zztuku.com"/></form>



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • HTML5 canvas如何绘制酷炫能量线条效果(附代码)
  • 使用HTML5开发App有哪些优缺点
  • 带你了解HTML5 SVG,看看怎么绘制自适应的菱形
  • html5以及jQuery实现本地图片上传前的预览代码实例讲解
  • HTML5中video标签如何使用
  • html5的drag和drop的用法示例
  • html5新增的表单控件和表单属性有哪些
  • 如何利用HTML5 canvas旋转图片?(实例演示)

相关文章

  • 2022-04-29LayUI如何实现数据分页功能
  • 2022-04-29网站地图设计的五个技巧
  • 2022-04-29dedecms修改摘要、标题、缩略图等字数和大小限制
  • 2022-04-29解析关于Thinkphp5复合型缓存的使用问题
  • 2022-04-29Photoshop制作破碎玻璃字体效果教程
  • 2022-04-29jQuery表单插件jquery.form.js
  • 2022-04-29提高mysql千万级大数据SQL查询优化30条经验(Mysql索引优化注意)
  • 2022-04-29Illustrator结合PS制作超酷的立体字教程
  • 2022-04-29Phpstudy:80或者3306端口占用解决方案
  • 2022-04-29vue.js项目怎么实现百度地图显示

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PhotoShop制作简单的桔子果肉文字效果新手教程
    • phpcms后台上传不了图片怎么办
    • 浅谈小程序中实现图片下载功能的方法
    • Dedecms文章审核后给会员增加积分或者金币的办法
    • Illustrator结合PS制作超酷的立体字教程
    • 关于24小时快速排名SEO优化关键词排名前三的猫腻
    • 让dede:flink拥有和dede:arclist一样使用limit标签
    • wordpress错误提示”抱歉,由于安全原因,这个文件类型不受支持。”解决方法
    • 织梦CMS整站源码通用安装教程(加固版和普通版都一样)
    • Photoshop结合C4D制作三维立体艺术字

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有