前端笔记32——input标签

最新推荐文章于 2025-02-15 00:23:42 发布

原创最新推荐文章于 2025-02-15 00:23:42 发布 · 430 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #HTML #input #表单

前端专栏收录该内容

93 篇文章

订阅专栏

本文深入讲解HTML中的input标签，涵盖其基本用法及各种类型，如文本框、密码框、复选框、单选框等，并提供代码示例帮助理解。

前言

在前面的在自己的网页中嵌入百度搜索框博客中，我们有使用input标签，下面我给小伙伴们分享一下我的input标签学习心得。

input标签

input标签是用来收集用户信息的。根据不同的 type 属性值，输入字段拥有很多种形式。

常用属性

type="text" 表示文本输入框，用来输入文本的（用户名 邮箱 手机号等等）
type="password" 表示密码框，用来输入密码，用户输入的内容不可见	 
type="checkbox" 表示复选框（多选）
type="radio"    表示单选框 注意：要实现单选 需要加name属性 把几个input组成一个组
type="hidden"   隐藏域 应用场景：当数据不想被用户看见当时候
type="button"   普通按钮 点击以后不会触发提交行为 应用场景：留给js来控制什么时候发数据
type="file"     文件上传控件 作用：让你选择上传的文件

代码示例

很多时间理论未必让我们明白，直接复制下面的代码去实现看效果就知道了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="">
			文本框：<input type="text" /><br />
			密码框：<input type="password" /><br />
			复选框：<input type="checkbox" />：篮球<input type="checkbox"/>足球<br />
			单选框：<input type="radio" name="aa"/>男<input type="radio" name="aa"/>女<br />
			隐藏域：<input type="hidden" /><br />
			普通按钮：<input type="button" value="登录" /><br />
			提交按钮：<input type="submit" value="sub登录" /><br />
			file:<input type="file" />
		</form>
	</body>
</html>

其他属性

除了上面的属性，input标签还有其他属性，如下所示：

name ：表单项名字
value ：表单项的值
readonly ：表示只读 ，内容是不能修改的 ，只针对输入框 ，数据是可以被发送的
disabled ：表示控件无效， 不能用 ，数据是不可以被发送的
checked  ：表示选中状态 ，针对checkbox 、radio