web之表单form
表单是我们平常编写Web应用常用的工具,表单(<form>)用来收集用户提交的数据,发送到服务器。比如,用户提交用户名和密码,让服务器验证,就要通过表单。表单是一个包含表单元素或控件的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等)输入信息的元素。表单使用表单标签(<form>)定义。
1. 表单语法
<form.../>元素用于生成输入表单,该元素不会生成可视化部分。
<form action="/handling-page" method="post"><div><label for="name">用户名:</label><input type="text" id="name" name="user_name" /></div><div><label for="passwd">密码:</label><input type="password" id="passwd" name="user_passwd" /></div><div><input type="submit" id="submit" name="submit_button" value="提交" /></div> </form>
基础属性
name: 表单的唯一名称(建议与属性一致),以区分同一个页面中的多个表单。
action:指定当点击表单内的“确认”按钮时,该表单被提交到哪个地址。该属性既可是一个绝对地址,也可以是一个相对地址。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。该属性必填。
method: 提交表单时的请求类型 (get或者post类型),默认为get。
提交参数
单纯的<form.../>元素既不能生成可视化内容,也不包含任何表单控件,甚至不能提交表单,因此<form.../>元素必须与其他控件元素集合使用。
当在<form.../>元素里定义一个或多个表单控件,一旦提交表单,该表单里的表单控件将会转成请求参数。规则如下:
每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数。
如果多个表单控件有相同的name属性,则多个表单控件只生成一个请求参数,只是该参数有多个值。
如果某个表单控件设置了disable或disable="disabled"属性,则该表单控件不再生成请求参数。
表单控件的name属性指定请求参数即键值对的键名,value属性指定请求参数值即键值对的值。
键名和键值之间用等号连接,所有的键值对对会提交到服务器,提交的数据格式和<form>元素的method属性相关。如果是GET方法,所有键值对会以URL的查询字符串形式,提交到服务器,比如/handling-page?user_name=张三&user_passwd=123&submit_button=提交。
GET /handling-page?user_name=张三&user_passwd=123&submit_button=提交 Host: example.com
如果是 POST 方法,所有键值对会连接成一行,作为 HTTP 请求的数据体发送到服务器,比如user_name=张三&user_passwd=123&submit_button=提交。下面就是 POST 请求的头信息。
POST /handling-page HTTP/1.1Host: example.com Content-Type: application/x-www-form-urlencoded Content-Length: 74user_name=张三&user_passwd=123&submit_button=提交
enctype属性
表单能够用四种编码向服务器发送数据,由表单的enctype属性决定。
GET方法提交表单数据时,enctype属性无效。
application/x-www-form-urlencoded:这是默认的编码方式,它只处理表单控件里的value属性值,采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据,会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性。
text/plain:当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便,主要适用于直接通过表单发送邮件的方式。
2. 表单控件
在HTML中,一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域3个部分构成。
input控件
HTML表单控件很多,多数情况下被用到的表单标签是输入标签(<input>),<input>主要用于收集用户信息,可根据不同的type属性值,拥有多种形式。
<form><input type="radio" name="frequency" value="daily">Daily<br><input type="radio" name="frequency" value="weekly">Weekly<br><input type="radio" name="frequency" value="monthly">Monthly<br><input type="radio" name="frequency" value="yearly">Yearly<br><label for="file">选择一个文件</label><input type="file" id="file" name="myFile" multiple> </form>
用户上传文件也是通过表单。具体来说,就是通过文件输入框选择本地文件,提交表单的时候,浏览器就会把这个文件发送到服务器。上传文件时需要将表单<form>元素的method属性设为POST,enctype属性设为multipart/form-data。其中,enctype属性决定了 HTTP 头信息的Content-Type字段的值,默认情况下这个字段的值是application/x-www-form-urlencoded,但是文件上传的时候要改成multipart/form-data。
上面的 HTML 代码中,file 控件的multiple属性,指定可以一次选择多个文件;如果没有这个属性,则一次只能选择一个文件。
select控件
select用于创建单选或多选列表,select控件里一般都需要option控件。
select控件有属性multiple,表示多选列表。
option控件有属性selected="selected"时,为默认值。
<form action=""> <select name="cars" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> </form>
textarea控件
textarea是多行文本区域,有cols和rows属性,cols是每行显示几个字符数,rows是显示几行。
<textarea rows="10" cols="30">我是一个文本框。</textarea>
label控件
label用于显示文本,将文本和控件关联到一起,单击文本和单击控件一致。
参考:
HTML 基础控件介绍
HTML表单和表单控件
HTML 表单和输入 runoob
转载于:https://www.cnblogs.com/embedded-linux/p/11318489.html
web之表单form相关推荐
- HTML超文本标记语言(八)——表单form
一.表单<form>标签及其属性 HTML表单用于收集用户输入.基本格式如下: <form>. form elements. </form> 表单元素指不同类型的i ...
- django一个html先后两个form,Django教程(三)- Django表单Form
目录: 1.Form 基本使用 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 2.Form中 ...
- html表单对于网页目地,html - 表单form
一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...
- 表单form action的url写法
在写web页面时,标签 是很常见的元素,它的一个属性是action,用来标识将表单交给谁去处理.很显然,这里有一个地址的问题,而且是在服务器这边的地址.比如服务器内的一个servlet. 那么这个地址 ...
- 表单form action的url写法,/在前台和后台的定义
转转:http://blog.sina.com.cn/s/blog_9f33f9170102v7h4.html 重点: 在Servlet与JSP核心编程一书中,作者说对于"/"这个 ...
- html css移动form表单位置,表单form的研究
起因 最近经常在群里看到诸如以下这些问题: 怎么按键盘的Enter键提交表单呢? 移动端怎么聚焦时让键盘变成数字键呢? 移动端如何绑定键盘右下角[提交按钮]事件? 移动端键盘右下角[提交]如果换成[搜 ...
- Jquery提交表单 Form.js官方插件介绍
來源:http://hi.baidu.com/dereky/blog/item/f9e8ab64c52f4ff3f736540c.html [JQuery框架应用]:form.js官方插件介绍 For ...
- form.html,HTML表单form
前面我们讲了HTML的各种数据输入方式,数据输入之后,一般来说应该提交给后台处理,HTML通过表单form来提交数据. form包含1个或多个数据输入,如input,单选,复选,文件等等 form将其 ...
- html表单代码原理,HTML表单form
源码下载 窗口HTML结构 账号:密码: 代码解析 最外层父元素form是块元素,form表单的属性action.method.name都是关于http通信功能的属性,不影响表单form块元素的布局和 ...
最新文章
- mysql悲观锁总结和实践--转
- 【Rsync + inotify】 实时同步远程服务器目录文件
- linux命令chmod如果当前用户属于多个组,那这个命令中的g指的是哪个组?按什么规则?
- 关于SDL SDL_CreateWindowFrom和SDL_DestroyWindow第二次后无法将视频显示出来。
- MySQL的命令合集
- 【C语言简单说】五:常用运算符
- EBS R12.2 创建应用层的启动和关闭脚本
- 写入接口c语言_嵌入式LCD的接口类型详解
- PMP第三节:项目管理过程
- Python3爬取搜狗微信公众号
- html5添加音波波形图,wavesurfer.js绘制音频波形图的实现
- Windows下使用Thunderbird实现邮箱的加密解密和签名认证
- 深入浅出Direct3D 蔡军生 版权所有
- Android 设置背景透明
- WorkBook的SaveAs方法
- java-JDK11“ jstat -gc”中“ CGC”和“ CGCT”是什么意思?
- 【计算机三级】网路技术学习笔记 第七章 路由器配置及使用
- 电压电流功率放大倍数db
- linux内核-系统调用execve()
- 计算机等级报错等级怎么办,计算机等级考试怎么报两门(计算机等级考试报错了怎么办)...