資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時裝研究
法律研究如何在 HTML 中使用具有顏色選擇器的輸入型別欄位？
在本文中，我們將學習如何在 HTML 中使用具有顏色選擇器的輸入型別欄位。
我們使用 <input type="color"> 欄位輸入顏色。它將允許我們從顏色選擇器中選擇一種顏色。
當我們單擊預設顏色框時，將顯示一個顏色選擇器。在這裡，您還可以使用輸入欄位中的值屬性設定預設顏色 - 此值需要以十六進位制設定，因為顏色表示為帶有井號的後跟六位十六進位制值。
語法
以下是 HTML 中使用帶顏色選擇器的輸入型別欄位的語法。
<input type="color" >
示例
以下是 HTML 中使用帶顏色選擇器的輸入型別欄位的示例程式。
<!DOCTYPE html> <html> <body> <form > <label for="onecolor">Select color:</label> <input type="color" id="onecolor" name="onecolor" value="#ff0000"><br><br> <input type="submit"> </form> </body> </html>
示例
以下是另一個在 HTML 中使用具有顏色選擇器的輸入型別欄位的示例程式。
<!DOCTYPE html> <html> <head> <title>HTML input color</title> </head> <body> <form action = "" method = "get"> Select which color you want for your website:<br><br> <input type="color" name="favcolor" value="#FFFFF"><br> <input type="submit" value="submit"> </form> </body> </html>
單擊顏色選擇器框後，我們可以選擇我們想要的顏色。
示例
以下是另一個在 HTML 中使用具有顏色選擇器的輸入型別欄位的示例程式。
<!DOCTYPE html> <html> <center> <body> <h1>How to use input type field with the color picker in HTML?</h1> <style> input[type=color] { width: 10%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid Blue; border-radius: 4px; } </style> <form> <label for="favcolor">Select your favorite color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br> <input type="submit"> </form> <p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 versions.</p> </body> </center> </html>
單擊顏色選擇器框後，我們可以選擇我們想要的顏色。
更新於：21-11-2022
2K+ 檢視次數
廣告