input表单标签和label标签以及常使用标签的介绍

2024-06-03 04:46:50

文章目录

一、input表单标签
- 1、文本框
- 2、密码框
- 3、单选框
- 4、复选框
- 5、文件选择
- 6、按钮
二、button按钮标签
三、select下拉菜单标签
四、textarea文本域标签
五、label标签

一、input表单标签

在网页中可以实现收集用户的信息，input标签可以通过type属性的不同值从而展现不同的效果

1、文本框

当input标签type属性的值为text时，展现的是文本框的效果，可以在网页中输入单行文本

还可以结合占位符placeholder属性来实现提示输入的功能，placeholder属性的值为要提示的文本，当文本框输入文本后，提示文本自动隐藏，当输入框中的内容清空后，提示文本又会出现

2、密码框

当input标签的type属性值为password时，展现的是密码框的效果，可以在网页中输入加密的文本，也可以配合placeholder属性使用

3、单选框

当input标签的type属性值为radio时，可以实现单选框的效果，要用name属性配合，来实现多选一的效果，name属性有分组的功能，name属性值相同的为一组，一组只能同时有一个被选中

配合checked属性可以实现默认选中的效果，即使是刷新网页，也是不变的

4、复选框

当input标签的type属性值为checkbox时，可以实现复选框的效果，复选框可以同时选中多个选项，也可以配合checked属性来实现默认选中效果

5、文件选择

当input标签的type属性值为file时，可以实现文件选择的效果，配合multiple属性可以实现多文件选择

6、按钮

input标签在网页中可以显示不同功能的按钮，但是如果要实现按钮的功能，需配合form标签使用，需用form标签包裹起来
a、当type的属性为submit时,为提交按钮，点击之后可以提交数据给后端服务器
b、当type的属性为reset时，为重置按钮，点击之后会刷新重置恢复表单的默认值
c、当type的属性为button时，为普通按钮，没有功能

二、button按钮标签

网页中显示用户点击的按钮就是button标签实现的，button标签是双标签,button标签的type属性是和input中的按钮type属性是一样的，实现的功能也相同

三、select下拉菜单标签

在网页中可以提供多个选择的下拉菜单，有两个标签组成，一个是下拉菜单的整体select标签，一个是下拉菜单的选项option标签，可配合selected属性，设置下拉菜单的默认值

四、textarea文本域标签

在网页中可输入多行文本的表单，需配合两个属性使用，cols属性，设置文本域的可见宽度，rows属性，设置文本域的可见行数，文本域的右下角可以拖拽来改变大小

五、label标签

用于绑定内容与表单标签的关系，可以实现单选框和多选框中，不同点击小圆，点击文字也可以选中的效果，使用方法有两种，一种是使用label标签把内容包裹起来，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性值，第二种方法是直接使用label标签把内容和表单标签一起包裹起来，把label标签的for属性删除即可

input表单标签和label标签以及常使用标签的介绍相关推荐

HTML基本语法之表单标签：表单的组成，表单域，表单控件元素（表单元素），input表单元素， label标签，表单控件（表单元素）， select表单元素， textarea表单元素
文章目录表单标签表单的组成表单域常用属性: 表单控件元素(表单元素) input表单元素 label标签表单控件(表单元素) select表单元素 textarea表单元素表单元素几个总结 ...
表单标签——input表单元素、select下拉表单元素和textarea文本域
表单标签表单的目的是为了收集用户信息.在网页中,我们也要跟用户进行交互,收集用户资料,此时就需要表单. 表单的组成:在HTML中,一个完整的表单通常由表单域.表单控件(也称为表单元素)和提示信息三部 ...
input表单元素required用法
input表单元素required用法定义和用法 required 属性是一个布尔属性. required 属性规定必需在提交表单之前填写输入字段. 注意:required 属性适用于下面的 inp ...
vue之ele组件中input表单限制输入字符
目录 vue之ele组件中input表单限制输入字符 input只能输入数字 input 只能输入中文 vue之ele组件中input表单限制输入字符 input只能输入数字 <!-- 描述 ...
input表单所有属性【web前端】
input表单所有属性新建一个文件后缀为HTML的文本文档,文件名为index.html,用于测试说明input的属性! input的value属性:该属性用于定义input输入框的初始值,常用于举 ...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...
input表单只允许输入大于0的整数
1.<input type="tel" name="num" maxlength="5" οnkeyup="carNum( ...
4-1 :input表单选择器 jQuery第四章很关键好像刚好可以解决微信自动回复...
jQuery第四章很关键好像刚好可以解决微信自动回复 $("#frmTest :input") //冒号之前一定要有空格 :input表单选择器如何获取表单全部元素? ...
HTML5新增input表单（HTML5）
HTML5新增input表单(HTML5) <!DOCTYPE html> <html lang="en"><head><meta cha ...

最新文章

热门文章