Laboratory Experiment

4.Develop HTML page named as “registration.html” having variety of HTML input elements with background colors, table for alignment & provide font colors & size using CSS styles.

Program:


<!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.

Viva-voce Questions:

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.

-:END:-

Search This Blog

Web Technology Lab by Dr. G Anil Kumar

Why to study Web Technology ?

Laboratory Experiment - 4

Comments

Post a Comment

Popular posts from this blog

Why to study Web Technology ?