当前位置：首页 > article >正文

HTML常用标签笔记 (其二)

article 2025/8/21 12:04:50

本章节记录最基本最常用的input表单交互标签

input标签是html中的交互式控件标签。它的功能非常强大也非常复杂，是HTML最重要的标签之一。input标签是一种行内标签，与其他标签不同，通过type属性可以变更成各样式用于人机交互的控件。


<input>  //在没有写type属性的情况下，它的type属性默认是“text”，文本输入框状态
<input type="text" /> 	//与上面相同,附上效果图

在这里插入图片描述

可以修改type属性变更成其他交互控件，如下：
将type属性设置为password

<input type="password">		//将type属性修改成password，密文输入控件

在这里插入图片描述

将type属性设置为file：

<input type="file">		//将type属性修改成file，文件选择控件

在这里插入图片描述

将type属性设置为radio：

<input type="radio">		//将type属性修改成radio，单选控件
<input type="radio">//需要注意的是，单选一般是多个选项中选择一个，需要互斥
<input type="radio" name="aa"> 	
<input type="radio" name="aa">

在这里插入图片描述
实际效果，没有相同name属性不会互斥。

将type属性设置为checkbox：

<input type="checkbox">		
//将type属性修改成checkbox，多选控件；多选虽然不需要互斥，但还是需要加上name属性
，用于form向后台传递数据

在这里插入图片描述

其他控件：

<select name="seasons"> 	
//下拉选择控件，单选，若是要实现多选，只需在select标签内加上multiple，同样加上name属性才能正常传递参数<option>春</option> 	//下拉选项标签<option>夏</option><option>秋</option><option>冬</option>
</select>

在这里插入图片描述

textarea控件：

<textarea></textarea name="note"> 	
//多行文本输入控件,设置name属性

在这里插入图片描述

两种按钮：

<iuput type="button">   //将input属性修改成button，按钮控件
<input type="submit"> 	//将input属性修改成submit，表单提交控件

两者区别，button就是一个简单的按钮控件。submit则强大一点，一般需要与form表单标签结合使用，下面是个模拟注册的代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户管理</title> 
</head><body><h1>用户添加</h1><form method="POST" action="/register_ok"><div><lable>用户名:</lable><input type="text" name="username"></input></div><div><lable>密码:</lable><input type="password" name="password"></input></div><div><lable>身份:</lable><select name="authority"><option>访客</option><option>用户</option><option>管理员</option></select>    </div><div><input type="button" value="检测"></input><input type="submit" value="提交"></input></div></form></body>
</html>