HTML5表单
来源:互联网 发布:淘宝上春药叫什么名字 编辑:程序博客网 时间:2024/06/18 11:35
表单新增属性
form属性
在HTML5以前,一个表单的元素必须放在<form></form>
标记对之间。HTML5为所有表单元素新增了form属性,使用form属性可以定义表单元素和某个表单之间的隶属关系,这时就不需要在遵循前面的规定了。定义表单元素和表单的隶属关系只要给表单元素的form属性赋予某个表单的id值即可。
基本语法:
<form id="myform">……</form><input type="text" form="myform"/>
autofocus属性
HTML5表单的<textarea>
和所有<input>
元素都具有“autofocus”属性,其值是一个布尔值,默认值是false。一旦为某个元素设置了该属性,页面加载完成后,该元素将自动获得焦点。需要注意,一个页面中最多只能有一个表单元素设置该属性。
基本语法:
<input type="text" autofocus/><textarearows="…" cols="…" autofocus>……</textarea>
placeholder属性
placeholder属性主要用于在文本框或文本域中提供输入提示信息。当表单元素获得焦点时,显示在文本框或文本域中的提示信息将自动消失,当元素内没有输入内容且失去焦点时,提示信息又将自动显示。
基本语法:
<input type="text" placeholder="提示信息"/>
required属性
required属性可以验证某个表单元的内容是否为空。
基本语法:
<input type="text" required/>
语法说明:除了input元素可以设置required属性外,textarea、select等元素也可以设置该属性。
新增的input元素类型
- tel——电话输入框文本
- email——E-mail输入文本框
- url——URL地址输入文本框
- number——数值输入文本框,可设置输入值的范围
- range——以滑动条的形式表示特定范围内的数值
- search——搜索关键字输入的文本框
- color——颜色选择器,基于取色板进行选择
- date——日期选择器
- time——时间选择器
- datetime——包含时区的日期和时间选择器
- datetime-local——不包含时区的日期和时间选择器
- week——星期选择器
- month——月份选择器
举个栗子吧^_^:
<form action="" id="myform"></form><input type="text" form="myform" name="usersname" autocomplete="on"/><input type="submit" form="myform"/><p>邮箱:<input type="email" form="myform" required req autofocus/></p><p>网址:<input type="url" form="myform" placeholder="请输入一个网址"/></p><p>日期:<input type="date" form="myform"/></p><p>时间:<input type="time" form="myform"/></p><p>月:<input type="month" form="myform"/></p><p>周:<input type="week" form="myform"/></p><p>数字:<input type="number" form="myform"/></p><p>滑动条:<input type="range" form="myform"/></p><p>搜索:<input type="search" form="myform"/></p><p>颜色:<input type="color" form="myform"/></p>
新增的表单元素
datalist元素
datalist元素的功能是辅助表单文本框的内容输入,用于生成一个隐藏的下拉菜单,其相当于一个“看不见”的select元素。datalist下拉菜单包含的选项生成方式使用<option>
标记来产生,显示文本是<option>
的value属性值。需要注意,datalist元素一般需要跟某个文本框结合使用,结合方式是通过将输入框的“list”属性值设置为datalist的id值。下面举个栗子哈^_^:
<p>车:<input id="mycar" list="cars"/><datalist id="cars"/><option value="宝马"/><option value="奔驰"/></datalist></p>
阅读全文
0 0
- HTML5表单
- html5表单
- html5 表单
- HTML5:表单
- HTML5表单
- html5-表单
- HTML5-表单
- HTML5 表单
- html5表单
- html5-表单
- HTML5 表单
- HTML5:表单
- HTML5-表单
- HTML5表单
- 表单-- HTML5
- html5-表单
- HTML5表单
- HTML5----表单
- CSP
- LeetCode 53. Maximum Subarray (Easy)
- 迭代器前置式递增比后置式递增效率要高
- 【ios笔记】顶部信息JDStatusBarNotification及自定义颜色
- reduce计算数组中元素出现的次数
- HTML5表单
- 浅谈Python3.6版本的几种拷贝方式
- solr批量导入数据,配置步骤示例
- 内存对齐
- 悉尼峰会:Oslo组件的重大更新
- [NOIP2017普及组]T3棋盘
- jqgrid 备忘
- 2.6 数据连接的处理
- 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等