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