HTML基础知识(2)

表单

表单

什么是表单? 收集用户的HTML基础知识(2)

文本框

HTML基础知识(2)
Maxlength: 指定文本框能接受的最大字符个数
Size: 文本框的大小(宽度)
Value: 指定初始值
Placeholder: 占位符,当输入框为空的时候显示的文字

密码框

HTML基础知识(2)
密码框和文本框是一样的,唯一不同的是密码框以掩码的形式显示内容,保证其安全性。

Label

HTML基础知识(2)
(1)可以单独对其设置样式

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

提交按钮

HTML基础知识(2)
(1)点击按钮之后跳转到form表单指定的action

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

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

重置按钮

HTML基础知识(2)
(1)点击按钮,重置表单内部的输入框

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

单选按钮

HTML基础知识(2)
如果说要将若干个单选按钮编为一组(一组中只能有一个被选中),需要设置相同name属性
name 名字相同才能互斥
如果需要默认选中某个选项,需要加上checked属性
标签属性的表示形式:

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

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

多选按钮

HTML基础知识(2)

普通按钮

HTML基础知识(2)
点击按钮没有任何反应

图片按钮

HTML基础知识(2)
(1)作用和submit按钮是一样的

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

Button标签

HTML基础知识(2)
(1)内容可以是任意资源(eq:段落,图片,视频……)

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

文件选择框

HTML基础知识(2)
Accept: 可以指定选择文件类型
上传文件需要指定对应的表单属性
Enctype: 编码类型

下拉列表

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

选项分组: optgroup

HTML基础知识(2)
optgroup的lable属性定义分组显示的文字,disabled设置该分组不可用

Textarea

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

隐藏域

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

版权声明:玥玥 发表于 2021-04-21 3:02:53。
转载请注明:HTML基础知识(2) | 女黑客导航