Forms are essential to web development, allowing users to interact with websites by submitting data. They are commonly used for various purposes - Data Collection, User Authentication and Authorization, E-commerce Transactions, User Feedback, Search Functionality, User Preferences and Settings.
In essence, forms serve as a channel for communication between users and websites, enabling the exchange of information and facilitating various online interactions.
In this article, I will walk you through how to make a functional form with some basic validation.
We will be creating a mock Sign-Up page:
- Set up the HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Welcome, user</h2>
<form id="myForm">
<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>
<button type="submit">Sign Up</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
- Add some styling using CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
.form-group {
margin-bottom: 20px;
margin-right: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
display: block;
width: 100%;
padding: 10px;
font-size: 18px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Let me show you something now
Form fields are getting validated! We don't need to write any JS code to make this happen. Why is that?
We have added an attribute type in the input tag - <input type="text" id="name" name="name" required><input type="email" id="email" name="email" required>
type attribute values provide built-in browser validation, which helps ensure that users enter data in the correct format.
HTML5 introduced several new input types, such as email, url, number, date, etc., which provide built-in browser validation and help improve user experience by providing specialized input fields. This attribute allows web developers to create more sophisticated and user-friendly forms.
- Add some basic JS functionality
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevent default form submission
// Get form values
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
// Do something with the form data (e.g., send it to a server)
console.log('Name:', name);
console.log('Email:', email);
});
What does this code do?
captures the form submission event
prevents the default form submission behavior
retrieves the values entered by the user in the form fields
and logs this data to the browser console
It allows you to inspect the form data and potentially perform additional actions with it, such as sending it to a server for further processing
Let's add something more to this JS code to make it more dynamic:
// Display welcome message
var welcomeMessage = document.createElement('div');
welcomeMessage.innerHTML = '<p>Welcome, ' + name + ', you have successfully signed up!</p>';
welcomeMessage.style.textAlign = 'center';
document.body.appendChild(welcomeMessage);
// Remove the form container from the DOM
var formContainer = document.getElementById('formContainer');
formContainer.parentNode.removeChild(formContainer);
This JavaScript code creates a dynamic welcome message element containing a personalized greeting for the user.
After successful form submission, it then appends this message to the document body and removes the form container element from the DOM, providing a clean and focused user experience.
That's it! We've made a functional web form using HTML, CSS, & JS. If you have any questions, please feel free to comment :)