HTML基础知识(2)

表单

表单

什么是表单? 收集用户的信息提交给后台服务器
表单form标签
action: 指定提交的地址。
method:指定提交的方式。 get/post

(一)Get与post的区别

(1)长度的显示:get方式限制为2k字符以内

(2)安全性:get的方式提交的数据会呈现在地址栏,敏感数据容易被截获,只有加了name属性标签元素才能提交到服务器。post 会隐藏起来较安全。
在这里插入图片描述

文本框

在这里插入图片描述
Maxlength: 指定文本框能接受的最大字符个数
Size: 文本框的大小(宽度)
Value: 指定初始值
Placeholder: 占位符,当输入框为空的时候显示的文字

密码框

在这里插入图片描述
密码框和文本框是一样的,唯一不同的是密码框以掩码的形式显示内容,保证其安全性。

Label

在这里插入图片描述
(1)可以单独对其设置样式

(2)for属性与input中id关联 , 单击文本可以获得对应input的焦点。

提交按钮

在这里插入图片描述
(1)点击按钮之后跳转到form表单指定的action

(2)value属性:value对应的值就是按钮上显示的字

(3)点击按钮:将form表单中input里name的属性值(键)和用户输入的值组成了键值对。并拼接在form表单中action属性值的后面。
在这里插入图片描述
?表示后面是参数,username 是键名 xiaoming 是键值 组成键值对多个参数之间用&分割。

重置按钮

在这里插入图片描述
(1)点击按钮,重置表单内部的输入框

(2)value属性,value对应的值是按钮上显示的字

单选按钮

在这里插入图片描述
如果说要将若干个单选按钮编为一组(一组中只能有一个被选中),需要设置相同name属性
name 名字相同才能互斥
如果需要默认选中某个选项,需要加上checked属性
标签属性的表示形式:

(1)键值对: 属性名 = 属性值
type = “text” name = “role”

(2)一些取值为布尔类型的属性直接使用属性名
checked(默认选中) readonly(只读)

多选按钮

在这里插入图片描述

普通按钮

在这里插入图片描述
点击按钮没有任何反应

图片按钮

在这里插入图片描述
(1)作用和submit按钮是一样的

(2)需要设置一个src属性的值,如果说src对应的路径没有找到图片(写了alt属性,显示alt的值。没设置alt属性,按钮显示默认值”提交”)类似img标签。

Button标签

在这里插入图片描述
(1)内容可以是任意资源(eq:段落,图片,视频……)

(2)如果button标签放在了form表单内部,作用和submit一样

文件选择框

在这里插入图片描述
Accept: 可以指定选择文件类型
上传文件需要指定对应的表单属性
Enctype: 编码类型

下拉列表

在这里插入图片描述
select:定义一个下拉列表
option:定义下拉列表的一个选项
select:标签的name属性定义了提交的参数名
option:标签的内容定义了该选项显示的文本,value属性定义了选中该选项时传递的参数值
在这里插入图片描述
多选可以通过multiple属性来实现,ctrl+单机 可以选择多个
select标签里size属性定义了下拉列表框显示的选项个数,当小于实际选项个数时,会自动增加一个滚动条。
Selected 默认多选选中。

选项分组: optgroup

在这里插入图片描述
optgroup的lable属性定义分组显示的文字,disabled设置该分组不可用

Textarea

主要是为了方便用户输入较多的文字信息,
rows 指定编辑区域的行数 cols 指定编辑区域的列数

隐藏域

当需要向服务器传递参数,并且参数无需用户输入,不想让用户看见,可以用隐藏域来实现。
在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值