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 build custom form controls using HTML?
Forms components are one of the essential parts of web applications. The forms are used in the contact us pages, application page, etc. HTML offers us many different ways and options to customize the setups. This includes textarea, input, checkboxes, etc. This article will explain how to build a custom form control using HTML.
Custom From Control Using HTML and CSS
We can use only HTML and CSS to create a custom form control. However, more is needed to interact with the backend application with JavaScript. But still, we can create all the front-end effects using only HTML and CSS. We can use the input after properties to add interactiveness to the design.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.custom-checkbox {
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 30px;
line-height: 20px;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
}
.custom-checkbox input[type="checkbox"] {
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
display: block;
}
</style>
</head>
<body>
<label class="custom-checkbox">
<input type="checkbox" />
<span class="checkmark"></span>
Custom Checkbox
</label>
</body>
</html>
Explanation
The code creates a custom checkbox using CSS styling. The checkbox uses an HTML label with an input element nested inside. The label has a custom class called "custom-checkbox". The checkbox is hidden by default using the CSS property "opacity: 0".
The checkbox is given a custom appearance using a span element with the class "checkmark", which is positioned absolutely over the checkbox. The span element is given a default background color of #eee. A checkmark icon is added to the span element using the CSS property ":after". The checkmark icon is hidden by default using "display: none". When the checkbox is checked, the checkmark icon is displayed using the CSS selector "+ .checkmark:after".
How To Make Custom Form Control Using HTML, CSS, JavaScript
Using JavaScipt is important when we want to add interactiveness to our web applications. We can use the onChange function of JavaScript to toggle between checked and unchecked options, textarea, input fields etc.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
label {
position: relative;
display: inline-block;
cursor: pointer;
padding-left: 30px;
line-height: 20px;
}
input[type="checkbox"] {
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
span {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
}
label.checked span:after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<label>
<input type="checkbox" onchange="this.parentElement.classList.toggle('checked')" />
<span></span>
Custom Checkbox
</label>
</body>
</html>
Explanation
The code is a custom checkbox control made with HTML, CSS, and JavaScript. The HTML markup defines a label element with an input element of type checkbox and a span element for the visual representation of the checkbox. The CSS styles position the elements and define the appearance of the checkbox.
The JavaScript code listens for the change event on the input element and toggles a "checked" class on the parent label element to update the appearance of the checkbox. Overall, the code provides an accessible and customizable checkbox control that can be easily modified to fit the needs of any project.
Conclusion
In conclusion, building custom form controls in HTML can be a powerful tool for web developers to create user-friendly and engaging forms. With the use of CSS and JavaScript, developers can create custom checkbox, radio buttons, and other form elements that can be easily styled to match the design of their web page. Creating custom form controls improves the user experience and provides more control over the form's behavior, validation, and accessibility.
203 Views
To Continue Learning Please Login