表单的基本用法

简介:

表单时一个包含若干表单元素的区域 ; 用于获取不同类型的用户的信息

表单元素时允许用户在表单中输入信息的元素, 如: 文本框,密码框,单选按钮,复选框,下拉列表,按钮等.

表单结构

 

表单语法
<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

可以将一些数据隐藏起来,但是还是会提交的