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

🕗 发布于 2024-10-11 06:59 前端基础

本节学习 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>

原文地址：https://blog.csdn.net/qq_38641599/article/details/142836624

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Java入门：10.Java中的包
下一篇：设计一个OAuth2认证系统：支持第三方登录的实用指南

Vue使用@别名替换后端ip地址
是 Node.js 的核心模块之一，用于处理文件路径的操作。它提供了一些方法，用于在不同操作系统上正确解析、拼接和转换文件路径，以及获取路径的各个部分（目录名、文件名、扩展名等）。@types/nod
阅读更多2024-10-11
LlamaIndex 结构化数据库交互指南增强（text2sql）
许多现代数据系统都依赖于结构化数据，例如或Snowflake数据仓库。LlamaIndex提供了许多由LLM提供支持的高级功能，可以从中创建结构化数据非结构化数据，以及通过增强的文本到 SQL 功能
阅读更多2024-10-11
YOLOv11改进策略【损失函数篇】| 利用MPDIoU，加强边界框回归的准确性
ℓn。
阅读更多2024-10-11
【GUI】PyQt6 和 Qt6：深入对比与选择指南
如前所述，Qt6是一套强大的跨平台 C++ 框架，广泛应用于桌面和移动平台的高性能应用开发。它拥有高度优化的图形渲染引擎，支持 OpenGL、Vulkan 等现代图形 API，并提供了网络、数据库、线
阅读更多2024-10-11
数学基础 -- 微积分之乘积法则求导
乘积法则是求导中的一种基础技巧，特别是在两个函数相乘的情形下。掌握它可以让我们轻松处理复杂的函数求导问题。
阅读更多2024-10-11
[Day 86] 區塊鏈與人工智能的聯動應用：理論、技術與實踐
隨著人工智能（AI）技術的飛速發展，智慧家庭逐漸成為現實。智慧家庭是指通過智能設備和AI技術，實現對家庭環境的自動化控制和管理。AI的應用讓我們的生活更加便利、安全和節能。本文將介紹幾個智慧家庭中常見
阅读更多2024-10-11
HBO 纪录片揭露中本聪是谁
比特币社区对 Todd 并不陌生，中本聪在 2010 年销声匿迹前 Todd 是少数与他有过公开交流的人，但 Todd 此前未被怀疑就是中本聪本人。但根据白皮书的行文习惯,很难想象一个人的文风（科技类
阅读更多2024-10-11
MATLAB图像去雾系统
雾霾，它会使大气的能见度降低，景物图像发生退化，在雾霾下拍摄的图像内容模糊，对比度下降，这将会严重影响人们的行车系统，卫星系统，导航系统等。该课题是基于MATLAB平台的图像去雾处理，配备一个人机交互
阅读更多2024-10-11
现货黄金价格走势图策略分析先看“势”
首先，理解趋势图的基本构成是至关重要的。在实际应用中，趋势分析可以帮助投资者确定入场和出场时机，通过识别趋势的开始和结束，投资者可以更准确地确定买入和卖出的时机，从而最大化收益。在明确趋势的情况下，投
阅读更多2024-10-11
Excel插件：成绩统计排名（三）
一、安装后如图二、功能介绍：（三）镇统计与排名1、模板说明（镇用）2、镇内批量三分四率统计PS：可以设置界值，统计，如果你统计的“名堂”不是“特优”“优秀”也可以统计完成后，再修改名称就可以啦执行3、
阅读更多2024-10-11

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

知识点 1：简单示例

知识点 2：设置默认文本

知识点 3：设置只读状态

知识点 4：设置文本长度

知识点 5：密码框

知识点 6：单选框

知识点7：复选框

知识点8：文件域

知识点9：隐藏域

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

知识点10：重置按钮

知识点10：日期框

知识点11：disable属性

知识点12：name属性

相关文章