标签:选择 date 作用 html 否则 select gen ref 重要
这是补充HTML5基础知识的第五篇内容,其他为:
在之前的笔记中记录了HTML5标签元素的语义以及新定义,本周开始进入Web表单部分的学习,该章节已经读过一遍,很多表单验证的工作都可以通过HTML5完成!现在整理笔记,再次进入Web表单的神奇地域。
因该书出版较早,很多东西已经更改,我会在文中进行更正。
无论是什么站点,只要存在表单元素,基本就少不了表单验证。在HTML4中,表单验证一般交由JavaScript来完成,到了HTML5,提供了多种表单验证方式。一般最常用的便是required
属性。有了该属性,如果表单元素为空,则不能进入提交。
在HTML5时代,HTML4的表单元素依然发挥着最为重要的力量,我们用到的大多数表单还是HTML4时的元素。
<form>
<fieldset>
<legend>联系人信息</legend>
<ul>
<li>
<label for="email">邮箱:</label>
<input required type="email" id="email" name="email" />
</li>
<li>
<label for="tel">电话:</label>
<input required type="tel" id="tel" name="tel" />
</li>
<li>
<label for="url">网址:</label>
<input required type="url" id="url" name="url" />
</li>
</ul>
<input type="submit" value="提交" />
</fieldset>
</form>
上面我们使用了三个新的input类型收集用户信息,分别是email
、tel
和url
。分别表示邮件、电话和网址。
浏览器默认不对上述表单进行验证,必须加上
required
参数。
告诉浏览器,该输入域的内容为邮件格式。因各个浏览器的验证方式不同,给出的提示也不尽相同,比如上述相同的表单,在chrom v55上以及firefox上的提示分别如下:
email类型表单只会验证邮件格式是否为aa@bb
的格式,并不会判断该邮件地址是否存在。
这样方便测试没有对表单设置样式,后面会有专门介绍。
tel
类型是一个普通的文本输入域,尽管现实中电话多为数字,但tel
输入域能够接受任意字符(电话号码有时也包含非数字字符,比如+)。
在博客评论中常常看到输入网址的表单。在HTML5中,提交网址使用url
类型表单更优雅。
与email相同,该输入域只会校验输入的格式,不会确认有无该网址。
多数情况下,URL的形式类似于http://baidu.com
,但也有baidu.com
的形式存在,此外,还有其他多种形式:
由于这些URL的存在,现在表单会将aa:bb
形式的输入视为URL,验证通过。大多数浏览器都有自己的URL形式,Firefox有about:config
地址。所以,任何带有:
的URL都可通过验证。
<form role="search">
<label for="search">搜索</label>
<input type="search" id="search" name="search" />
<input type="submit" value="提交" result="5" />
</form>
上述中,type="search"
并没有特殊作用,其依然是一个普通的文本输入域。仅仅帮浏览器理解,这是搜索输入域。
传统web表单中,大多通过jquery插件来完成日期选择功能,在HTML5中,提供了一系列的日期时间表单,可以满足大多数的场景需求。
HTML5提供了如下type类型:
chrome支持
datetime-local
,不支持datatime
。
综合示例:
<form>
<fieldset>
<legend>数字选择器</legend>
<label for="number">数字选择器</label>
<input type="number" name="number" max="10" min="1" step="2" id="number" value="">
<input type="submit" name="" value="提交">
</fieldset>
</form>
number输入类型只接受数字,否则将返回验证错误。
属性:min
、max
、 step
,指定数字范围和步长。
range一般用在表单的“评价部分”,或者是控制视频的音量等。
<form>
<fieldset>
<legend>滑块</legend>
<label for="range">滑块</label>
<input type="range" name="range" id="range" value="1" step="0" max="100" min="0">
</fieldset>
</form>
和number
相同,其也有min
、max
、step
三个属性。
我们上述的滑块很好用,但有一个缺点,就是没有显示我们当前选中的值。我们可以通过output
来显示,该功能只需要一点点的JavaScript。
<form oninput="output.value=range.value">
<fieldset>
<legend>滑块</legend>
<label for="range">滑块</label>
<input type="range" name="range" id="range" value="1" step="0" max="100" min="0">
<output name="output"></output>
</fieldset>
</form>
现在,拖动上面的滚动条就可以显示当前的数值了。
备注:在之前大多是通过
onforminput
事件来完成,现在新版本的浏览器都支持form的oninput
属性,替代了原来的onforminput
。
<!--之前的写法,现在已经不支持-->
<output onforminput="value=range.value"></output>
上述可参考:Is onforminput Deprecated in HTML5 Forms? (And Why Should I Care Anyways?)
<form>
<fieldset>
<legend>颜色选择器</legend>
<label for="color">选择颜色</label>
<input type="color" name="color" id="color" value="">
<input type="submit" name="" value="提交">
</fieldset>
</form>
前面介绍了一些新的输入类型,实际上,还有一些新属性用来配合新输入类型来提高质量,而这些新属性已经广为使用。
<input placeholder="请输入您的用户名" type="text" name="username" />
在之前,这种效果只能通过JavaScript来实现。
默认的占位符为灰色与背景色没有足够的对比度,可以使用CSS来解决这个问题:
input::-webkit-input-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
我们在上面已经多次使用了required
属性,提供该属性,如果表单为空则不会提交表单,并提示相应信息。
<input type="text" required />
除了required属性外,你还可以使用aria-required="true"
,这样将提高表单元素的可用性。
上述体验了HTML5新的表单元素,在实际项目中,使用到这些地方很少,有时候会用到但也想不起来这些元素。所以,今天就完完全全的体验一次,后续项目中就可以完全使用这些新(其实也不新了。。)元素。
标签:选择 date 作用 html 否则 select gen ref 重要
原文地址:http://www.cnblogs.com/WANGJUN5945/p/6291471.html