HTML5新增表单之color
2015-11-30 20:54
661 查看
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" onclick="getColorValue();" value="获取颜色值" />
<input type="text" id="colorVal" />
</body>
</html>
2、实例结果
![](https://img-blog.csdn.net/20151130205249192?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3、结果说明
(1)创建颜色域
<input type="color" name="color" id="color" />
(2)获取颜色域值
var color = document.getElementById("color").value;
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" onclick="getColorValue();" value="获取颜色值" />
<input type="text" id="colorVal" />
</body>
</html>
2、实例结果
3、结果说明
(1)创建颜色域
<input type="color" name="color" id="color" />
(2)获取颜色域值
var color = document.getElementById("color").value;
相关文章推荐
- HTML5 基础知识,第 3 部分: HTML5 API 的强大功能
- 基于HTML5 Canvas绘制的支持手势缩放的室内地图
- HTML5 Canvas(画布)图像处理
- HTML5的优势
- HTML5简的常用元素与属性(二): html5新增的通用属性
- H5之contenteditable
- CDH5.4.4基于yarn的公平调度器配置
- 从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
- 从零开始制作H5应用(3)——V3.0版,loading,背景音乐及自动切换
- 从零开始制作H5应用(2)——V2.0版,多页单张图片滑动,透明过渡及交互指示
- 从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果
- HTML5定稿一周年 你必须要重新认识HTML5了
- Web开发者选择的最佳HTML5/CSS3代码生成器
- HTML5 学习资料
- Web开发者选择的最佳HTML5/CSS3代码生成器
- html5 css3 入门教程
- html5实现摇一摇功能
- HTML5拖拽实现的小例子
- HTML5
- 《HTML5与CSS3基础教程》第1-3章