表单

表单

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标签:对分组添加标题

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值