<form id="aForm" action="reg.php">
<p>请填写表单内容以完成注册!</p> <fieldset>
<legend>联系方式</legend>
<label for="name">姓名</label>
<input id="name" placeholder="Ye Feng" autofocus required pattern="[A-Z]{5}"><br>
<label for="tel">电话</label>
<input id="tel" type="tel"><br>
<label for="email">电子邮件</label>
<input id="email" type="email"><br>
<label for="url">个人网址</label>
<input id="url" type="url"><br>
</fieldset> <fieldset>
<legend>个人信息</legend>
<label for="age">年龄</label>
<input id="age" type="number" step="0.1" min="1" max="99"><br>
<label for="weight">体重</label>
<input id="weight" type="range" value="10" min="1" max="99"><br>
<label for="gender">性别</label>
<select id="gender">
<option value="female">女</option>
<option value="male">男</option>
</select><br>
<label for="comments">对自己做简单的介绍:</label><br>
<textarea id="comments"></textarea>
</fieldset> <fieldset>
<legend>选择你最喜欢的小动物</legend>
<label for="zebra"><input id="zebra" type="checkbox">斑马</label>
<label for="cat"><input id="cat" type="checkbox">猫猫</label>
<label for="anaconda"><input id="anaconda" type="checkbox">蟒蛇</label>
<label for="elephant"><input id="elephant" type="checkbox">大象</label>
</fieldset> <p><input type="submit" value="提交"></p>
<p><input type="submit" value="保存表单信息但不提交" formnovalidate></p>
</form>

<fieldset>元素:
可将表单内的相关元素分组。

<legend>元素:
表示父元素<fieldset>元素的标题。

<label>标签:
为input元素定义标签。

<input>标签:
用于搜集用户信息。默认的类型是text。可以使用占位符placeholder来添加文本提示,也使用自动焦点autofocus在页面加载时获得焦点。

<select>标签:
创建下拉列表。

<option>标签:
定义下拉列表中的一个选项。

<textarea>标签:
定义一个多行的文本输入区域。

checkbox类型:
定义input的类型为复选框。

submit类型:
定义input的类型为提交按钮。

HTML5验证:
1.简单的HTML5验证:
input标签的required属性,max属性和min属性:
指示输入字段的值是必需的,或者数字的范围。HTML5验证属于客户端验证,在单击提交按钮后触发。如果验证失败,会取消提交操作,并显示错误消息。
2.使用正则表达式进行验证:
使用pattern属性。
3.关闭验证:
在<form>标签中使用novalidate属性,禁用整个表单的验证功能;
在提交按钮中添加formnovalidate属性,来绕开表单验证,以保存未完成的数据等。

HTML5中新的输入控件:
在之前的表单中,我们用一个<input>标签来创建普通文本输入区或者复选框、提交按钮等等,用type来控制不同的类型。
在HTML5中,引入了新的email等等类型。
作用:
1.提供编辑辅助。如在移动端中,如果<input>的类型是数字,则会自动采用数字虚拟键盘;
2.根据类型提示错误;
3.根据类型执行验证。
新的<input>类型有:
email:电子邮件
url:网址(在firefox中好像默认必须以http开头,不好用)
tel:电话
number:数值类型(会生成微调按钮。默认只接受整数,但可以通过修改step属性来接受小数。还可以给出min和max属性来限制最大值和最小值)
range:数值类型(以滑动条的形式显示)
另外还有6种日期时间类型,不过大部分浏览器好像并支持。

html5中的表单的更多相关文章

  1. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  2. 测试开发之前端——No5.HTML5中的表单事件

    表单事件 由 HTML 表单内部的动作触发的事件. 适用于所有 HTML 5 元素,不过最常用于表单元素中: 属性 值 描述 onblur script 当元素失去焦点时运行脚本 onchange s ...

  3. HTML5中 HTML表单和PHP环境搭建及与PHP交互 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! 知识点概括:HTML表单/PHP环境搭建/表单提交数据与PHP交互 第一部分:HTML表单 <!DOCTYP ...

  4. HTML5的form表单属性

    form:HTML4中,表单内的从属元素必须书写在<form></form>之内,但是在HTML5中,表单的从属元素可以处于页面的任何位置,然后为其添加form属性,属性值为f ...

  5. JavaScript中的表单编程

    表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form ...

  6. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  7. django中form表单的提交:

    一,关于表单: 表单在百度百科的解释:   表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法. 表单域 ...

  8. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  9. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

随机推荐

  1. 免费PHP WEB环境套件介绍

    PHPNOW--Apache + PHP + MySQL(windows) easyphp--Apache + PHP + MySQL+phpmyadmin(windows) xampp(中文站点)- ...

  2. CentOS6.5下安装wine OK

    这篇文章主要记录了如何在CentOS 6.5上安装Wine 1.7.24开发版 1.安装需要的软件包 # yum groupinstall ‘Development Tools‘ # yum inst ...

  3. ContentProvider官方教程(11)Calendar Provider、Contacts Provider、Storage Access Framework

    Calendar Provider: guide/topics/providers/calendar-provider.html Contacts Provider: guide/topics/pro ...

  4. KEIL MDK 5.12帮你快速建工程模板的技巧

    KEIL 5帮你快速建工程模板的技巧 本人使用keil mdk 5.12有一段时间了,发现keil mdk 5.12里面驱动库比较方便.这个新功能可以节省我们的时间,也可以让初学者能尽快上手和掌握这个 ...

  5. Common Macros for Build Commands and Properties

    https://msdn.microsoft.com/en-us/library/c02as0cs.aspx $(ProjectDir)      The directory of the proje ...

  6. Oracle数据库名、实例名、数据库域名、数据库服务名、全局数据库名的辨析

    我也是看着各位大婶的博客然后一点点的来学习,不求全会,留个印象 数据库名 数据库名就是一个数据库的标识,用参数DB_NAME表示. 如果一台机器上安装了多个数据库,那么每一个数据库都有一个数据库名. ...

  7. ___security_cookie机制,防止栈溢出

    从研究底层和汇编以来,已经多次接触到“栈溢出”这个名词了. 这次在汇编码中看到了个不明就里的 ___security_cookie ,查了下,原来是编译器的安全检查机制.转载一篇文章: 首先,secu ...

  8. 线程入门之优先级priority

    package com.thread; /** * 优先级: * Thread.MAX_PRIORITY:最大优先级 10 * Thread.MIN_PRIORITY:最小优先级 1 * Thread ...

  9. Github上不错的Android开源代码(一)

    总有一些朋友很热心的整理一些好的资料,在收集之后,可以用作阅读.学习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) 为了防止以上链接失效,以及部分内容丢 ...

  10. iOS - Threads 多线程

    1.Threads 1.1 进程 进程是指在系统中正在运行的一个应用程序.每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开 QQ.Xcode,系统就会分别启动两个进程. ...