表单的基本用法
简介:
表单时一个包含若干表单元素的区域 ; 用于获取不同类型的用户的信息
表单元素时允许用户在表单中输入信息的元素, 如: 文本框,密码框,单选按钮,复选框,下拉列表,按钮等.
表单结构
表单语法
<form action="表单提交地址"method="提交方式">
多个表单元素
</form>
form标签
用来定义表单,可以包含多个表单元素
常用属性
. action 提交数据给谁处理 , 即处理数据的程序,默认为当前页面
. method方法 ; 提交数据的方式,取值 : get(默认),post
get和post的区别
get: 以查询字符串形式提交,数据在地址栏中能看到,长度有限制,不安全
post: 以表单数据组形式提交,在地址栏中式看不到数据的,长度无限制,安全
. enctype ; 指定提交数据的编码,取值application/x-www-form-urlencoded(默认值), multipart/form-data(文件上传时使用)
表单元素
大多数的表单元素都是使用<input>标签定义的,通过设置属性type来定义不同的表单元素
<input type="表单元素类型">
表单元素的类型 | 含义 | 说明 |
text | 单行文本框 | 省略时text |
password | 密码框 | 输入时以点号进行显示 |
radio | 单选 | 只能输入一个 |
checkbox | 复选框 | 同时选择多个 |
submit | 提交按钮 | 提交你的表单数据 |
reset | 充值按钮 | 重置表单元素的初始值 |
image | 图像 | |
button | 按钮 | |
hidden | 隐藏域 | 在页面上不显示,但会提交,可以用来存储数据 |
单行文本框
type/"表单"常用属性:
. name 名称,很重要,如果没有指定name,则该表单元素的数据时无法提交的
. value 初始值,
. size 宽度
. maxlength 最大的字符数
. readonly 只读,readonly="readonly" ; 可以简写readonly,即只写属性名,不写属性,只是变为可读,但是数据依旧可以提交
. disabled 禁用 ; disabled="disabled", 可简写即disabled 完全禁用,服务器拿不到,数据不能提交
表单元素被提交的条件; 1.有name属性;2.非disable属性
单选按钮
常用属性:
. name 名称,多个radio的name属性必须相同,才能实现互斥(单选)
. value值 ;
. checked;选中的 ; 是否是选中的,两种状态:选中,未选中
复选框
常用属性与radio类似
checkbox ; type="checkbox" 也是需要添加name进行分组.
文件选择器
常用属性:
. name 名称
. accept 接受 /指定文件选择器接收的类型,用来限制上传文件类型的
使用MIME格式字符串对资源类型进行限制
MIME:定义了文件的类型有哪些/定义文件的类型
. 纯文本文件: text/plain text/html text/xml
. 图像: image/jpeg image/png image/gif
隐藏域
<input type="hidden"name="user_id"value="123456">
#:我隐藏了user_id的值,但是它还是提交了
&user_id=123456
可以将一些数据隐藏起来,但是还是会提交的