跟永哥学HTML5(6):H5表单及表单验证

表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签。表单域(包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等)。 表单按钮:包括提交按钮、复位按钮和一般按钮;

HTML 5一个令人兴奋的发展领域是新的Web表单。

在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

跟永哥学HTML5(6):H5表单及表单验证

您还将看到浏览器现在可以提供一个日期选择日历,并设置自动对焦到一个字段。建议使用谷歌浏览器,它是目前唯一与全力支持HTML5的浏览器。如果使用搜狗或360请使用高速模式。





HTML5表单演示|中国<span class="wpcom_keyword_link"><a href="http://www.125jz.com" target="_blank" title="网页设计">网页设计</a></span>

HTML 5 表单 演示

请使用支持html5的浏览器测试,哪些浏览器支持HTML5?



← autofocus here





HTML5表单代码解析:

设置姓名字段必填项:

<label for="form-1">姓名 (required) </label>
<input id="form-1"  name= "haha" type="text" autofocus required>

看到代码了吗?只需要在input 标签里设置required 即可,而属性autofocus 是让输入框自动获取焦点!

哇塞,HTML5的表单功能真是酷毙了!!

年龄我们设定是18到25周岁之间,只需要设置文本框的type=”number” min=”18″ max=”25″属性即可,彻底让JavaScript说拜拜了。

      <label for="form-4">年龄</label>
      <input id="form-4"  name="age" type="number" min="18" max="25">

而设置文本框必须输入EMAIL更是简单到家:

<input id="form-5"  name="email" type="email" required>

同理个人站点需要你输入的是一个网址:只需要设置type=”url”代码如下:

<label for="form-6">个人站点</label>
<input id="form-6"  name="url" type="url">

那么如何让出生日期文本框显示一个可供选择的日历呢?

跟永哥学HTML5(6):H5表单及表单验证

使用HTML5可以非常方便的让浏览器提供一个日期选择日历,代码:

<label for="form-7">Date of Birth</label>
<input id="form-7"  name="dob" type="date">

即设置文本框的type=”date”即可哦,怎么样,心动了吧,马上行动哦!

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1421.html

(3)
江山如画的头像江山如画管理团队
上一篇 2018年2月26日 下午9:19
下一篇 2018年2月28日 上午11:55

99%的人还看了以下文章

  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1.2K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    3.2K0
  • javascript-快速掌握DOM技术

    Javascript的组成: 1.  js的语法(核心)。 2. DOM(文本对象模型) :用于操作HTML文档的应用编程接口。 DOM的出现使得动态HTML(DHTML)得以实现,可以不用重新加载页面而改变网页的外观和内容。 DOM的级别(版本):DOM1,DOM2,DOM3 3. BOM(浏览器模型)  BOM是Browser Object Model的…

    2018年7月17日
    1.6K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.2K0
  • CSS制作简洁的栏目/标题样式

    CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…

    2019年1月5日
    7.7K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    4.0K0

发表回复

登录后才能评论