学习HTML5之表单

 

HTML5 的标准已经定了,应该火了,或者已经火了。那么是不是可以学习一下呢?

 

目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿。所以这里侧重的是手机里面的表现。

 

先来看看表单。h5里面增加了一些新的标签和属性,解决了我们以前比较头疼或者繁琐的功能。

 

先看看input里面的type属性,新增了一些属性,比如email、number、date、range等,那么他们的表现到底如何呢?我们来罗列一下。

 

 <form >
        <input type="checkbox" name="c1" value="11"/> <input type="checkbox" name="c1" value="12"/>多选 <br/><br/>
        <input type="radio" name="r1"  value="21"/> <input type="radio" name="r1"  value="22"/> 单选<br/><br/>
        <input id="color" type="color"/> 颜色:<span id="spanColor"></span><br/><br/>
        <input id="month" type="month"/> 月份:<span id="spanMonth"></span><br/><br/>
        <input id="week" type="week"/> 周:<span id="spanWeek"></span><br/><br/>
        <input id="date" type="date"/> 日期:<span id="spanDate"></span><br/><br/>
        <input id="" type="datetime"/> 日期和时间 (UTC 时间)(这个没有效果)<br/><br/>
        <input id="datetime" type="datetime-local"/> 日期和时间 (本地时间):<span id="spanDatetime"></span><br/><br/>
        <input id="time" type="time"/> 时间:<span id="spanTime"></span><br/><br/>

        <input id="email" type="email"/> email (提交表单的时候会自动进行简单的验证)<br/> <span id="spanEmail"></span><br/>
        <input id="file" type="file"/> 文件 (应该可以上传手机里的图片,没测试)<br/> <span id="spanFile"></span><br/>
        <input id="number" type="number" max="100" min="10" step="2" value="4"/> 数字 (输入法会变成数字形式)<br/> <span id="spanNumber"></span><br/>
        <input id="range1" type="range" max="100" min="10" step="10" value="1" /> 滑动块 <br/> <span id="spanRange"></span><br/>
        <input id="range2" type="range" max="100" min="10" step="1" value="1" /> 滑动块 <br/> <span id="span1"></span><br/>
        <input id="password" type="password"/> 密码(输入法会变成英文和数字形式)<br/> <span id="spanPassword"></span><br/>
        <input id="tel" type="tel"/> 电话 (数字键盘和#号)<br/> <span id="spanTel"></span><br/>
        <input id="text" type="text" placeholder="请输入。。。"/> 文本 (输入法会变成中文形式)<br/> <span id="spanText"></span><br/>
        <input id="url" type="url"/> url(输入法会变成英文形式)<br/> <span id="spanUrl"></span><br/>

        <input id="search" type="search"/> 查询 (输入法里面增加“放大镜”,点击放大镜后会提交表单)<br/> <span id="spanSearch"></span><br/>

        <input id="reset" type="reset" value=" 清 空 "/> <br/>
        <input id="submit" type="submit" value=" 提 交 "/> <br/>
        <input id="button" type="button" value=" 取 值 "/><br/>

    </form>

 

w3school 里面有介绍,我也是看这里的资料学习的,里面有在线演示,这个功能很强大。当然自己动手做一遍,印象可以更深刻。所以有了上面的代码。

 

先看看在手机浏览器里面的表现。

type="number" 这个很好很强大,在手机里,点文本框后,输入法会自动变成数字形式,这个就大大方便输入,不需要用户再次修改输入法的状态了。
type="week" "date" 等,在手机里面也有很漂亮和方便的选择方式。
type="range" 是滑动块。目前没想到很合适的应用场景。

type="url" 输入法会自动切换成英文输入状态。
type="email" 在提交表单的时候会做自动的检测,只是检测标准比较简单,要有 @,前后要有字符。然后就符合条件了。这个嘛,嗯嗯。
type="color" 这个可以选择颜色,什么地方可以应用到呢?值是 #123456的形式。
type="datetime" 这个说是 UTC 时间,但是在chrome和手机里面都没要任何效果,和普通的文本框一样。type="datetime-local" 才有效果。

还有新增了一些属性,这个下次在说。

在说一下事件。选择性的input可以用onchange事件,选完了就会触发获得选择的值,onclick的话,是先触发事件,然后才会去change。
type="range" 可以用 onmousemove 事件,移动一下就会把值取出来。只是不知道是不是应该这么用,一开始还好用,可以刷了几次之后居然给玩死了。
 datalist 元素: <input type="url" list="url_list" name="link" />
        <datalist id="url_list">
            <option label="W3School" value="http://www.jb51.net" />
            <option label="Google" value="http://www.google.com" />
            <option label="Microsoft" value="http://www.microsoft.com" />
        </datalist>
<datalist > 是啥?asp.net里面的datalist吗?看效果不是。

w3school 给出来的例子是和input配合使用,实现既可以选择又可以自己添加内容的“下拉列表框”。想想以前实现这样的功能是多么的头疼,现在两个标签就搞定了。js都不用写。只是需要浏览器支持!

在线演示效果http://demo001.naturefw.com/input.htm

我知道 w3school 里面有演示,只是那个比较分散,我的这个比较集中。另外加上了客户端取值的js脚步,可以看看控件的值是啥。比如 color。在pc里面看没啥意思,在手机里面看看,可能会有惊喜哦。

手头里只有小米手机,也不知道兼容性如何。大家感兴趣的话,欢迎帮忙测试一下,谢谢了。

下面会研究一下属性,placeholder 就比较实用,不用在折腾了。
				
时间: 2024-10-31 14:38:38

学习HTML5之表单的相关文章

HTML5的表单属性简介

HTML5 的新的表单属性 本章讲解涉及 <form> 和 <input> 元素的新属性. 新的 form 属性: autocomplete novalidate 新的 input 属性: autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step mul

javascript html5实现表单验证_javascript技巧

表单验证为终端用户检测无效的数据并标记这些错误,是一种用户体验的优化. 下面展现浏览器自带的验证功能也可在移动端中查看: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

HTML5的表单元素简介

HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素规定输入域的选项列表. 列表是通过 datalist 内的 op

深入学习jQuery Validate表单验证_jquery

本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

深入学习jQuery Validate表单验证(二)_jquery

本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一.添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. /* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */ jQuery.extend(jQ

html5 form表单里有多个 input type=&amp;amp;quot;search&amp;amp;quot;的问题?

问题描述 html5 form表单里有多个 input type="search"的问题? html5页面 form表单里有多个 input type="search",在手机上浏览,在search框内 输入后,点击键盘右下角的搜索,form表单没有提交.若form表单里只有一个search, 则会提交表单.这类问题主要是什么? 解决方案 把名字去不一样,看行不行 解决方案二: <input type="search" name="

HTML5新表单color实例讲解

1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv=&quo

Symfony2框架学习笔记之表单用法详解_php实例

本文实例讲述了Symfony2框架表单用法.分享给大家供大家参考,具体如下: 对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将 从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单: 假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所

HTML5的表单新增了哪些属性?

1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <formid="testform">      <inputtype="text">     </form>     <textareaform="testform"></textarea> 2. 表单内元素的forma