HTML5学习之二:HTML5中的表单1

(本内容部分节选自《HTML 5从入门到精通》)

1.新增表单元素与属性

————————————————————————————————————————————————————————

placeholder——是指当文本框(<input type=“text”>或<textarea>)处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时,模糊显示输入提示文字。

<label>搜索:<input type="text" placeholder="请输入搜索项"></label>

效果图:

list——该属性的值为某个datalist元素的id。

Datalist——也是HTML5中新增元素,该元素类似于选择框(select),但是当用户想要设置的值不在选择列表之内时,允许其自行输入。该元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误,可以用CSS等将它设定为不显示。它们的用法见下面和autocomplete合用的例子。

autocomplete——用来保护敏感数据,避免本地浏览器对它们进行不安全的存储。可以指定“on”、“off”与“”(不指定)这三种值。不指定时,使用浏览器的默认值(取决于各浏览器的定)。把该属性设为on时,可以显示指定候补输入的数据列表。使用detailst元素与list属性提供候补输入的数据列表,自动完成时,可以将该detailst元素中的数据作为候补输入的数据在文本框中自动显示。

效果图:

代码:

  1  <p>打开autocomplete:<input type="text" name="mr" autocomplete="on" list="testing"/>
  2  <p>关闭autocomplete:<input type="text" name="mr" autocomplete="off" list="testing"/>
  3  <datalist id="testing" style="display:none">
  4  	<option value="111222333">111222333</option>
  5     <option value="111222233">111222233</option>
  6     <option value="111233333">111233333</option>
  7  </datalist>

min和max特性——可以将range输入框的数值输入范围限定在最低值和最高值之间。默认的min为0,max为100。输入型控件会根据设置的参数对值范围做出相应调整。例如,创建一个表示型大小的range控件,值范围从0%至100%,代码如下所示:

<input id="confidence" name="mr" type="range" min="0" max="100" value="0">

step——对于输入型控件,设置其step特性能够制定输入值递增或递减的梯度。

例如,按如下方式表示型大小range控件的step特性设置为5:

<input id="confidence" name="mr" type="range" min="0" max="100" step="5" value="0">

设置完成后,控件可接受的输入值只能是初始值与5的倍数之和。也就是说只能输入0、5、10…..100,至于是输入框还是滑动条输入则

由浏览器决定。

Step特性的默认值取决于控件的类型。对于range控件,step默认值为1。为了配合step特性,HTML5引入了stepUp和stepDown两个函数对其进行控制。这两个函数的作用分别是根据step特性的值来增加或减少控件的值。

required——一旦为某输入型控件设置了required特性,那么此项必填,否则无法提交表单。

用法:

<input type="text" id="firstname" name="mr" required>

2.增加与改良的input元素种类

————————————————————————————————————————————————————————

email类型——一种专门用来输入email地址的文本框。

作用说明:提交时如果该文本框中内容不是email地址格式的文字则不允许提交,但是它不检查email地址是否存在。

类型属性:email类型的文本框具有一个multiple属性,它允许在该文本框中是用逗号隔开的有效email地址的一个列表。

使用方法:

 <p>Email address:<input type="email" name="e1" multiple>
 <p>useless Email Address:<input type="email" name="ue1">

效果图:(IE上没啥表示,这是Firefox上的效果)

url类型——和上面的差不多,自带检查功能

各种时间类型——

作用:方便输入

作用说明:在Opera浏览器中,当该文本框获得焦点时,显示日历,可以在日历中选择日期进行输入。

注意:不是所有的都有用,自己在使用的浏览器上测验

  1  <p>Email address:<input type="email" name="e1" multiple/>
  2  <p>useless Email Address:<input type="email" name="ue1"/>
  3  <p>data-type:<input name="data1" type="date" value="2015-10-4"/>
  4  <p>time-type:<input name="time1" type="time" value="10:00"/>
  5 <!--下面这两个对我的opera无用;火狐一个也不认-->
  6  <p>datetime-type:<input name="datetime1" type="datetime"/>
  7  <p>datetime-local:<input name="datetime-local1" type="datetime"/>
  8  <p>month-type:<input name="month1" type="month" value="2015-10"/>
  9  <p>week-type:<input name="week1" type="week" value="2015-W28"/>

search类型——Search类型的input元素是一种专门用来输入搜索关键词的文本框。Search类型与text类型仅仅在外观上有区别。(经测验,好像目前来讲,都没区别。。。)

tel类型——被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则,它甚至不强调只输入数字,因为很多电话号码常常带有额外的字符,例如44-1234567。但是在实际开发中可以通过pattern属性来指定对于输入的电话号码格式的验证。

number类型——Number类型的input元素是一种专门用来输入数字的文本框,并且在提交时会检查其中的内容是否为数字。它与min、max、step属性能很好地协作。

显示:在Opear中,它显示为一个微调器控件,将不能超出最大限制和最小限制(如果指定了的话),并且根据step中指定的增量来增加,当然用户也可以输入一个值。

range类型——range类型的input元素是一种只允许输入一段范围内数值的文本框,它具有min属性与max属性,可以设定最小值与最大值(默认为0与100),它还具有step属性,可以指定每次拖动的步幅。在Opera浏览器中,用滑动条的方式进行值的指定

示例:

 <p>number-type<input name="number-type" type="number" value="10" step="5" min="0" max="130"/>
 <p>音量调节&nbsp;<input name="r1" type="range" value="50" min="0" max="100" step="2"/>

效果图:

时间: 2024-10-12 19:17:46

HTML5学习之二:HTML5中的表单1的相关文章

[原创]java WEB学习笔记73:Struts2 学习之路-- strut2中防止表单重复提交

本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱好者,互联网技术发烧友 微博:伊直都在0221 QQ:951226918 -----------------------------------------------------------------------------------------------------------------

django框架学习:二十四.django表单post登录案例

前言 上一篇学习了注册案例,今天学习一下post登录案例,注册是往数据库插入数据,登 录是从数据库里面查询数据. 注册页面 新建HTML文件,表单提交页面包含name,age,qq,psw,提交. 页面显示如下: 注册页面视图函数 通过表单提交的请求数据,先去数据库进行查询,如果有返回用户名已经存在,如果没有此用户名在数据库创建保存提交的数据,密码psw为了安全需要进行加密处理. 密码加密make_password from django.contrib.auth.hashers import

Html中的表单

 在讲解今天Html表单之前,还是先看张图片来刺激一下. 源码 <span style="font-size:18px;"><html> <head> <title>超链接演示</title> <!--网页标题--> <body> <h1 align="center">仿百度搜索框</h1> <form action="01.php&quo

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

在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!DOCTYPE html><html> <head> <title>表单测试</title> <meta charset="utf-8" /> <!-- 在不支持h5的浏览器中,可以用CSS样式进行改写 --> &

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form

感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(一) 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(二)内容交互 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(三)DOCTYPE和字符集 免费的HTML5连载来了<HTML5网页开发实

HTML5项目笔记2:离线系统表单设计

在这个离线系统中,表单无疑是构成这个离线系统的视图部分,作为最前端,与客户的操作最密切相关的一块,所以我们有必要先了解一下HTML5的Forms API,它有如下特性: 表单仍然使用Form元素作为容器,我们可以在其中设置基本的提交性质: 用户或者开发人员提交页面的时候,表单仍用于向服务器端发送表单中控件的值: 沿用之前的表单控件及其使用方法,并不断发展和增加新的控件和功能: 可以用脚本操作表单控件: HTML5包含了大量的新的API和元素类型,如下: 新的输入型控件: 类型 用途 input 

Oracle学习(二)_多表操作

--第一部分:SQL基础 --ch1 简单查询 --ch2 查询基本概念 --ch3 数据过滤 --第二部分:多表操作 --ch4 集合理论 --ch5 内连接 --ch6 外连接 --ch7 子查询 --第三部分:数据分组 --ch8 简单统计 --ch9 数据分组 --ch10 分组数据过滤 --第四部分:SQL函数 --ch11 内置函数 --ch12 case表达式 --第五部分:DML语句 --ch13 插入数据 --ch14 修改数据 --ch15 删除数据 ------------

SpringMVC学习(十二)——SpringMVC中的拦截器

SpringMVC学习(十二)--SpringMVC中的拦截器 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.本文主要总结一下SpringMVC中拦截器是如何定义的,以及测试拦截器的执行情况和使用方法. SpringMVC中拦截器的定义和配置 SpringMVC中拦截器的定义 在SpringMVC中,定义拦截器要实现HandlerInterceptor接口,并实现该接口中提供的三个方法,如下: public class Inter

JavaScript中的表单编程

表单编程 1获取表单相关信息 1.什么是表单元素 1.什么是表单元素 在H TML中表单就是指form标签,它的作用是将用户输入或选择的数据提交给指定的服务器 2.如何获取表单元素 <form id="form1" name="form1"></form><script>//方法一:let fm = document.getElementbyId("fm");//方法二:let fm = document.fo