如何使用 HTML 在表單中新增顏色選擇器？

HTML，即超文字標記語言，是超文字與標記語言的組合，我們可以用它來構建網頁及其內容。本文將展示如何使用 HTML 新增顏色選擇器。

語法

For Output Code pre class

<input> 標籤是 HTML 中的一個互動元素，其主要目的是從使用者那裡獲取不同形式的輸入。該標籤的 type 屬性指定使用者應輸入哪種型別的輸入。

方法

我們將使用 <input> 標籤。為了完成任務，我們將在表單中建立一個 input 標籤，然後將 type 屬性設定為 color。

示例

步驟 1 − 首先，我們將定義基本的 HTML 程式碼。

<!DOCTYPE html>
<html>
<head>
   <title>How to add color picker in a form using HTML?</title>
</head>
<body>
   <h4>How to add color picker in a form using HTML?</h4>
</body>
</html>

步驟 2 − 現在，我們將新增表單元素。

<form>
   <label>Choose Colour</label>
   <input type="color"/>
</form>

完整的程式碼如下 −

<!DOCTYPE html>
<html>
<head>
   <title>How to add a color picker in a form using HTML?</title>
</head>
<body>
   <h4>How to add a color picker in a form using HTML?</h4>
   <form>
      <label>Choose Colour</label>
      <input type="color" />
   </form>
</body>
</html>

結論

在本文中，我們瞭解了 <input> 標籤。接下來，我們還了解了如何使用 <input> 標籤將顏色選擇器新增到 HTML 表單元素中。

更新於：2023 年 3 月 30 日

238 次瀏覽

開始您的 職業生涯

完成課程，獲得認證

立即開始
廣告