快捷搜索:
来自 新京葡娱乐场网址 2019-06-15 16:30 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

全新改进的HTML5表单创建,窍门和技术

全新改进的HTML5表单创建

2011/07/24 · HTML5 · 2 评论 · HTML5

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有关最新功能展开了热烈讨论。

根据W3C,HTML5新特性的目的是在改善嵌入诸如视频的多媒体支持,提供更好的用户体验和更简单的编程。虽然HTML4中已经取得了巨大成 功,(甚至被认为最成功的标记格式已经发布)在互联网世界的每个人都耐心等待,浏览器更新时得到最新的HTML版本。随着时间推移,人们都很纳闷,还等什 么呢?事实上HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox, Opera, 以及其他主流浏览器。即使是IE9也准备好了支持新的HTML5。 HTML5的好处是,它是向后兼容的,因而,如果你乐于更新你的网站,现在你就可以。只是有几个浏览器不完全兼容HTML5。

新京葡娱乐场网址 1

升级到HTML5是相当容易的,因为它与HTML4兼容。事实上,我们没有理由摒弃HTML4的所有,因为HTML5只是一个简单的增加一堆新而酷的功能 添加到HTML4核心语言。升级(如果你是这样认为)到HTML5是非常简单的。你所需要做的的是修改你的DOCTYPE。这种新的更新有助于让事情变得 简单,而在HTML4中有你可以使用不同的文档类型,使得这一点更加棘手。你现在就可以更新你所有的网站,它们不会崩溃,因为所有HTML4的标签在 HTML5还是100%支持的。

HTML5的表单定义了十几个新的输入类型和特性,这些新增元素可以让程序员可以过个好日子。

输入框占位符

我觉得这是HTML5新特性中我最爱的。所有开发人员都使用JavaScript和jQuery做输入框占位符,而在HTML5中,开发人员可以非常容易 的显示一个占位符。什么是占位符?占位符就是出现在输入框的提示文本,当你点击输入栏位,它就自动消失。你可以把用户应该输入的文本样例在文本框提示出 来。一个例子,如果你有一个电话号码输入框,你可以设置占位符(XXX)XXX – XXXX,点击它们时就会消失。我相信你已经看过很多。

新京葡娱乐场网址 2

支持情况如下(本人开发过Android,是支持的——译者注)

IE FF  Safari  Chrome  Opera  iphone Android

–  3.7   4    4    11   4      –

自动焦点事件

目前HTML4要做到自动焦点的方式是使用JavaScript把焦点放在一个表单的第一个输入字段。HTML5只要加载一个网页,网页自动将焦点移到特 定的输入框,和JavaScript一样。区别是什么?由于现在只是一个HTML标记,用户可以很容易地在他们的浏览器禁用此属性。并非所有浏览器都支持 自动对焦功能,但浏览器不只是简单地忽略该属性。如果你想所有浏览器都行得通,只需添加新的HTML5自动对焦属性,然后检测浏览器是否支持自动对焦。如 果可以就不必使用自动对焦的脚本,如果没有的话,就要添加自动对焦的脚本。

支持情况

FF  IE  Safari  Chrome  Opera  iphone Android

–    4   4     3    10     –     –

HTML 新定义13个输入类型

电子邮件

我要说的第一个输入框是电子邮件地址。那些不支持新类型的旧版浏览器也只是把它们看作一个文本框,99%的用户不会注意到这个变化,直到他们提交表单(此 时会有表单验证)。iPhone的用户应该知道在那些邮件地址的输入框,当输入@和a的时候会出现一个简单容易的键盘。如果你用过iPhone,你懂的。

新京葡娱乐场网址 3

网址

再说说网址输入框。如果需要输入网址,期望输入的就像 。现在在网址类型输入框会出现像iPhone里面一样的一个可变化的虚拟键盘用户可以很方便输入斜线和.com。同样的,在提交表单之前用户对这些毫不知情。
数字

在过去要得到匹配的数字,你不得不使用jquery这样的脚本来帮助验证输入。HTML5增加了数字类型。还增加了一些额外的属性(可选):

Min:指定输入框可接受的最小输入数字。Max:你猜对了,就是允许输入的最大数字。 Step:属性输入域合法的间隔 ,默认是1.

新京葡娱乐场网址 4

如上图,只允许输入数字(大多数情况下不会注意到这些,直到提交的时候提示错误),只有0,2,4合法(6不合法因为step是10,合法的是0,10,20…——译者注)。

Numbers as a Slider 数字滑动条

我觉得这个真酷。HTML5允许你使用一个新的类型叫range,输入框变成一个滑动条。你的网站表单可以使用滑动条了,这很酷吧。它的属性标记和数字类型一样,只是把类型设置type=’number’改成type=’range’。

新京葡娱乐场网址 5

日历表

迄今为止最好的新增元素,名为date和datetime的日期选择器类型(还有其他额外的date/time类型,如时间,星期,月份,以及本地日 历)。 很多JavaScript框架如jQuery UI和YIU已经具备了这些控件,但增加一个日历选择器还是挺烦人的。 HTML5定义一个新的本地日期选择器,不必包括使用页面上的脚本。截至目前,Opera是一个唯一完全支持此功能的,对于其他浏览器,你可以做一个备用 脚本以备该浏览器不支持。不过,最终,所有的浏览器都会更新的。

搜索

HTML5增加了搜索输入框类型。这没什么,但对一些用户来说是很好的变化。它可以简单的把输入框自动圆边,当你开始输入时,它右边会有一个小X。目前并不是所有的浏览器支持。

新京葡娱乐场网址 6

颜色

HTML5还定义类型的颜色,它可以让你选择一种颜色,返回hexademical值。Opera11是唯一支持这种类型的浏览器。不过应该不会有很多人使用这个类型,所以不支持也不是什么大问题。

表单验证

上面我们谈到有关这些新的输入类型,如电子邮件,日期,数量等HTML5新元素中,最令人兴奋的新特性莫过于表单验证。大多数开发人员都做了表单验证,无 论是客户端或服务器端(我们两个都做!)。也许HTML5的表单验证器可能无法取代你的服务器端验证,但它肯定能最终取代你的客户端验证。 JavaScript验证的问题是,用户很容易绕过它,可以很容易绕过它只需禁用JavaScript。现在HTML5,你不用有此担心。下面是 Chrome12的一个例子。所有的浏览器和操作系统对于错误有不同的显示方式,不过这是一个例子,让你看清错误可能发生的样子。

所有的错误都是HTML5原生提示的,并没有使用JavaScript。

IE    FF   Safari   Chrome   Opera   Iphone    Andriod

–    4    5     10    9      –      -

必需字段

HTML5的表单验证并不仅仅局限于验证字段的类型,它还允许调用一个新的额外的标记,required。这个新属性允许开发人员验证输入框是否填写,无需使用JavaScript。

新京葡娱乐场网址 7

每个开发人员都知道这些更新对缩短开发周期和增强的用户体验都是至关重要。一旦所有的浏览器接受了HTML5,新一代的网站将超过任何人的期望。

那么你有了它。你可以HTML5中找到一个快速入门指南。如果你可以理解这篇文章的任何东西,请记住,HTML5不是什么可怕的麻烦。它将大大有助于开发者,而只要你有准备所有HTML4网站已经可以升级了!

原文:webdesignledger.com  编译:ArSui

赞 1 收藏 2 评论

新京葡娱乐场网址 8

八、占位符(Placeholders)

//zxx:此处内容非直译,有删改

Placeholders什么意思呢,就是文本框/文本域空间默认会有个文字提示,获得焦点时,此提示文字消失;失去焦点时如果内容为空,提示文字又出现。如下图所示:

新京葡娱乐场网址 9
新京葡娱乐场网址 10
这些表单控件里面显示的些提示性的文字就是占位符。按照以往的做法,我们需要使用一点JavaScript代码实现占位符效果,例如我之前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展示的。当然,你需要设定一个初始的默认的value值,然后根据输入内容进行判断,从而决定文本框值的改变与否。如果您使用占位符(placeholders)属性,一切就轻松了。

<label for="email">邮箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />

根据我的测试,目前仅webkit核心的浏览器支持placeholders属性,像是Chrome5,Safari4,结果如下所示:
新京葡娱乐场网址 11
新京葡娱乐场网址 12

您可以狠狠地点击这里:HTML5占位符Demo

十三、文档某一部分的信息(hgroup)

想象一下,在我的网站的标题,我有我的站点的名称,随后立即由一个副标题。虽然我们可以使用一个<h1>和<h2>标签,为其分别创造标记,但是依旧没有(因为HTML4)一个简单的方法来语义上说明了两者之间的关系。此外,一个h2标记的使用提出了更多的问题,在层次结构上,当涉及到其他网页上显示的标题时。通过使用不影响文档的大纲流hgroup元素,我们可以将这些标题组合在一起。

<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>

十六、Audio支持

我们无需再依赖第三方插件区渲染音频。HTML5提供了<audio>元素,嗯,至少,最终,我们将不必担心这些插件。就目前,只有最近期的的浏览器提供HTML5音频支持。在这个时候,它仍然是一个很好的做法提供一些向后兼容的形式。

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

Mozilla和WebKit的还没有完全相处,当涉及到音频格式, Firefox会希望看到一个.ogg文件,而WebKit的浏览器支持.mp3扩展。这意味着,至少在现在,你应该创建两个版本的音频。

当Safari加载页面时,它不会承认.ogg格式,会跳过它并移动到的MP3版本,因此。请注意IE,每往常一样,不支持这些格式,Opera 10和以及以下版本只能使用.wav文件。

前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。

十八、视频预载(Preload Videos)

预载属性不完全是你想的那个样子,虽然,你应该先决定是否要在浏览器预装的视频。是否有必要?或许吧。如果访问者访问一个专门展示了一个视频的页面,你一定要预载的视频,节约参观者等待的一部分时间。影片可以通过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案,它少了一点多余的东西。

<video preload>

新京葡娱乐场网址 13

请注意,不同浏览器渲染出来的进度条的模样都是不一样的。

三、<small>重新定义

还在不久前,<small>元素被用来创建靠近logo且相关的副标题。这是个很有用的表现元素,但是,现在,这种用法可能就不正确了。<small>元素已经被重新定义了,指小字,因而更具可用性。试想下你网站底部的版权状态,根据对此元素新的HTML5定义,<small>可以正确地包裹这些信息。

small元素专指“小字”。

二十一、属性支持检测

如果我们没有方法检测浏览器是否支持这些属性,这些就不能称之为好的属性。恩,不错的观点,事实上我们是有几种方法的,这里我们讨论2个。第一个是利用优秀的Modernizr库,或者,我们可以创建和分析这些元素,以确定浏览器的能力。例如,在我们前面的例子,如果我们要确定浏览器是否能使用pattern的属性,我们可以添加一小段JavaScript到我们的页面上:

alert( 'pattern' in document.createElement('input') ); // boolean  

事实上,这是一种确定浏览器兼容的常用方法。jQuery库了利用这种伎俩。在上面,我们创建了一个新的input元素,并确定了里面的pattern属性浏览器是否认得。如果是,浏览器则支持此功能。否则,当然就不支持了。

<script>
if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation
}
</script>

谨记此方法依赖于JavaScript。

二十八、使用区域input创建滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

<input type="range">

最值得注意的是,它可以接收 min, max, step,和value 属性,等等。虽然现在似乎只有Opera浏览器充分支持这种输入类型,但是当我们可以实际使用时,这将是美妙无比的!

参见下面的快速演示:

第一步:标签

首先,创建标签

<form method="post">
    <h4>音量控制</h4>
    <input type="range" name="range" min="0" max="10" step="1" value="" />
    <output name="result">  </output>
</form>

第二步:CSS

下面,我们要使用一点点的样式。我们将使用:before和:after去告知用户我们制定的最大值和最小值。

input { font-size: 14px; font-weight: bold;  } input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;} output {
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

第三步:JavaScript

最后,我们

  • 检测我们的浏览器是否认识range input,如果不,显示提示。
  • 当用户移动滑块的时候,动态改变output的值。
  • 监听,当用户离开滑块,插入值,同时本地存储。
  • 然后,下次用户刷新页面的时候,选择的区域和值会自动地设置成他们最后一次选择。

    (function() {

    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;   // 检测浏览器是否是足够酷
    // 识别range input.
    var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('不好意思,你的浏览器还不够酷,试试最新的Opera浏览器吧。');  // 设置初始值
    // 无论是否本地存储了,都设置值为5
    range.value = cachedRangeValue;
    result.value = cachedRangeValue;  // 当用户选择了个值,更新本地存储
    range.addEventListener("mouseup", function() {
        alert("你选择的值是:"   range.value   ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
        localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
    }, false);  // 滑动时显示选择的值
    range.addEventListener("change", function() {
        result.value = range.value;
    }, false); })();
    

您可以狠狠地点击这里:新京葡娱乐场网址 ,HTML5 range input炫酷效果demo

感谢您的阅读!我们已经讨论了很多,但可能只是触及到HTML5的皮毛,全当抛砖引玉,希望能对您的学习有所帮助!

//zxx:以上是翻译/编辑的全部内容,内容已经够多了,我就不多说什么了。

英文原文:http://net…html5-features-tips-and-techniques…/
原文作者:Jeffrey Way

二十七、Output元素

正如你可能预料到的,output元素被用来显示部分计算,例如,如果你想显示一个鼠标的位置,或者是一系列数字的总和坐标,这个数据应被插入到output元素中。

举个简单的例子,当提交按钮被按下,我们用JavaScript将两个数字相加值插入到空的output中。

<form action="" method="get">
    <p>
        10   5 = <output name="sum"></output>
    </p>
    <button type="submit">计算</button>
</form>

(function() {
    var f = document.forms[0];  if ( typeof f['sum'] !== 'undefined' ) {
        f.addEventListener('submit', function(e) {
            f['sum'].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert('你的浏览器尚未准备好!');
    }
})();

自己测试了下,貌似现在只有在Opera浏览器下有上佳的效果:

新京葡娱乐场网址 14

如果您现在使用的是较新版本的Opera浏览器,您可以狠狠地点击这里:HTML5结果输出框demo

此元素也可以接受一个属性,它反映了输出相关元素的名称,类似label工作原理。

二十六、data属性(The Data Attribute)

我们现在可以很正式地让所有的HTML元素支持自定义属性。然而,以前,我们可能会这样:

<h1 id=someId customAttribute=value> 小样,胆儿挺肥的呢 </h1>

…校验器会小题大做!但是现在,只要我们以”data”为前缀定义我们的自定义属性,盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上,可能为了JavaScript之用,那么,本属性将大有帮助啊。

HTML片段

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉,lady 嘎嘎 </div>

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还可以用在CSS中,例如下面这个有些傻里傻气的CSS文字改变的例子:

CSS代码:
.data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}



HTML代码:
<a class="data_custom" data-hover-response="我说过不要碰我!" href="#">不要碰我,雅蠛蝶~~</a>

如果你的浏览器支持after伪类,以及content的attr属性,则可以看到类似下面的效果(IE8不一样):

新京葡娱乐场网址 15

要查看上图所示的效果,您可以狠狠地点击这里:CSS与HTML5自定义属性demo

还有,content属性其实是一个非常强大的属性,由于低版本的IE不支持,所以此属性尚未流行,关于content内容生成技术,可以参见我之前的“CSS content内容生成技术以及应用”这篇文章。

十一、更多HTML5表单特征(More HTML5 Form Features )

通过下面视频学习更多有用的HTML5表单特征://zxx:TouTuBe视频,需要FQ

Subscribe to our YouTube page to watch all of the video tutorials!

四、脚本(scripts)和链接(links)无需type

您可能现在仍在给link和script标签增加type属性。

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

这已经是老黄花菜,非必需品了。这意味着,这些标签都各自指向样式表和脚本。因此,我们可以把type属性一起干掉。

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article, section,和footer,还有机会使用div…吗?当然可以。

div应该用在没有更好的元素的时候。

例如,如果你发现你需要包裹一段代码块在对内容定位处理的包装单元内。不过如果你是包裹一个博客文章,或者,可能是,底部的链接列表,则需考虑分别使用<article>和<nav>元素,因为其更具语义。

二十四、什么可以开始立即使用

一直谈论到现在的HTML5要到2022年才能全部完成,许多人完全忽视它,这是个巨大的错误。事实上,有少量的HTML5的功能,我们可以在我们所有的项目中使用!更简单,更干净的代码总是一件好事。在今天的视频快速展示的技巧中,我将告诉你一些可用的选项。

//zxx:YouTuBe视频,需要FQ

Subscribe to our YouTube page to watch all of the video tutorials!

六、内容可编辑

新京葡娱乐场网址 16
新京葡娱乐场网址 17
最新的浏览器有个很赞的新属性可以应用到元素上,叫做contenteditable。顾名思意,就是允许用户编辑元素内容包含的任意文本,包括子元素。类似的用途还有很多,像是简单的待办事项清单应用程序,可大大利用其本地存储的优势。

<ul contenteditable="true">
    <li>悼念遇难香港同胞 </li>
    <li>深圳特区30周年</li>
    <li>伊春空难</li>
</ul>

或者,根据前面所学到的一些技巧,我们可以把它写成:

<ul contenteditable=true>

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:全新改进的HTML5表单创建,窍门和技术

关键词: