Laboratory Experiment - 4
- Get link
- X
- Other Apps
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
text-align: center;
}
.form-container {
width: 50%;
margin: auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
table {
width: 100%;
border-spacing: 10px;
}
input[type="text"], input[type="email"], input[type="password"], select {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="radio"], input[type="checkbox"] {
margin-right: 10px;
}
input[type="submit"] {
background-color: #28a745;
color: #fff;
padding: 10px 15px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #218838;
}
label {
font-size: 16px;
color: #555;
}
</style>
</head>
<body>
<h2>RegistrationForm</h2>
<divclass="form-container">
<form action="#" method="post">
<table>
<tr>
<td><label for="name">Name:</label></td>
<td><input type="text"id="name" name="name" placeholder="Enter your fullname" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email"id="email" name="email" placeholder="Enter your email address" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password"id="password" name="password" placeholder="Create a password" required></td>
</tr>
<tr>
<td><label>Gender:</label></td>
<td>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="">--Select Country--</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select>
</td>
</tr>
<tr>
<td><label>Hobbies:</label></td>
<td>
<input type="checkbox" id="reading" name="hobbies" value="Reading">
<label for="reading">Reading</label>
<inputtype="checkbox" id="sports" name="hobbies" value="Sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="hobbies" value="Music">
<label for="music">Music</label>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Output:
Explanation of the Code:
- HTML Structure:
- The <!DOCTYPE html>
declaration defines the document as an HTML5 document.
- The <html> element is the
root of the HTML page. Inside the <head>, metadata like character
encoding and title are defined.
- The <body> contains the form
that is enclosed within a <div> (class="form-container")
for styling purposes.
- Styling with CSS:
- The body is styled with a light
grey background (#f4f4f4) and the font is set to Arial.
- The .form-container adds a centered
form with padding and shadow for aesthetics.
- Input fields such as text, email,
password, and select dropdowns are given uniform styles with padding and
border-radius for better UI experience.
- Submit button (input[type="submit"])
has a green background that changes on hover, giving a visual cue to the
user.
- Table for Alignment:
- The form elements are placed in a
table with rows and cells (<tr> and <td>) for alignment. This
ensures the labels and input fields are properly aligned across the form.
- HTML Form Elements:
- Text Input (<input
type="text">): For entering the user's name.
- Email Input (<input
type="email">): For entering the user's email address.
- Password Input (<input
type="password">): To create a password.
- Radio Buttons (<input
type="radio">): To select gender.
- Dropdown (<select>):
To choose a country from the list.
- Checkboxes (<input
type="checkbox">): To select hobbies.
- Submit Button (<input
type="submit">): To submit the form data.
- Placeholder and Required Attribute:
- Each input field includes the placeholder
attribute to give users guidance on what to input.
- The required attribute ensures that
fields are not left blank when submitting.
1. What is the
purpose of the `<form>` element in HTML?
- The `<form>` element defines a form
that collects user input and sends it to a server for processing.
2. What is the
`action` attribute in the `<form>` tag?
- The `action` attribute specifies where the
form data should be sent when the form is submitted. In this case, it is set to
`"#"` as a placeholder.
3. Explain the
role of the `method="post"` in the form.
- The `method="post"` sends the
form data to the server in the request body, which is more secure than `GET` as
it doesn't append data to the URL.
4. How is the
`<table>` used in the form layout?
- The `<table>` is used for aligning
form labels and input elements in rows and columns, ensuring that the form is
neatly organized.
5. What does
the `input[type="text"]` element do?
- It creates a single-line text input field
where users can type information, such as their name.
6. Why is the
`input[type="password"]` used, and how does it differ from a text
input?
- The `input[type="password"]`
masks the input with dots or asterisks for privacy, while text inputs display
the entered characters.
7. What is the
purpose of the `required` attribute in the input fields?
- The `required` attribute ensures that the
user must fill out the field before submitting the form, preventing empty
submissions.
8. How are
`radio` buttons used in this form, and why are they appropriate for gender
selection?
- Radio buttons allow the user to choose
only one option from a predefined set, making them suitable for mutually
exclusive selections like gender.
9. Explain how
the `<select>` element is used in this form.
- The `<select>` element creates a
dropdown menu that allows the user to select one option (country) from a list.
10. What is the
purpose of `checkboxes` in the form?
- Checkboxes allow users to select multiple
options (hobbies) simultaneously, unlike radio buttons which limit the
selection to one.
11. How can the
background color of the form be changed using CSS?
- The `background-color` property in the
`.form-container` class sets the background color to white (`#fff`), making it
stand out from the page’s background.
12. What
happens when the `submit` button is clicked?
- When clicked, the
`input[type="submit"]` sends the form data to the server for
processing based on the `action` and `method` attributes.
13. What does
the `placeholder` attribute do in input fields?
- The `placeholder` attribute displays
temporary text in the input field, guiding the user on what to enter.
14. What is the
purpose of the `label` element in the form?
- The `label` element connects to a
specific input field using the `for` attribute, which improves accessibility
and helps users understand the form’s structure.
15. How does
CSS enhance the user experience in this form?
- CSS is used to style the form, aligning
the elements, adding padding, setting font sizes, and changing colors. This
makes the form more visually appealing and easier to use.
16. Why do we
use `border-radius` in the input elements?
- The `border-radius` property is used to
round the corners of the input fields, giving them a modern, user-friendly
appearance.
17. What is the
role of the `hover` pseudo-class in the CSS of the submit button?
- The `:hover` pseudo-class changes the
background color of the submit button when the user hovers over it, providing
visual feedback.
18. How is the
width of the input fields controlled in this form?
- The `width` property in the CSS styles
the input fields to span 100% of their container, making them responsive and
filling the available space.
19. What is the
difference between an `id` and a `class` in HTML/CSS?
- An `id` is unique and used to style or
reference a single element, while a `class` can be applied to multiple elements
to style or reference them collectively.
20. What is the
purpose of the `charset="UTF-8"` declaration in the HTML
`<head>` section?
- The `charset="UTF-8"`
declaration defines the character encoding for the document, allowing the HTML
page to display special characters and symbols correctly.
- Get link
- X
- Other Apps
Comments
Post a Comment