<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker Example</title>
</head>
<body>
<label for="colorPicker">选择颜色:</label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
</body>
</html>
在上面的示例中，<input> 元素的 type 属性被设置为 "color"，这使它成为一个颜色拾色器。用户可以点击输入框旁边的颜色框，然后选择所需的颜色。
你可以使用 JavaScript 获取用户选择的颜色值。例如，通过添加事件监听器来在颜色选择发生变化时获取颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker Example</title>
</head>
<body>
<label for="colorPicker">选择颜色:</label>
<input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
<script>
var colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
var selectedColor = colorPicker.value;
console.log("Selected color: " + selectedColor);
});
</script>
</body>
</html>
在这个示例中，当用户在拾色器中选择颜色时，控制台会输出所选择的颜色值。这样你就可以在用户选择颜色时执行相应的操作。
转载请注明出处：http://www.zyzy.cn/article/detail/12506/HTML5