html5表单元素详解
表单是Html中获取用户输入的手段。此文对表单的元素进行了详细整理。
表单基本元素 form input button
form元素
html4中,form元素相当于表单的外包装,其他都要在里面。html中,相关元素可以放在任何位置,但要在其中定义一个for属性,属性值为相关form的id值。
相关属性
1.action,说明提交表单时,浏览器应该把收集的数据发送到什么地方。
2. method,说明用来将表单数据发送到服务器的http方法,有post,get两种方法。
get用于安全交互,同一个请求可以发起任意多次不会产生额外作用,用于获取只读信息。
post用于不安全交互,提交会引起一系列状态变化,拿不准用哪一种则用post.
3.enctype说明了浏览器对发送服务器的数据采用的编码方式,有三种方法。
application/x-www-form-urlencoded未设置属性3时默认的编码方式,除不能传递文件到服务器,适用于任何类型。
传递时特殊字符替换为对应html实体,数据项的名称和值以等号(=)分开,各项数据间以&分卡。
如两个input分别为name:fave;value:apples.name:name;value:adam freeman.编码后的结果:
fave=apples&name=adam+freeman
mutipart/form-data更加复杂,只用于需要上传文件到服务器时的表单。
text/plain没有正式规范,慎用
4.autocomplete 控制表单自动完成功能,默认值为on,表明允许浏览器填写,否则为off。input也有这个属性
5.target 表明提交表单后反馈信息所在页面,有5个值。
_blank 显示在新窗口或新标签
_parent 显示在父级框组中
_self反馈在当前窗口,默认行为
_top显示在顶层窗口
<frame> 显示在指定窗框中
6.name 设置独一无二的标识符,用于区分各个表单。另input没name值的话不会发送数据到服务器。
例
<form name="fruitvote" id="fruitvote" method="post" action="http://baidu.com" target="_balnk" autocomplete="off" enctype="application/x-www-form-urlencoded">
<input name="fave"/>
<input name="name"/>
<buttton> subbmit </buttton>
</form>
以上是设置在form元素中的属性
7.label 为每个文本框添加标签 for属性对应相关Input的id值,有助于屏幕阅读器和其他残障辅助技术对表单的处理。
例
<p><label for="fave"> fruit<inout id="fave" name="fave"></label></p>
8.autofocus 表单显示出来时,聚焦于某个input元素
例
<p><label for="fave"> fruit<inout id="fave" name="fave" autofocus></label></p>
9. disable 禁用某个input元素,用法同8.novalidate,表明是否进行有效性检查
10.fieldset将表单进行编组,属性disable可以禁用整个分组
11.legend fieldset内部的第一个子元素
例
button元素
不同操作由其type属性决定,分别有三个
1.submit 表示按钮作用是提交表单
属性formction 覆盖form的action属性
formenctype覆盖enctype
formmethod覆盖method
target覆盖target
formnovalidate覆盖novalidate,表明是否进行有效性检查
2.reset表示重置所有input为初始状态,无另外属性
3.button 仅仅是个按钮,没其他含义
input元素
input的属性与其type属性息息相关,当type属性为以下时
1. text,默认形式,显示为一个单行文本框。
size 设定了文本框能显示的字符数目
maxlength设定了用户能输入的字符最大数目
placeholder设置提醒文字,灰色
value 设置默认值
list 设置datalist元素得出id值,其中datalist元素提供一批值,以便帮助用户输入需要的数据,提供给用户选择的值歌咏一个option元素指定,option元素被选中的是其value值,但显示的可以是label属性值,也可以是option的内容.
例
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW"label="aaa">
<option value="Ford">aaa</option>
<option value="Volvo">
</datalist>
readonly 阻止用户编辑,但外观无变化,能提交给服务器,但无变化的外观会有误会,慎用
disabled 阻止用户编辑,显示灰色,不能被提交到服务器
requires 必须输入一个值,不然无法验证
2.password 输入密码
相关属性,maxlength,pattern正则表达式,placeholder,readonly ,required,size,value
3.submit,reset,button,生成类似button元素。
submit型input和button同名属性用法相同
4.number 只能输入整数或浮点数
相关属性
list,类似于text的list属性
min,max可接受的最小最大值
readonly,只读
required
step,上下调节的步长
value初始值
5.range只能从规定范围选一个值,属性和number型相同。
6.checkbox选择是或否的复选框
相关属性
checked刚显示出来时为选中状态
required必须勾选该复选框
value,默认为On,设定复选框呈勾选状态提交给服务器的数据值。 不太懂,后面再说
7.radio单选按钮
相关属性
checked初始选中状态
required必须在一组单选按钮中选择一个
value,呈选定状态时提交的值。
8.email,tel.url能接受输入分别为电子邮箱地址,电话号码和url的数据。其中email还支持multiple的属性,表示可以多个地址。
9.datetime 获取世界时日期,包括时区。例2011-07-19T16:49:39.444Z
datetime-local 获取本地时间和日期,不包括时区信息 例2011-07-19T16:49:39.444
date 获取本地日期 例2011-04-20
month 获取年月信息 例2011-04
time 获取时间 例17:02:22.415
week 获取当前星期 例2011-w30
支持性不高
10.color 用来选择颜色,支持list属性
11.search型没啥用
12.hidden 不显示不能编辑,但能传送给服务器
13. image 显示为一幅图像,点击表示提交
14.file 提交文件
其他表单元素
select
产生一个列表供用户选择,类似datalist
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
mutiple属性表示可多选,可以在内部用optgroup分组。
textarea
rows(宽)和cols(高)属性控制大小,wrap属性 两个值hard.soft,wrap 属性规定当在表单中提交时,文本区域(text area)中的文本如何换行.
hard表示当在表单中提交时,textarea 中的文本换行(包含换行符),当使用 "hard" 时,必须规定 cols 属性。
soft表示当在表单中提交时,textarea 中的文本不换行。默认值。
output
表示计算结果
keygen
生成公开或私有密钥
html5表单元素详解的更多相关文章
- select表单元素详解及下拉列表模拟实现
原文地址:→看过来 写在前面 select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多 ...
- html表单元素及表单元素详解
原文 https://www.jianshu.com/p/b427daa8663d 大纲 1.认识表单 2.认识表单元素 3.表单元素的分类 4.表单元素——文本框 5.表单元素button 6.表单 ...
- html5中output元素详解
html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...
- html5的datalist元素详解
html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
- html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- html5中time元素详解
html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...
- HTML5: HTML5 表单元素
ylbtech-HTML5: HTML5 表单元素 1.返回顶部 1. HTML5 表单元素 HTML5 新的表单元素 HTML5 有以下新的表单元素: <datalist> <ke ...
随机推荐
- SqlServer建立存储过程,方便.NET插入自增字段
首先,需要在数据库中创建一个表,以在test数据库创建tableNo表为例: create table tablesNo ( tableName ) not null, --表名 num int no ...
- Binary Search Tree Iterator leetcode
Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...
- Implement Stack using Queues leetcode
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- JAVA面试题和答案
本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...
- sed 删除换行符
sed 删除换行符 sed ':label;N;s/\n/:/;b label' filename sed ':label;N;s/\n/:/;t label' filename 上面的两条命令可以实 ...
- PDO(20161107)
PDO MySQLI是针对MySQL数据库扩展的,是专门访问MySQL数据库的 PDO是一个数据库访问的一个扩展类,通过一个类访问多个数据库,就是一个数据访问抽象层,把类结合在一块了 可以访问别的数据 ...
- HTML5 移动页面自适应手机屏幕四类方法
1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统. ...
- ELK5.0安装教程
ELK升级后,安装稍微发生了点变化,在Elasticsearch中增加了很多资源上的限制,其他的倒是没什么变化.不过所有的安装都是基于JDK已经安装完的情况,且为1.8版本. 安装Elasticsea ...
- apache 配置多个版本的 php
注:这里说的是windows环境下的配置 我们在配置apache+php的时候,是在apache的配置文件httpd.conf里加载php的模块并指定php.ini路径 LoadModule php5 ...
- windows和linux删除文件方法
Windows下bat文件内容如下:复制代码 代码如下: @echo offforfiles -p "D:\servers\apache2.2\logs" -s -m *.log ...