Why Do We
Need to Create Forms?
Forms are essential in web development as they provide a way for users
to interact with web applications by submitting data. They are used for various
purposes, including:
- Collecting
User Data: For registration, login, feedback, surveys,
and more.
- Enabling
Interactions: Allowing users to send information to the
server.
- Dynamic
Applications: Forms are key in creating dynamic web
applications like e-commerce websites, social media platforms, etc.
- Improving
User Experience: Forms enable tailored content and services
by collecting user preferences or queries.
Code
Explanation
HTML
The HTML provides the structure of the form and its elements.
Here's a detailed breakdown:
html
..
<div class="form-container">
- A
container that wraps the entire form, styled with CSS for layout and
design.
html
..
<h1>Sign
Up</h1>
- A
heading that indicates the purpose of the form.
html
..
<form id="signupForm">
- A
form element with an id (signupForm) that allows JavaScript to interact
with it.
- method
and action attributes can be added when connecting to a backend.
html
..
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name"
placeholder="Enter your name" required>
</div>
- label:
Provides a description for the input. The for attribute associates the
label with the input using the input's id.
- input:
A text field for entering the user's name. The placeholder provides a hint
to the user, and required ensures the field must be filled before
submission.
Other input fields (email and password) follow the same structure with
variations for type (email and password) to ensure proper validation.
html
..
<button
type="submit">Sign Up</button>
- A
button that submits the form. The type="submit" triggers the
form's submit event.
html
..
<p class="error-message"
id="error"></p>
- A
paragraph for displaying error messages dynamically.
CSS
The CSS styles the form to make it visually appealing. Key aspects:
css
..
body {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
- Creates
a gradient background for the page.
css
..
.form-container
{
background: #fff;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
- Styles
the container with a white background, rounded corners, and shadow for a
card-like appearance.
css
..
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s;
}
input:focus
{
border-color: #ff6b6b;
}
- The input
fields are styled for width and padding. The :focus pseudo-class
highlights the field when selected.
css
..
button {
background-color: #ff6b6b;
transition: background-color 0.3s;
}
button:hover
{
background-color: #e63946;
}
- The
button changes color on hover for interactivity.
css
..
.error-message
{
color: #e63946;
display: none;
}
- Error
messages are styled and hidden by default, becoming visible only when
needed.
JavaScript
The JavaScript handles form validation and interactivity:
javascript
..
document.getElementById("signupForm").addEventListener("submit",
function (e) {
- Adds
an event listener to the form for the submit event. When the form is
submitted, the provided function runs.
javascript
..
e.preventDefault();
- Prevents
the default form submission (page reload) to handle the validation using
JavaScript.
javascript
..
const
name = document.getElementById("name").value.trim();
- Retrieves
and trims the input value to remove unnecessary whitespace.
javascript
..
if (!name
|| !email || !password) {
error.textContent = "All fields are
required!";
error.style.display = "block";
}
- Checks
if any field is empty. If so, displays an error message.
javascript
..
alert("Form
submitted successfully!");
- Alerts
the user on successful form submission.
HTML
Comments
Post a Comment
If you have any Doubts plz let me know