您的位置:首页> 前端教程> HTML教程
文章导航

HTML input color 拾色器

2018-11-17 14:24| 作者: admin| 查看: 2315| 评论: 0|来自: 蚂蚁部落

<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>之外,但依然是该表单的一部分。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部