html5--3.1 form元素
html5--3.1 form元素
学习要点
- form元素及其属性
form元素
- 用来定义一个表单,是建立表单的基础元素,(就类似定义表格的table)
- 表单的其他元素包含在form元素中,其主要子元素有:input/button/select......
form元素的属性
- action:指定表单的发送地址(服务器地址)
- method:表单数据发送至服务器的方法,常用的有两种:get/post
get和post提交的区别
- get方法提交,数据会附在网址之后主动提交给服务器
- post方法提交,数据不会附在网址后,会将数据打包发送给服务器,等候服务器来读取数据进行处理
HTML5 表单属性
HTML5 的新的表单属性
本章讲解涉及 <form> 和 <input> 元素的新属性。
新的 form 属性:
- autocomplete
- novalidate
新的 input 属性:
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
浏览器支持
Input type | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
autocomplete | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
autofocus | No | No | 10.0 | 3.0 | 4.0 |
form | No | No | 9.5 | No | No |
form overrides | No | No | 10.5 | No | No |
height and width | 8.0 | 3.5 | 9.5 | 3.0 | 4.0 |
list | No | No | 9.5 | No | No |
min, max and step | No | No | 9.5 | 3.0 | No |
multiple | No | 3.5 | No | 3.0 | 4.0 |
novalidate | No | No | No | No | No |
pattern | No | No | 9.5 | 3.0 | No |
placeholder | No | No | No | 3.0 | 3.0 |
required | No | No | 9.5 | 3.0 | No |
autocomplete 属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
注释:autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:
实例
<form action="demo_form.asp" method="get"autocomplete="on"
> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email"autocomplete="off"
/><br /> <input type="submit" /> </form>
亲自试一试
注释:在某些浏览器中,您可能需要启用自动完成功能,以使该属性生效。
autofocus 属性
autofocus 属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有 <input> 标签的类型。
实例
User name: <input type="text" name="user_name" autofocus="autofocus"
/>
亲自试一试
form 属性
form 属性规定输入域所属的一个或多个表单。
注释:form 属性适用于所有 <input> 标签的类型。
form 属性必须引用所属表单的 id:
实例
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form"
/>
亲自试一试
注释:如需引用一个以上的表单,请使用空格分隔的列表。
表单重写属性
表单重写属性(form override attributes)允许您重写 form 元素的某些属性设定。
表单重写属性有:
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
实例
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit"formaction="demo_admin.asp"
value="Submit as admin" /> <br /> <input type="submit"formnovalidate="true"
value="Submit without validation" /> <br /> </form>
亲自试一试
注释:这些属性对于创建不同的提交按钮很有帮助。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
注释:height 和 width 属性只适用于 image 类型的 <input> 标签。
实例
<input type="image" src="img_submit.gif"width="99"
height="99"
/>
亲自试一试
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
注释:list 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
实例
Webpage: <input type="url" list="url_list"
name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
亲自试一试
min、max 和 step 属性
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定(约束)。
max 属性规定输入域所允许的最大值。
min 属性规定输入域所允许的最小值。
step 属性为输入域规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)。
注释:min、max 和 step 属性适用于以下类型的 <input> 标签:date pickers、number 以及 range。
下面的例子显示一个数字域,该域接受介于 0 到 10 之间的值,且步进为 3(即合法的值为 0、3、6 和 9):
实例
Points: <input type="number" name="points"min="0"
max="10"
step="3"
/>
亲自试一试
multiple 属性
multiple 属性规定输入域中可选择多个值。
注释:multiple 属性适用于以下类型的 <input> 标签:email 和 file。
实例
Select images: <input type="file" name="img" multiple="multiple"
/>
亲自试一试
novalidate 属性
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注释:novalidate 属性适用于 <form> 以及以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
实例
<form action="demo_form.asp" method="get" novalidate="true"
>
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
亲自试一试
pattern 属性
pattern 属性规定用于验证 input 域的模式(pattern)。
模式(pattern) 是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。
注释:pattern 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符):
实例
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}"
title="Three letter country code" />
亲自试一试
placeholder 属性
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email 以及 password。
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失:
实例
<input type="search" name="user_search" placeholder="Search W3School"
/>
亲自试一试
required 属性
required 属性规定必须在提交之前填写输入域(不能为空)。
注释:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
实例
Name: <input type="text" name="usr_name" required="required"
/>
亲自试一试
实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <form action="https://www.baidu.com" method="post"> 9 用户名:<input type="text"> 10 密码:<input type="password"><br> 11 <input type="submit"> 12 </form> 13 </body> 14 </html>
转载于:https://www.cnblogs.com/Renyi-Fan/p/7928885.html
html5--3.1 form元素相关推荐
- html5表单实例元素,HTML5新表单元素的图文实例-
这一篇介绍html5新增的表单元素和表单属性. 首先先说一个html5中表单新增的一个功能,在我们之前的html中,表单元素必须放在form元素所包含的里面,在html5中,可以把他们写在页面上的任何 ...
- html5表单讲解,HTML5 表单新增元素与属性讲解
01 标签的control属性 中文翻译:控制 在HTML5中,可以再标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. form属性 Form属性 formaction属 ...
- 阅读类型HTML,W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)
HTML4中,元素被分成两大类: inline(内联元素)与block(块级元素).但在实际的开发过程中,因为页面表现的需要,前端工程师经常把inline元素的display值设定为block(比如a ...
- (一)html5中的新增元素和废除元素
//刘梦冰发表于2015-6-29 1.新增的结构元素 (1)section元素 section元素表示页面中的一个内容区块,比如章节.页眉.页脚或者页面中的其他部分,它可以与h1.h2.h3等元素结 ...
- 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...
- html5语义化标记元素_语义HTML5元素介绍
html5语义化标记元素 Semantic HTML elements are those that clearly describe their meaning in a human- and ma ...
- HTML5中新增的元素有哪些
HTML5中新增的元素有哪些 1.新增的结构元素 语义化的标签<article></article> 文章<section></section> 独立的 ...
- html5表单地区元素,html5新增表单域元素及属性
1.新增表单元素 在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息.表单校验.日期选择控件.颜色选择控件.范围控件.进度条.标签跨表单等功能.(早期是通过js和dom元素配合 ...
- HTML5常见120个元素
标签 描述 效果 <!-- --> 注释 <!DOCTYPE> 文档类型 <a> 锚 <abbr> 缩写 <acronym> ...
最新文章
- 一文深入了解 Redis 内存模型,Redis 的快是有原因的!
- vue小项目总结与笔记【六】——使用axios发送ajax请求
- Android沉浸式模式状态栏(二)
- Galera Cluster for MySQL 集群恢复
- 数据结构与算法-- 二叉树中和为某一值的路径
- 小爱同学100个奇葩回复_杰理新一代蓝牙芯片将内置小爱同学,语音唤醒、降噪、连续对话加持蓝牙音箱...
- H5页面适配iOS、Android和微信
- [C# 基础知识系列]专题十四:深入理解Lambda表达式
- 18 安装zlib报错_scalapack win安装及mingw64环境配置
- 贺利坚老师汇编课程47笔记:jmp指令无条件转移只修改IP
- SQL Server实际执行计划COST欺骗案例
- Linux 安装 Hive教程
- 网线制作实验相关内容
- 如何求复数的模用计算机,Excel怎么计算复数? Excel对复数进行加减乘除指数对数模的教程...
- 【时间序列】ICML 2020 时间序列相关论文总结(附原文源码)
- 电脑重启后 虚拟机不见了?
- 芒果超媒的2022年报:一半明媚,一半忧伤
- 2016年全国高中数学联赛加试T1解答
- 2022大学生就业指导答案——雷五明、雷辉等
- 半导体分立器件静态参数测试系统 DCT1401 天光测控
热门文章
- MySQL-based databases CVE-2016-6664 本地提权
- 54-locate 简明笔记
- c# 数据结构 ---双链表
- rust模组服如何切换标准服_资讯DNF手游将于3月20日发放10000个体验服资格(附申请方法)...
- mysql 表与表之间的条件比对_《MySQL数据库》关联查询
- linux抓包命令tcptrace,每天学习一个命令:tcpdump 命令行下抓包
- Spark源码分析之DAGScheduler以及stage的划分
- ControllerBrokerRequestBatch分析
- (15)VHDL测试激励编写(复位)
- (74)FPGA模块调用(VHDL调用VHDL)