HTML基础知识(2)

2021年4月20日 4点热度 0条评论 来源: ざ派大星

表单

表单

什么是表单? 收集用户的信息提交给后台服务器
表单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 指定编辑区域的列数

隐藏域

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

    原文作者:ざ派大星
    原文地址: https://blog.csdn.net/weixin_56709347/article/details/115915653
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。