学习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 就比较实用,不用在折腾了。
- 代码实现 WordPress 反垃圾评论功能
- Flash/Flex学习笔记(39):弹性运动
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
- ASP.NET vNext 概述
- 丰富排版页面——为你的wordpress主题添加短代码形式美化框
- 开放式管理基础结构 OMI
- 人类设计了游戏和AI 2017年AI在游戏中打败了人类
- WordPress 代码实现相关文章(列表模式)功能
- 自动刷新页面
- Python语言被列入全国计算机等级考试科目中
- WordPress纯代码高仿 无觅相关文章 图文模式功能
- 各种序列化库的性能数据
- WordPress内置搜索结果只有一篇文章时自动跳转到该文章
- Flash/Flex学习笔记(23):运动学原理
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 在Linux下如何根据域名自签发OpenSSL证书与常用证书转换 修改openssl.cnf配置文件创建根证书自签发泛域名证书将crt转pem格式生成 p12 格式的
- CAS 原子操作
- FlutterDojo设计之道—状态管理之路(七)
- Kubernetes K8S之存储ConfigMap详解 通过目录创建通过文件创建通过命令行创建通过yaml文件创建当前存在的ConfigMap使用ConfigMap
- Material Components——Shape的处理
- pandas系列 - (一)明细数据汇总简单场景应用
- Spring系列 SpringMVC的请求与数据响应
- PHP代码审计03之实例化任意对象漏洞
- 最简单入门深度学习
- Redis 字典结构细谈
- 终于弄明白 i = i++和 i = ++i 了
- 更简易的机器学习-pycaret的安装和环境初始化
- 直观讲解一下 RPC 调用和 HTTP 调用的区别!
- pycaret之训练模型(创建模型、比较模型、微调模型)
- 什么是递归,通过这篇文章,让你彻底搞懂递归