HTML5新增属性学习笔记
1、form属性
表单内的从属元素,可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。
1 <form id="testForm">
2 <input type="text">
3 </form>
4 <textarea form="testForm"></textarea>
详细学习内容可参看:HTML5新增的form属性简介
2、formaction属性
给所有的提交按钮增加formaction属性,可以通过不同的按钮将表单提交到不同的页面。
1 <form id="testForm" action="serve.jsp">
2 <input type="submit" name="s1" value="v1" formaciton="s1.jsp">提交到s1
3 <input type="submit" name="s2" value="v2" formaciton="s2.jsp">提交到s2
4 <input type="submit">
5 </form>
浏览器支持:Internet Explorer 10, Firefox, Opera, Chrome, 和 Safari 支持 formaction 属性。
3、formmethod属性
formmethod 属性定义发送表单数据到 action URL 的 HTTP 方法。
<form id="testForm" action="serve.jsp">
<input type="submit" name="s1" value="v1" formaciton="s1.jsp" formmethod="post">提交到s1
<input type="submit" name="s2" value="v2" formaciton="s2.jsp" formmethod="get">提交到s2
</form>
4、placeholder属性
用于未输入文本框显示输入提示。
1 <input type="text" placeholder="请输入用户名">
5、autofocus属性
给文本框、选择框或者按钮添加autofocus属性,可在页面打开时自动获得光标焦点。一个页面上只能有一个具有autofocus属性的控件。
1 <input type="text" autoforcus>
浏览器支持:Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 autofocus 属性。
6、list属性
为单行文本框特有属性,配合datalist标签使用。属性值为datalist标签的id。
1 text:<input type="text" list="testList">
2 <datalist id="testList" style="display:none;">
3 <option value="Good Morning">Good Morning</option>
4 <option value="Hello">Hello</option>
5 <option value="Good Afternoon">Good Afternoon</option>
6 </datalist>
浏览器支持:Internet Explorer 10、Firefox、Opera 和 Chrome 支持 list 属性。
7、autocomplete属性
规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
text:<input type="text" name="textInput" list="testList" placeholder="输入一句英文问候语" autocomplete="on">
<datalist id="testList" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
详细学习内容可参看:HTML5 autocomplete属性、表单自动完成
8、input的新增type属性种类
值 |
描述 |
---|---|
url |
定义用于输入 URL 的字段。 |
time |
定义用于输入时间的控件(不带时区)。 |
search |
定义用于输入搜索字符串的文本字段。 |
number |
定义用于输入数字的字段。 |
定义用于 e-mail 地址的字段。 |
|
date |
定义 date 控件(包括年、月、日,不包括时间)。 |
datetime |
定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。 |
datetime-local |
定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。 |
month |
定义 month 和 year 控件(不带时区)。 |
week |
定义 week 和 year 控件(不带时区)。 |
range |
定义用于精确值不重要的输入数字的控件(比如 slider 控件)。 |
tel |
定义用于输入电话号码的字段。 |
color |
定义拾色器。 |
详细学习内容可参看:HTML <input> type 属性
- 一个只有99行代码的JS流程框架 (一)
- 【腾讯云的1001种玩法】试用腾讯云 Windows Server 2012 R2 镜像的几点经验分享
- 一个只有99行代码的JS流程框架(二)
- 看书的时候如何调试书中简单的C+代码?
- gcForest 集成学习方法的 Python 实现
- 云端架构师养成系列之一:高性能云硬盘入门与实战(视频)
- 云端架构师养成系列之二:云端负载均衡上手与实践
- 微信 PaxosStore:海量数据冷热分级架构
- 使用腾讯云容器服务来构建简单web service
- 使用 plotly 绘制数据图表
- 基于云计算的 CV 移动交互应用研究:头部姿态估计综述(2)
- 使用 trie 树实现简单的中文分词
- 重磅发布!2017年度 DevOps 现状调查报告中文完整版!
- AI 泡沫前,我们怎么办?中美两国人工智能产业发展全面解读
- 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 实例
- PHP封装XML和JSON格式数据接口操作示例
- 浅谈PHP进程管理
- php使用fullcalendar日历插件详解
- PHP htmlspecialchars()函数用法与实例讲解
- 浅谈PHP匿名函数和闭包
- Ubuntu 18.04上安装Apache、MySQL、PHP、LAMP的完整教程
- ubuntu18.04获取root权限并用root用户登录的实现
- Linux云服务器安装JDK和Tomcat的详细步骤(推荐)
- 浅析Linux下利用coredump技术追查进程崩溃原因
- Linux下rpm、yum和源码三种安装方式详细介绍
- linux(center OS7)安装JDK、tomcat、mysql 搭建java web项目运行环境
- 帮助你排序文本文件的 Awk 命令行或脚本(推荐)
- Centos7备份文件时备份文件加入备件日期
- Linux traceroute命令使用详解
- Linux 添加开机启动方法(服务/脚本)