Create a different types of form in HTML, CSS and Javascript.
In this article, we are going to learn about how to create a different type of form using HTML, CSS and Javascript. We are using different types of forms in our daily lives like contact form, Registration form, Survey form, Login form etc.,
Contact Form
Through your website, users can contact you or your organization directly with the use of a contact form. User data, including name, email address, and message, can be gathered by this form and sent to a designated email address or stored in a database for later processing.
Example
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group textarea {
resize: vertical;
}
.form-group button {
padding: 10px 15px;
background-color: #5cb85c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<div class="form-container">
<form id="contactForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
alert('Form submitted!');
});
</script>
</body>
</html>
Output
See the Pen
Form by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
Registration Form with Validation
Users can register for a service or account on your website using a registration form. In order to facilitate future actions, such as the creation of a new user account, this form gathers user information, including username, email address, and password, which is subsequently stored in a database. Here’s an example of how to make a registration form with HTML, CSS, and JavaScript for client-side validation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<form id="registrationForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
</div>
<script>
document.getElementById('registrationForm').addEventListener('submit', function(event) {
event.preventDefault();
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;
if (password !== confirmPassword) {
alert('Passwords do not match!');
return;
}
alert('Registration successful!');
});
</script>
</body>
</html>
Output
See the Pen
Registration form by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
Survey Form
Using a survey form, you can get user input or statistics on a certain subject. Different input kinds, such as text fields, radio buttons, checkboxes, and dropdown menus, can be included in this form. Here’s how to design a survey form utilizing HTML, CSS, and JavaScript for client-side validation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Survey Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input, .form-group select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group input[type="radio"] {
width: auto;
}
.form-group button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<form id="surveyForm">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male" required> <label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female" required> <label for="female">Female</label>
</div>
<div class="form-group">
<label for="country">Country:</label>
<select id="country" name="country" required>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
<script>
document.getElementById('surveyForm').addEventListener('submit', function(event) {
event.preventDefault();
alert('Survey submitted!');
});
</script>
</body>
</html>
Output
See the Pen
Survey form by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
Login Form
By providing their username and password, users can authenticate themselves on your website using a login form. Usually, this form compares the credentials to a database and authorizes access if they match. This is an illustration of how to make a login form with PHP to manage form submission and verify credentials against a MySQL database, JavaScript for client-side validation, and HTML and CSS.
Example
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
.form-container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
margin: 0 auto;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="form-container">
<form id="loginForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === '' || password === '') {
alert('Please fill out all fields.');
} else {
alert('Login successful!');
}
});
</script>
</body>
</html>
Output
See the Pen
Login form by Meena Subash (@Meena-Subash-the-sasster)
on CodePen.
These examples explain the fundamentals of forms using JavaScript for form handling and validation and CSS for styling. These examples can be expanded to include more sophisticated features like better styling, more sophisticated validation logic, and AJAX for asynchronous form submission.