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

htmlweb developmentfront end technology更新于 2024/8/13 3:24:17

在本文中，我们将学习如何设置 HTML 元素的类型，因为我们熟悉 HTML 中的 <input> 类型。对于 <button> 元素，HTML type 属性用于定义按钮的类型。在 <input> 元素中，也使用它来指定要显示的输入类型。Internet 媒体类型用于嵌入元素，包括链接、对象、脚本、源和样式。让我们逐一深入示例。

type 属性可用于以下元素

元素	属性
<a>	type
<button>	type
<embed>	type
<input>	type
<link>	type
<menu>	type
<script>	type

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

HTML <button> 标签

HTML 中的可点击按钮由 <button> 标签定义。内容使用 <button> 标签发送。<button> 标签可以包含图形和文本信息。不同浏览器使用不同的默认"按钮"类型。

示例

在下面的示例中，我们使用了两个 <button> 标签，其中一个用作提交，另一个用作重置。

<!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 <input> 标签

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

示例

考虑以下示例，我们使用包含两种不同输入类型的 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 属性的脚本

示例

在下面的示例中，我们使用了两个 <button> 标签，其中一个用作提交，另一个用作重置。

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

运行上述脚本后，将弹出输出窗口，并在网页上显示文字"hello, good morning."

HTML <source> 标签

可以使用 <source> 标签为 <video>、<audio> 和 <image> 等媒体组件指定多个媒体资源。根据浏览器支持情况或视口宽度，<source> 元素允许您提供浏览器可选择的视频、音频和图像文件。

示例

考虑以下示例，其中我们使用带有 type 属性的 HTML <source> 标签。

<!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" 提到的网页上上传的音频组成。