QD1-P14 HTML常用标签：input输入标签

灵魂信息

于 2024-10-11 04:44:02 发布

阅读量331

点赞数 18

分类专栏：前端学习笔记1 文章标签：前端基础

本文链接：https://blog.csdn.net/qq_38641599/article/details/142836624

版权

前端学习笔记1 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本节学习 HTML 常用标签：input 输入标签

‍

本节视频

www.bilibili.com/video/BV1n64y1U7oj?p=14

‍

知识点 1：简单示例

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		文本框：<input type="text">
	</body>
</html>

预览

recording

知识点 2：设置默认文本

value 属性设置一段默认的文本

文本框：<input type="text" value="请在此输入">

预设的文本将出现在 input 的输入框中，可以继续删除和编辑。

Clip_2024-10-10_23-46-53

知识点 3：设置只读状态

readonly 属性设置只读状态，使用户无法修改文本框中的内容。

文本框1：<input type="text" value="请在此输入" /><br />
文本框2：<input type="text" value="只读状态" readonly="readonly" />

recording

知识点 4：设置文本长度

maxlength 属性设置允许输入的文本长度。

文本框：<input type="text" maxlength="5" />

这个功能还是很实用的，比如某某网站用户注册的时候，限制用户名长度。

知识点 5：密码框

若要使用输入框，请这样设置 type 属性：

<input type="text" />

若要是使用密码框，请这样设置 type 属性：

<input type="password" />

input 标签的属性 type="text"，为输入框。

模拟登录某某网站

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<div align="center">
			<p>尊敬的超级无敌9999级VIP客户，欢迎登录xxx网站！</p>
			用户：<input type="text" value="请输入用户名" maxlength="16" /><br />
			密码：<input type="password" /><br />
			<button style="width:220px; margin-top: 5px;">登录</button>
		</div>

	</body>
</html>

效果

Clip_2024-10-11_00-22-49

输入用户名和密码。密码框的好处：防偷窥。

Clip_2024-10-11_00-24-00

‍

知识点 6：单选框

若要是使用单选框，请设置 type 属性为 radio：

<input type="radio" 
	value="beijin" 
	name="server" /> 北京 
<input type="radio" 
	value="shanghai"
	name="server" />上海

单选框是使用 name 属性来分组的。

示例进一步模拟登录界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<!-- 模拟登录 -->
		<div align="center">
			<p>尊敬的超级无敌9999级VIP客户，欢迎登录xxx网站！</p>
			用户：<input type="text" value="请输入用户名" maxlength="16" /><br />
			密码：<input type="password" /><br />
			<button style="width:220px; margin-top: 5px;">登录</button> <br />

			<p>服务器</p>
			<input type="radio" value="beijin" name="server" /> 北京 <input type="radio" value="shanghai"
				name="server" />上海 <input type="radio" value="chengdu" name="server" />成都
		</div>

	</body>
</html>

运行演示

recording

单选框需要注意的地方：

多个单选框通过相同的name属性设置为一组

知识点7：复选框

复选框：type="checkbox"

HTML 整个好玩的

Clip_2024-10-11_03-49-19

完整HTML代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<!-- 模拟登录 -->
		<div align="center">
			<p>尊敬的幸运用户，欢迎登录穿越【登录系统】！</p>

			<hr width="49%" />
			<p>请选择穿越世界类型！</p>
			<input type="radio" value="s1" name="server" />古代
			<input type="radio" value="s2" name="server" />仙侠世界
			<input type="radio" value="s3" name="server" />赛博未来<br /><br>

			<hr width="49%" />
			<p>请选择您的主角模板</p>
			<input type="checkbox" value="1" name="test" />女主对你矢志不渝<br />
			<input type="checkbox" value="2" name="test" />少年天才一朝废物<br />
			<input type="checkbox" value="3" name="test" />三十年河东欺少年<br />
			<input type="checkbox" value="4" name="test" />掉落悬崖必有奇遇<br />
			<input type="checkbox" value="5" name="test" />最强攻击大嘴遁法<br />
			<input type="checkbox" value="6" name="test" />没脸没皮抄诗装逼<br />

			<hr width="49%" />
			<button style="width:220px; margin-top: 5px;color:yellow;background-color:goldenrod;">确认穿越</button> <br />

		</div>

	</body>
</html>

知识点8：文件域

文件选择器：type="file"

<p>上传需要携带穿越的书籍</p>
<input type="file" /><br />

效果

recording

完整HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<!-- 模拟登录 -->
		<div align="center">
			<p>尊敬的幸运用户，欢迎登录穿越【登录系统】！</p>

			<hr width="49%" />
			<p>请选择穿越世界类型！</p>
			<input type="radio" value="s1" name="server" />古代
			<input type="radio" value="s2" name="server" />仙侠世界
			<input type="radio" value="s3" name="server" />赛博未来<br /><br>

			<hr width="49%" />
			<p>请选择您的主角模板</p>
			<input type="checkbox" value="1" name="test" />女主对你矢志不渝<br />
			<input type="checkbox" value="2" name="test" />少年天才一朝废物<br />
			<input type="checkbox" value="3" name="test" />三十年河东欺少年<br />
			<input type="checkbox" value="4" name="test" />掉落悬崖必有奇遇<br />
			<input type="checkbox" value="5" name="test" />最强攻击大嘴遁法<br />
			<input type="checkbox" value="6" name="test" />没脸没皮抄诗装逼<br />

			<hr width="49%" />
			<p>上传需要携带穿越的书籍</p>
			<input type="file" /><br />


			<hr width="49%" />
			<button style="width:220px; margin-top: 5px;color:yellow;background-color:goldenrod;">确认穿越</button> <br />

		</div>

	</body>
</html>

知识点9：隐藏域

示例HTML

<input type="hidden" value="admin" /><br />

不知道有啥用，看不见这个元素。

知识点10：普通按钮和提交按钮

<input type="button" value="普通按钮" /><br />
<input type="submit" value="提交按钮" /><br />

外观看起来都一样

Clip_2024-10-11_04-09-23

不同之处在于，from标签中嵌套了提交按钮时，点击提交按钮会让上层的form表单执行提交。、

示例HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<!-- 模拟登录 -->
		<form action="http://www.baidu.com">
			<div align="center">
				<p>尊敬的幸运用户，欢迎登录穿越【登录系统】！</p>

				<hr width="49%" />
				<p>请选择穿越世界类型！</p>
				<input type="radio" value="s1" name="server" />古代
				<input type="radio" value="s2" name="server" />仙侠世界
				<input type="radio" value="s3" name="server" />赛博未来<br /><br>

				<hr width="49%" />
				<p>请选择您的主角模板</p>
				<input type="checkbox" value="1" name="test" />女主对你矢志不渝<br />
				<input type="checkbox" value="2" name="test" />少年天才一朝废物<br />
				<input type="checkbox" value="3" name="test" />三十年河东欺少年<br />
				<input type="checkbox" value="4" name="test" />掉落悬崖必有奇遇<br />
				<input type="checkbox" value="5" name="test" />最强攻击大嘴遁法<br />
				<input type="checkbox" value="6" name="test" />没脸没皮抄诗装逼<br />

				<hr width="49%" />
				<p>上传需要携带穿越的书籍</p>
				<!-- 			<input type="button" value="普通按钮" /><br />
				<input type="submit" value="提交按钮" /><br /> -->

				<hr width="49%" />
				<input type="submit" value="确认穿越"
					style="width:220px; margin-top: 5px;color:yellow;background-color:goldenrod;" />
			</div>
		</form>
	
	</body>
</html>

效果

recording

知识点10：重置按钮

效果（黑屏时录制软件的原因，实际是没有的）

recording

实现

<input type="reset" value="重置按钮" />

知识点10：日期框

效果

recording

实现

<p>选择穿越日期</p>
<input type="date"></input>

知识点11：disable属性

设置disabled命令让元素暂时不可用，比如重置按钮

Clip_2024-10-11_04-38-16

按钮编程了灰色，且无法点击。

知识点12：name属性

没有form标签没有name属性时，是无法提交的。

over

本节完整HTML代码，你可以是在自己的电脑上实践一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P14-input标签</title>
	</head>
	<body>
		<!-- 模拟登录 -->
		<form action="http://www.baidu.com">
			<div align="center">
				<p>尊敬的幸运用户，欢迎登录穿越【登录系统】！</p>

				<hr width="49%" />
				<p>请选择穿越世界类型！</p>
				<input type="radio" value="s1" name="server" />古代
				<input type="radio" value="s2" name="server" />仙侠世界
				<input type="radio" value="s3" name="server" />赛博未来<br /><br>

				<hr width="49%" />
				<p>请选择您的主角模板</p>
				<input type="checkbox" value="1" name="test" />女主对你矢志不渝<br />
				<input type="checkbox" value="2" name="test" />少年天才一朝废物<br />
				<input type="checkbox" value="3" name="test" />三十年河东欺少年<br />
				<input type="checkbox" value="4" name="test" />掉落悬崖必有奇遇<br />
				<input type="checkbox" value="5" name="test" />最强攻击大嘴遁法<br />
				<input type="checkbox" value="6" name="test" />没脸没皮抄诗装逼<br />

				<hr width="49%" />
				<p>上传需要携带穿越的书籍</p>
				<!-- 			<input type="button" value="普通按钮" /><br />
				<input type="submit" value="提交按钮" /><br /> -->

				<hr />
				<p>选择穿越日期</p>
				<input type="date"></input>
				<hr width="49%" />
				<input type="submit" value="确认穿越"
					style="width:220px; margin-top: 5px;color:yellow;background-color:goldenrod;" />

				<input type="reset" value="重置按钮" disabled="disabled"/><br />
			</div>
		</form>

	</body>
</html>