如何在 HTML 中設定元素的型別?
在這篇文章中,我們將學習如何在 HTML 中設定元素的型別,就像我們熟悉 HTML 中的 <input> 型別一樣。對於 <button> 元素,HTML type 屬性用於定義按鈕的型別。在 <input> 元素中,也使用它來指定要顯示的輸入型別。Internet Media Type 用於嵌入元素,包括連結、物件、指令碼、源和樣式。讓我們逐一深入瞭解示例。
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”。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP