【响应式Web设计】读书笔记
来源:互联网 发布:java 静态代理 编辑:程序博客网 时间:2024/05/30 23:15
【简介】HTML5 表单元素、HTML5 的新输入类型
1. HTML5 表单元素
1.1 placeholder 占位符
在 input 元素上加入 placeholder 属性,其属性值就会默认显示为占位符文本,输入框获取焦点时该文本会自动消失。
<input tupe="text" placeholder="请输入">
可以使用 :placeholder-shown 伪类选择器来为 placeholder 属性添加样式。
input:placeholder-shown { color: #333;}
1.2 required 必填字段
添加了 required 属性后,该字段变为必填字段,如果表单提交的时候,该必填字段没有任何信息,浏览器会给出警示信息。
<input tupe="text" placeholder="请输入" required >
1.3 autofocus 自动聚焦
autofocus 属性可以让表单在加载完成时即有一个表单域被默认选中。
<input tupe="text" placeholder="请输入" required autofocus >
1.4 autocomplete 自动补全
autocomplete 会使用浏览器默认提供的自动补全功能来辅助用户输入。默认是开启的,也可以设置关闭。
<input tupe="text" placeholder="请输入" required autofocus autocomplete="off" >
2. HTML5 的新输入类型
2.1 email 电子邮箱类型
用户需要输入符合电子邮箱地址的内容。
<input tupe="email" placeholder="abc@abc" required >
2.2 number 数字类型
用户需要输入数字类型。同时还提供了控制按钮(spinner controls),允许用户简单地点击向上和向下来改变数值。
<input tupe="number" max="10" min="1" >
2.3 url 网址类型
用于输入 URL 地址。
<input tupe="url" >
2.4 日期和时间类型
<input type="date" name="date"><input type="week" name="week"><input type="month" name="month"><input type="time" name="time">
2.5 范围值
range 输入类型会生成一个滑动条。
<input type="range" min="1" max="10" value="5" name="range">
阅读全文
0 0
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 【响应式Web设计】读书笔记
- 响应式Web设计读书笔记与实践
- 响应式web设计——读书笔记
- 《响应式web设计》读书笔记(一)入门
- 《响应式web设计》读书笔记(一)入门
- 响应式Web设计:HTML5和CSS3实战(读书笔记)
- 响应式Web设计
- CentOS安装MySql
- HTML学习笔记:框架与画中画
- 归一化处理
- Java的三种代理模式
- obj : error LNK2019: 无法解析的外部符号 "public: __thiscall B::B(void)" (??0B@@QAE@XZ),该符
- 【响应式Web设计】读书笔记
- hdu 1070 milk
- 【函数】register_shutdown_function函数详解【原创】
- python 无法读取文件 找不到文件
- 布局包含inclued标签的注意事项
- Azure 软件架构选择
- iOS MediaPlayer(视频播放器) 笔记
- [7.11] 纪中C组
- 多线程编程10例问题(5)