h5智能表单

说起h5,特点之一就是表单的强化。

好了,给刚学习前端又不懂后端的新手普及下input怎么传递数据给后台的。懂的可以跳过。比如

<input value="1234" name="haha">

一按提交可以发现浏览器地址那出现xxx/xxxx.html?haha=1234 这样(默认用get方法嘛,所以你简单就看到数据),后台主要分析请求,就能拿到数据啦。嗯,体会下这里属性name的作用。下面进入正题。

一、先说说input标签的type

怎么操作的呢。我从W3C扒下来,结合实践结果来分享下

嗯,不用数了,13个,其中一个目前目前目前(现在是17年8月)我看是废的,还一个是残的。不卖关子了,这里先说下,分别是废的datetime和残的color

不同类型,不同效果(废话)。

url:判断是否为网址,前面还有加上http或者ftp这些开头

number:有个控件可以选择加减

color:选颜色用的,怎么说他残呢?因为我几个浏览器都试过了,点右边颜色没反应,要先点左边的颜色:)

email:移动端下会出现英语键盘!(超人性化!)要你填邮件地址啦,格式不对时,最新浏览器都会提示你,谷歌的在这方面做的最好,其他的也基本跟上了<此话的作用域不限于此:)>

tel:移动端下会出现数字键盘!(超人性化!)嗯,就填数字的。

range:有max,min,step这些,有个控件可以拖动。我想到个“我不常用的”标签:<meter>....................

search:输入框后面有个X可以清空输入。。。有的鸡肋(发现又一小残)

时间:嗯,接下来6个我把它归为时间一类。我只用了谷歌和火狐测试。。。时间一类在火狐都废了。。。嗯,我的火狐还是最新的。

datetime:废的,我还没看到哪个浏览器有效果,呵呵,先留着坑吧。

datetime-local:年月日时分(有日历)

date:年月日

month:年月(呵)

week:周 提交后数据长“2017-W51”大概这样

time:时分

二、其他

我数了数,7个。。

placeholder:很出名嘛  边框里的提示效果,以前的人要写js来实现

autocomplete:这个试了下,要注意,表单里要有name(其他没试过),提过后才会有记忆保存   值是on或者off(十分方便的属性啊)

autofocus:多个input标签都存在该属性时第一个生效

list:看到这个属性我就眼前一亮了!然后用火狐测一下,嗯,眼前暗了一半。还是那句话,谷歌支持得最好(这里又不禁想起h5在移动端的火热,因为手机的浏览器都用webkit作内核,而谷歌以webkit为原型的。如果这里说的不对记得提醒我啊)。list这里可以相当于label那个for。不多说,代码:

<input type="text" list="la">
<datalist id='la'>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</datalist>

这里没有一个属性是浪费的,datalist我看是select的增强版

required:强大!不填就没法提交表单数据,cool!

pattern:填正则用的,我试了pattern=“\d{1,3}”,没错意思是输入一至三为数字,其他会提示请输入正确的格式。这里有个bug,我不输入也可以提交。(谷歌火狐同情况,欢迎指正。)

formaction:一般用在提交按钮里,比如你的form里action写着个地址,正常来说你按提交,就提交到action写的地址里。如果你想别的功能,比如保存现在写的东西,你可以在弄个保存按钮,里面就用formaction属性,值就填目标url咯。

好了。完。