HTML input color 拾色器

admin發表於2018-11-17
HTML

<input> 標籤 type 屬性值設定為 "color" 即可建立一個拾色器。

拾色器控制元件是 HTML5 新增。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  選擇顏色:<input type="color" name="color"/>
</form>
</body>
</html>

特別說明：通常情況下，利用 name 屬性將表單資料提交到後臺。

此控制元件還有其他屬性，下面分別做一下介紹：

（1）.value：用來設定控制元件的預設選取顏色值。

（2）.form（HTML5）：規定輸入域所屬的一個或多個表單。

（3）.autofocus（HTML5）：規定在頁面載入時，域自動地獲得焦點。

（4）.disabled：設定控制元件為不可用狀態。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
選擇顏色:<input type="color" value="#00ffff" name="color"/>
</form>
</body>
</html>

通過value屬性設定控制元件預設選取的顏色值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
選擇顏色:<input type="color" autofocus name="color"/>
<input type="submit" value="提交表單">
</form>
</body>
</html>

通過autofocus屬性設定控制元件載入完畢後自動獲取焦點。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
選擇顏色:<input type="color" disabled name="color"/>
<input type="submit" value="提交表單">
</form>
</body>
</html>

將顏色控制元件設定為不可用狀態，顏色值將不會被提交。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
<input type="submit" value="提交表單">
</form>
選擇顏色:<input type="color" form="ant" name="color"/>
</body>
</html>

form屬性引用所屬表單的id，於是，雖然控制元件在<form>之外，但依然是該表單的一部分。

相關文章