代码改变世界

学习HTML5之表单

2015-02-03 16:34  金色海洋(jyk)  阅读(7861)  评论(1编辑  收藏  举报

 

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 就比较实用,不用在折腾了。



2