表单

表单

1.简介

表单是一个包含若干个表单元素的区域，用于获取不同类型的用记信息。

表单元素是允许用户在表单中输入信息的元素，如：文本框、密码框、单选按钮、复选框、下拉列表、按钮等

2.表单结构

2.1表单的语法

<form action="" method="">
	多个表单元素
</form>

2.2form标签

用来定义表单，可以包含多个表单元素

常用属性：

• action提交数据给谁处理，处理数据的程序，默认为当前这个页面，并且以查询字符串的形式来表现

• method提交数据的方式，取值：get（默认）、post

  get和post的区别：

  ​ get以查询字符串形式提交，在地址栏中能够看到，长度有限制，不安全

  ​ post以表单数据组形式提交，在地址栏中看不到，长度无限制，安全

• enctype：提交数据的编码，取值：application/x-www-form-urlencoded（默认）multipart/form-data（文件上传）

3.表单元素

大多数表单元素都是使用<input>标签来定义，通过type属性来定义不同的表单元素

<imput type="表单元素的类型" name="名称" value="默认值" size="宽度">

表单元素的类型	含义	说明
text	单行文本框	省略时默认就是text
password	密码框	输入时以点号显示，安全
radio	单选按钮	只能选中其中一个
checkbox	复选框	可以同时选择多个
submit	提交按钮	提交表单数据
reset	重置按钮	重置表单元素的初始值
image	图像按钮	可以使用图片作为按钮，也具有提交功能
button	普通按钮	默认情况下无功能
file	文件选择器	选择要上传的文件
hidden	隐藏域	在页面上不显示 但会提交，可以用来存储数据

3.1单行文本框

常用属性：

• name属性：名称，很重要，如果没有指定name，则该表单的数据无法提交

• value属性：当用户没有输入数据时，文本框中的默认值

• size：文本框的显示宽度

• maxlength：最大字符数，默认没有限制

• readonly只读 readonly=“readonly”,可以简写readonly，即只写属性名

• disabled不可用，禁用 disabled="disabled"可以简写，即只写disabled

  disabled和readonly区别：readonly的数据会提交，而disabled的数据不会提交

3.2单选按钮

常用属性：

• name名称：多个radio的name属性值必须相同，才可以实现互斥（单选）
• value值
• checked是否被选择，两种状态：选中/未选中<checked="checked">简写<checked>

3.3复选框

常用属性与radio类似

3.4文件选择器

常用属性：

• name属性：名称

• accept设置可以选择的文件类型，用来限制文件上传的类型

  使用MIME格式字符串对资源的类型进行限制

  常用MIME类型：

  • 纯文本：text/plan text/xml
  • 图像：image/png image/gif image/jpeg

4.特殊表单元素

表单元素	含义	说明
select	下拉列表
option	列表选项
optgroup	选项组	用来对option进行分组
textarea	文本域	多行文本框

4.1下拉列表

select常用属性：

• name属性
• size：下拉列表所显示的行数，同时显示多个选项
• multiple允许同时选择多个

option常用属性：

• value选项值
• selected设置默认选中的项

optgroup常用属性：

• label分组的标题

4.2文本域

常用属性：

• neme名称
• rows行数
• cols列数

5.其他表单元素

5.1label

为表单元素提供标签，当选中label标签中的文本时会自动将焦点切换到与之相关联的表单元素中

常用属性：

• for必须将该属性值设置为与之相关联的表单元素的id属性值相同

  注意：几乎所有的HTML标签都有id属性，且id属性值必须唯一

5.2button标签

也表示按钮，与input按钮类似

用法：

<button type="按钮类型">按钮文本或图像</button>

常用属性：

• type按钮的类型：取值submit（默认）、reset、button

5.3fieldset和legend标签

fieldset标签：对表单元素进行分组

legend标签：对分组添加标题