如何在 HTML 中设置元素的类型?
在这篇文章中,我们将学习如何在 HTML 中设置元素的类型,因为我们熟悉 HTML 中的 <input> 类型。对于 <button> 元素,HTML type 属性用于定义按钮的类型。在 <input> 元素中,也使用它来指定要显示的输入类型。Internet Media Type 用于嵌入元素,包括 link、object、script、source 和 style。让我们逐一深入示例。
type 属性可用于以下元素
| 元素 | 属性 |
|---|---|
| <a> | type |
| <button> | type |
| <embed> | type |
| <input> | type |
| <link> | type |
| <menu> | type |
| <script> | type |
让我们查看以下示例,以了解如何在 HTML 中设置元素的类型。
HTML <button> 标签
HTML 中的可点击按钮由 <button> 标签定义。内容使用 <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>
当脚本执行时,它将生成一个输出,其中包含在网页上提到的上传音频,类型为“audio/mpeg”。
数据结构
网络
RDBMS
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP