如何在 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”。

更新時間: 2022-12-16

140 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.