目录
添加输入框的方法
首页 web前端 html教程 html篇:网页中如何实现输入框效果(代码详解)

html篇:网页中如何实现输入框效果(代码详解)

Aug 17, 2021 pm 04:58 PM
css html

<p>之前的文章《手把手教你给html文本添加有序列表与无序列表(代码详解)》中,给大家介绍了怎么使用html给文本添加有序列表与无序列表。下面本篇文章给大家介绍html网页中如何实现输入框效果,我们一起看怎么做。

<p>html篇:网页中如何实现输入框效果(代码详解)

<p><input> 标签指定:搜集用户信息并且输入字段很多种形式,比如:文本字段、复选框、单选按钮、等等。

添加输入框的方法

<p><input type="">这个type是告诉它是个什么类型,比如txt文本类型,就是这个默认的一个类型,给大家通过代码示例看看是什么样呢?

<p>代码示例

<body>
<input type="text">
</body>
登录后复制
<p>代码效果

<p>1.gif

<p>代码结束出来,相信大家这个都也挺眼熟的,这就是一个输入框,咱前面可以再加上一行字用<p>来试一试。

<p>代码示例

<body>
<p>用户名:</p>
<input type="text">
</body>
登录后复制
<p>代码效果

<p>微信截图_20210817164111.jpg

<p>能看到用户名,但是用户名后边就会有什么,添加密码,我们为了这个稍微看的舒坦一点,用<div>把它弄成一行。

<p>代码示例

<body>
<div>
用户名:
<input type="text">
</div> 
</body>
登录后复制
<p>代码效果

<p>微信截图_20210817164305.jpg

<p>结束出来就差不多是这么一个状态然后这里边是不是还有密码

<p>代码示例

<body>
<div>
用户名:
<input type="text">
</div> 
<div>
密码:
<input type="text">
</div> 
</body>
登录后复制
<p>代码效果

<p>微信截图_20210817164528.jpg

<p>有一点不合适了,因为大家能看到这密码,正常来说密码是看不见。使用password实现密码效果。

<p>代码示例

密码:
<input type="password">
登录后复制
<p>代码效果

<p>微信截图_20210817164649.jpg

<p>密码就是差不多这么一个状态,这个网页中比较常见的一种东西。接下来复选框怎么实现呢?可以使用checkbox来实现

<p>代码示例

<div>
1选项
<input type="checkbox">
2选项
<input type="checkbox">
3选项
<input type="checkbox">
</div>
登录后复制
<p>代码效果

<p>微信截图_20210817164920.jpg

<p>这是复选框,接下来咱们稍微说一下单选框,这个网上比较见常用的,它都是用咱们这个,input是可以做到,使用radio来实现单选框。

<p>代码示例

单选:
<input type="radio">
登录后复制
<p>代码效果

<p>微信截图_20210817165039.jpg

<p>除了这个radio,color也是一个比较在的一个东西。

<p>代码示例

<div>
<input type="color">
</div>
登录后复制
<p>代码效果

<p>G414F.gif

<p>大家能看到就是这个东西,有点意思,它能直接改变颜色。

<p>ok,完成!

<p>推荐学习:Html视频教程

以上是html篇:网页中如何实现输入框效果(代码详解)的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示了如何使用PHP有效地处理XML文档。 XML(可扩展的标记语言)是一种用于人类可读性和机器解析的多功能文本标记语言。它通常用于数据存储

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

See all articles