前端开发HTML5——表单标签
表单简介
Form表单主要用于用户与Web应用程序进行数据的交互,它允许用户将数据发给web应用程序,网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成,这些表单元素是单行/多行文本框,下拉菜单,按钮,复选框,单选按钮,时间表单元素时 一般要配合label标签,用于描述其目的。其可用属性如下。
action 用于处理表单信息的应用程序的地址。
method 浏览器用来提交表单的HTTP方法。
get 对应于Http协议的GET方法,表单数据被附加在uri上,使用"?"分隔
post 对应于Http协议的POST方法,表单数据包含在HTTP协议的请求报文的体部。
name 设定表单的名称
target 表示浏览器接收到form的提交信息后在哪里显示回应。
_self,_blank,_parent,_top这些值和超链接的相同
表单数据的内容类型
通过enctype属性设定表单数据的内容类型
1. application/x-www-form-urlencoded
在发送前编码所有字符(默认)使用到的编码方式:
1)控件的名称和值都被转义,空白字符使用【+】替换,保留的字符一般都是用来实现特定的目的,例如(: / ? ; @ = & 等)。非数字和字母的字符使用%HH(这里 HH表示两个十六进制数字,代表该字符的ASCII码)进行转换,
2)控件的"名称/值"对按照它们在文档数据流中出现的顺序列出来。"名称""值"使 用"="分割,两个"名称/值"之间使用&隔开。
2. multipart/form-data
不对字符编码。在使用包含【文件上传控件】的表单时,必须使用该值。数据分成多个部分,每个部分代表一个结构良好的控件,作为文档数据流的一部分,每一 个部分都按照它们在文档数据流中出现的顺序依次发送到服务器端,并且,每一部分的边界不会出现在数据中。每一部分有一个content-desposition标题头,它的值的格式是: Content-Disposition:form-data;name="myControl"
3. text/plain
空格转换为 "+" 加号,但不对特殊字符编码。
input表单组件
input组件用于接受来自用户的数据,其可用属性如下
1、type 用于设定组件类型
text 单行文本框
password 密码框,输入的内容将会被遮挡。
checkbox 复选框,必须使用value属性来描述该组件所提交的值,使用checked属性默认选 中。
radio 单选按钮,必须使用value属性来描述该组件所提交的值,使用checked属性默认 选中。一个单选按钮组中所有组件都应该具有相同的name值,这样,每次只能选中按钮组中的 某一个组件
submit 提交按钮
reset 重置按钮
file文件按钮,该组件用于选中文件系统中的某个文件
hidden 隐藏域,该组件不显示在页面中,但是其值会被提交。
image 图像按钮,必须使用src来加载图片,使用alt来声明替换文本。
button 普通按钮
2、name 用于设定组件类型
3、value 用于设定初始化,可选。
4、checked 单选框,复选框默认选中属性
5、disabled 表示禁用组件,禁用组件的值也不能被提交
6、size 当前控件的初始宽度,这个宽度以像素为单位。除非控件类型是text, password,这时宽度是整数值,表示字符的数目,默认为20
7、maxlength 指定可以输入的字符的最大值。适用于控件类型为text,password。
fieldset组件用于在一个web表单中对多个控件和标签进行分组
1、disabled 禁用filedset元素,该属性会影响的fieldset的子元素
2、name fieldset元素的名称
fieldset的标题由标签提供
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action=""> <fieldset> <legend>Title</legend> <input type="radio" id="radio"> <label for="radio">click me</label> </fieldset> </form> </body> </html>
input/button按钮组件用于接受来自用户的数据,其可用属性如下
按钮控件
1、input的type 指定控件类型
button,submit,reset
2、input的name 按钮名称。
3、input的value 按钮所关联的值,会与name的值一同被提交
label组件用于表示某一表单组件的标题 其可用属性如下
1、for 与为设定标题的表单组件的ID值一致,上面的代码实例有
select组件用于表示下拉列表或列表,其可用属性如下
1、multiple 指定控件类型 布尔类型的值,表示是否允许多选,如果select元素不包含属性size和属性 multiple时,表单类型显示为菜单(组合框),如果使用了属性size和属性multiple中 的任意一个,则表单类型显示为列表框。
2、size 显示的行数 当要表示一个可以滚动的列表时候,size表示同时展示的行数。默认值为0。表 示非列表显示
3、disabled 表示禁用组件,禁用组件的值也不能被提交
4、name 用于指定该组件的名字,会与其option子元素的value值组成键值对随其他表单数据一齐被提交
option组件用于表示选项,常包含<select>、<optgroup>中,其可用的属性如下
1、disabled 表示禁用组件,禁用组件的值也不能被提交
2、value 定义控件的初始值。提交表单时,初始值会被提交给服务器。
3、selected 表示该选项默认被选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action=""> <select name="address" id=""> <option value="北京" disabled>北京</option> <option value="上海" selected>上海</option> <option value="广州">广州</option> </select> </form> </body> </html>
原文地址:https://www.cnblogs.com/aitiknowledge/p/11498410.html
- 使用swagger作为restful api的doc文档生成
- 面试机器学习、大数据岗位时遇到的各种问题
- 使用nginx代理跨域,使用nginx代理bing的每日一图
- Java Web基础入门
- Java中Optional使用注意事项
- 使用awk来解析dump文件 (73天)
- IntelIj IDEA运行JUnit Test OutOfMemoryError
- git pull fails “unable to resolve reference” “unable to update local ref”
- 使用dropwizard(5)--加入swagger
- 使用hint来调优sql语句(72天)
- 用R语言对城管事件数据分析
- 使用dropwizard(4)-加入测试-jacoco代码覆盖率
- goldengate学习-安装篇(71天)
- 使用dropwizard(6)-国际化-easy-i18n
- 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 实例
- Apache Spark 2.0 在作业完成时却花费很长时间结束
- centos 6.9 升级glibc动态库的详细过程
- Ubuntu18.04(linux)安装MySQL的方法步骤
- ubuntu18.0.4安装mysql并解决ERROR 1698 (28000): Access denied for user ''root''@''localhost''
- 动态在线扩容root根分区大小的方法详解
- centos7使用rpm安装mysql5.7的教程图解
- 关于Linux命令行下的数学运算示例详解
- Apache访问日志的配置与使用
- linux启动和重启nginx方法
- 简单谈谈centos7中配置php
- Linux动态链接库的使用
- Linux下部署springboot项目的方法步骤
- Linux、CentOS下安装zip与unzip指令功能(服务器)
- Linux上查看用户创建日期的几种方法总结
- 详解基于Linux的LVM无缝磁盘水平扩容