我们如何在HTML中设置元素的类型?

WBOY
发布: 2023-08-26 14:45:12
转载
1684人浏览过

我们如何在html中设置元素的类型?

在本文中,我们将学习如何在 HTML 中设置元素的类型,就像我们熟悉 HTML 中的 类型一样。对于

type 属性可用于以下元素

元素 属性
类型
类型
类型
类型
类型
类型
类型

让我们通过以下示例来了解如何在 HTML 中设置元素的类型。

HTML

HTML 中的可点击按钮由

立即学习前端免费学习笔记(深入)”;

示例

在下面的示例中,我们使用两个

<!DOCTYPE html>
<html>
<body>
   <form action="#" method="get">
      <label for="firstname">Username:</label>
      <input type="text" id="firstname" name="firstname"><br><br>
      <label for="lastname">Surname:</label>
      <input type="text" id="lastname" name="lastname"><br><br>
      <button type="submit" value="Submit">Submit</button>
      <button type="reset" value="Reset">Reset</button>
   </form>
</body>
</html>
登录后复制

当脚本执行时,它将生成一个输出,其中包含用户名和姓氏的输入字段(由 type="text" 设置),以及提交按钮和重置按钮。

HTML 标签

标签指定用户可输入数据的字段。最重要的表单元素是 元素。根据 type 属性, 元素可以以多种不同的方式呈现。

示例

考虑以下示例,我们使用具有两种不同输入类型的 HTML 表单,一种是文本,另一种用于提交。

<!DOCTYPE html>
<html>
<body>
   <form action="#">
      <label for="Username">Enter name: </label>
      <input type="text" id="Username" name="Username"><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>
登录后复制

运行上述脚本时,它将产生一个输出,其中包括一个用于输入 type=”text” 名称的输入字段和一个具有 type=”submit” 属性的输入按钮。

使用脚本

查看以下示例,我们正在运行指定了 type 属性的脚本

示例

在下面的示例中,我们使用两个

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script type="application/javascript">
      document.getElementById("tutorial").innerHTML = "Hello,Good Morning.";
   </script>
</body>
</html>
登录后复制

运行上述脚本时,将弹出输出窗口,显示文本“你好,早上好”。在网页上。

HTML 标签

可以使用 标签为

示例

考虑以下示例,我们使用带有 type 属性的 HTML 标记。

<!DOCTYPE html>
<html>
<body>
   <audio controls>
      <source src="https://gaana.com/song/praise-the-lord-da-shine" type="audio/mpeg">
   </audio>
</body>
</html>
登录后复制

当脚本执行时,它将生成一个输出,其中包含在 type=“audio/mpeg”提到的网页上上传的音频。

以上就是我们如何在HTML中设置元素的类型?的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:tutorialspoint网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号