HTML----表单

表单

1.简介

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

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

2.表单结构

2.1表单的语法

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

2.2form标签

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

常用属性：

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

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

  get和post的区别：

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

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

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

3.表单元素

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

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

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

3.1单行文本框

常用属性：

• name属性：名称，很重要，如果没有指定name，则该表单元素的数据是无法提交的
• value属性：当用户没有输入数据时，文本框中的默认值
• size文本框显示宽度
• maxlength最大字符数，默认字符数
• readonly：只读readonly=“readonly”，可以简写readonly，即只写属性名
• disabled：不可用，禁用disbled=“disabled” 可以简写disabled，完全被禁用

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

3.2单选按钮

常用属性

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

3.3 复选框

常用属性与radio类似

3.4 文件选择器

常用属性：

• name属性：名称

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

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

  常用MIME类型：

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

4.特殊表单元素

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

4.1 下拉列表

select 常用属性：

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

option常用属性：

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

optgroup常用属性：

• table分组的标题

4.2 文本域

常用属性：

• name：名称
• rows行数
• cols列数