天天看点

HTML5新增表单之color

HTML5新增表单之color

1、实现源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5新增表单之color</title>
<script type="text/javascript">
    /**
	 * 获取颜色值
	 */
    function getColorValue()
	{
		//获取color表单域值
		var color = document.getElementById("color").value;
		//将颜色值赋值给文本域
		document.getElementById("colorVal").value = color;
	}
</script>
</head>

<body>
   <input type="color" name="color" id="color" />
   <input type="button" οnclick="getColorValue();" value="获取颜色值" />
   <input type="text" id="colorVal" />
</body>
</html>
           

2、实例结果

HTML5新增表单之color

3、结果说明

(1)创建颜色域

<input type="color" name="color" id="color" />           

(2)获取颜色域值

var color = document.getElementById("color").value;           

继续阅读