html的表单的基本使用

表单的基本用法

简介：

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

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

表单结构

 

表单语法

<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

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