- 浏览: 87338 次
- 性别:
- 来自: 苏州
-
文章分类
最新评论
-
liang3307：
好，我们也在使用html5，其中为了离线可以完全访问，把服务端 ...
HTML5 本地数据库
增加与改良的input元素
url类型
该类型的input元素是一种专门用来输入URL地址的文本框。提交时如果该文本框中的内容不能转换为URL格式，则不允许提交，使用方法如下：
<input type="url" name="url" value="http://www.iteye.com/"/>
email类型
该类型的input元素是一种专门用来输入Email地址的文本框。提交时如果不能转换为Email格式，则不允许提交，但是它并不检查该地址是否存在。提交时该文本可以为空，除非使用required属性。该类型的文本框具有multiple属性，它允许在文本框中输入多个Email地址，用逗号间隔。使用方法如下：
<input type="email" name="email" value="lucifinil_hades@hotmail.com"/>
date类型
该类型的input元素以日历的形式方便用户输入，使用方法如下：
<input type="date" name="date1" value="2011-10-02"/>
time类型
该类型的input元素专门用来输入时间的文本框，并且在提交时会对输入的时间的有效性进行检查，使用方法如下：
<input type="time" name="time1" value="21:00"/>
datetime类型
该类型的input元素专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查，使用方法如下：
<input type="datetime" name="datetime1"/>
datetime-local类型
该类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。使用方法如下：
<input type="datetime-local" name="datetime-local1"/>
month类型
该类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份的有效性进行检查，使用方法如下：
<input type="month" name="month1" value="2011-10"/>
week类型
该类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号之有效性进行检查，其格式类似于“2011-W07”，表示2011年第七周，例如：
<input type="week" name="week1" value="2011-W07"/>
number类型
该类型的input元素专门用来输入数字，并且在提交时会检查其中的内容是否为数字。并且还有min、max和step属性。使用方法如下：
<input type="number" name="num" value="25" min="10" max="100" step="5"/>
range类型
该类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0到100），它还具有step属性，可以指定每次托运的步长，使用方法如下：
<input type="range" name="range1" value="25" min="0" max="100" step="5"/>
search类型
该类型的input元素是一种专门用来输入搜索关键词的文本框。该类型与text类型仅仅在外观上有区别。
tel类型
该类型的input元素被设计为用来输入电话号码的专用文本框。它没有特殊的校验规则，不强制输入数字（因为许多电话号码通常带有其他文字），但开发者可以通过pattern属性来指定对于输入的电话号码格式的验证。
color类型
该类型的input元素用来选取颜色，它提供了一个颜色选取器。
file类型
HTML5中的文件选择文本框可以通过指定multiple属性，一次选择多个文件。value属性的值为用逗号分割的一个或多个文件名。同时，通过把MIME类型指定给accept属性，可以限制选择文件的类型。
output元素的追加
在HTML5中，追加了新的元素output元素，该元素定义不同类型的输出，例如：计算结果或脚本的输出。该元素必须从属于某个表单，也就是说，必须将它书写在表单内部或者对它添加form属性。例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>output元素示例</title>
</head>
<body>
<form name="testForm">
<label for="range1">请选择一个数值：</label>
<input type="range" name="range1" min="0" max="100" step="5"/>
<output onforminput="value=range1.value">50</output>
</form>
</body>
</html>
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中， ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1711绘制变形图形 坐标变换 绘制图形的时候，我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1133UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是： ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1334绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1749选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1443使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1555canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1538CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5446Geolocation API的基本知识 在HTML5中，为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4691基础知识 Web Worker是在HTML5中新增的，用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4170基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2031基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1894applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1580离线Web应用程序介绍 在HTML5中新增了一个API，为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2621本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1639Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1252video元素和audio元素的方法 play()方法：使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1752音频和视频元素的属性 这两种元素所具有的属性大致相同，介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 971video与audio元素基础 在HTML5中，video元 ... -
HTML5 拖放API
2011-10-17 19:43 4967在HTML5中，已经支持在浏览器与其他应用程序之间的数据互相拖 ...
相关推荐
HTML5中form表单的新增属性.ppt
这些新增元素和属性的引入，极大地扩展了网页的功能，增强了用户交互体验，同时也简化了开发者的工作流程。 ### HTML5新增属性 #### 1.1 contextmenu属性 HTML5新增了`contextmenu`属性，用于指定右键菜单。在...
在表单处理方面，HTML5新增了多个属性和元素，极大地丰富了网页上用户输入数据的方式。以下将详细介绍这些新增的表单元素和属性，以及它们的实例解析。 首先来看placeholder属性，这个属性用在`<input>`元素上，...
1. 表单内元素的form属性 ...2. 表单内元素的formaction属性 在H4中，表单的提交方式 <form action=1.jsp> </form> 提交整个表单 在H5中，可以为表单的每一个属性添加提交到的jsp页面 <form action=1.
HTML5在表单处理方面带来了许多增强和改进，特别是在input元素上添加了新的属性，以提升用户体验和数据验证。本文档主要关注HTML5中新增的三个input属性：autocomplete、autofocus和form。 1. **autocomplete属性**...
HTML5在表单功能上做了重大扩展，引入了一系列新的`input`属性，使得表单控件的使用更加灵活，提供了更强大的数据验证和用户体验。在本文档中，主要介绍了几个关键的新属性，包括`formaction`、`height`、`width`、`...
HTML5为表单带来了许多增强的功能，其中关键的一环是新增的input属性。这些属性使得表单输入更加灵活，提供了更好的用户体验和数据验证。以下是四个主要的新增属性的详细说明： 1. **multiple** 属性： 在HTML5...
HTML5在表单元素中引入了多个新的input属性，这些属性极大地增强了表单的功能和用户体验。以下是基于案例的三个关键属性的详细说明： 1. **image类型input的height和width属性** 在HTML5中，`<input type="image">...
HTML5在表单功能上做了许多增强，引入了一系列新的input属性来提高用户体验和表单的交互性。这里我们将深入探讨三个关键的新属性：autocomplete、autofocus和form，通过案例来理解它们的作用。 1. autocomplete属性...
本文主要讨论了三个重要的新增元素：`<datalist>`、`<keygen>`和`<output>`。 1. **`<datalist>`元素** `<datalist>`元素用于创建一个可选的下拉列表，为用户提供预设选项，方便用户快速选择，而无需手动输入。它...
1. **HTML5表单元素**：HTML5新增了多种表单元素，如`<input type="email">`用于电子邮件输入，`<input type="date">`用于日期选择，`<input type="tel">`用于电话号码输入等。这些元素提供了内置的验证功能，减少了...
HTML5中的`<input>`元素是网页表单的核心组成部分，用于创建各种用户输入接口。它支持多种输入类型，使得开发者能够构建功能丰富的交互式表单。以下是对标题和描述中涉及的知识点的详细说明： 1. **输入类型（type...
周期表中的每个元素都代表着一个HTML标签，这些标签分为不同的类别，如文本内容元素、行内元素、块级元素、表格元素、表单元素、多媒体元素等。例如，`<header>`和`<footer>`用于定义页面头部和底部，`<article>`和`...
在HTML5中，表单内的元素可以通过`form`属性与特定的表单关联，即使这些元素不在表单标签内部。例如，第8行的`<textarea>`通过`form="testform"`属性与`<form id="testform">`关联，使得这个文本框成为表单的一部分...
此外，HTML5还增强了表单元素的功能，例如新增了`<input type="date">`、`<input type="email">`等输入类型，提高了数据验证的能力。同时，`<canvas>`元素提供了图形绘制能力，而`<video>`和`<audio>`元素则支持...
但在HTML5中，这些元素可以放置在页面的任意位置，并通过新增的`form`属性关联到相应的表单。例如： ```html ... ``` 这种方式使得开发者能够更自由地布局页面元素，同时保持逻辑上的清晰性和一致性。 #### ...
例如，`<input>`元素新增了`type="date"`、`type="range"`等属性，允许用户在表单中直接输入日期或滑动选择值，提高了用户体验。`<video>`和`<audio>`元素的`controls`属性则可以方便地在浏览器内直接播放多媒体内容...