Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add color picker in a form using HTML?
HTML, which stands for HyperText Markup Language, is a combination of Hypertext and Markup language which we can use to structure a web page and its content. This article will show how we can add a color picker using HTML.
Syntax
For Output Code pre class
The <input> tag is an interactive element in HTML whose main purpose is to take different forms of inputs from the user. The tag's type attribute specifies what kind of input the user should enter.
Approach
We are going to make use of the <input> tag. To accomplish the task, we are going to create an input tag in the form and then set the type attribute to color.
Example
Step 1 − First, we will define the basic HTML code.
<!DOCTYPE html> <html> <head> <title>How to add color picker in a form using HTML?</title> </head> <body> <h4>How to add color picker in a form using HTML?</h4> </body> </html>
Step 2 − Now we will add the form element.
<form> <label>Choose Colour</label> <input type="color"/> </form>
Here is the complete code −
<!DOCTYPE html>
<html>
<head>
<title>How to add a color picker in a form using HTML?</title>
</head>
<body>
<h4>How to add a color picker in a form using HTML?</h4>
<form>
<label>Choose Colour</label>
<input type="color" />
</form>
</body>
</html>
Conclusion
In this article, we understood the <input> tag. Later we also looked at how we can use the <input> tag to add a color picker to an HTML form element.
160 Views
