Day 4: Forms and Input Controls

Quiz ahead

HTML forms are a fundamental part of web development, enabling users to interact with web applications by inputting data. This tutorial will guide you through the basics of creating an HTML form, different input controls, and how to utilize them effectively.

1. Basics of HTML Forms

An HTML form is a section of a webpage that allows users to enter data. Forms are created using the <form> element and contain various input elements like text fields, checkboxes, radio buttons, and submit buttons.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic HTML Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    <form  method="post">
        <!-- Form controls go here -->
    </form>
</body>
</html>

method: Specifies the HTTP method (usually post or get) to send the form data.

2. Adding Input Controls

Inside the <form> element, you can add various input controls. Here’s an overview of common input types:

Text Input

<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

type="text": Creates a single-line text input.
id: Associates the input with a label for accessibility.
name: Specifies the name of the input field (used when processing form data).
required: Ensures the field must be filled out before submitting.

Email input

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

type="email": Ensures the input must be a valid email address.

Password Input

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

`type="password": : Hides the input text (useful for sensitive data).

Checkbox

<label for="subscribe">
    <input type="checkbox" id="subscribe" name="subscribe">
    Subscribe to newsletter
</label>

type="checkbox": Allows users to select one or more options.

Radio Buttons

<p>Gender:</p>
<label>
    <input type="radio" name="gender" value="male" required> Male
</label>
<label>
    <input type="radio" name="gender" value="female"> Female
</label>

type="radio": Allows users to select one option from a set.

Dropdown List

<label for="country">Country:</label>
<select id="country" name="country" required>
    <option value="us">Nigeria</option>
    <option value="ca">Ghanat</option>
    <option value="uk">Ivory Coast</option>
</select>

Textarea

textarea: Allows users to enter multi-line text.

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

3. Form Validation

HTML5 introduced new attributes to help with form validation:

required: Ensures the field is not left empty. minlength and maxlength: Specify the minimum and maximum number of characters. pattern: Allows you to specify a regex pattern that the input must match.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="100" required>

Assignment 4

Create an HTML Form Build a form for a fictional "Event Registration" page. The form should include the following fields and features:

Personal Information Section:
Name: A text input for the participant's full name.
Email: An email input for the participant's email address.
Phone Number: A tel input for the participant's phone number.
Event Details Section:
Event Date: A date input for choosing the event date.
Event Type: A dropdown (select) list with at least three options for different event types (e.g., Workshop, Seminar, Conference).
Attending with Guests: A number input for specifying the number of additional guests.
Submit Button: A submit button to send the form data

Form Attributes and Validation
- Required Fields: Use the required attribute where necessary to ensure important fields are filled out.
- Email Validation: Ensure the email input only accepts valid email addresses.
- Phone Number Validation: Optionally, add pattern validation to the phone number field to ensure it follows a specific format (e.g., (123) 456-7890).
- Number Validation: Ensure that the number of guests input is a positive integer and handle cases where the number might be zero.
- Date Validation: Use the min attribute to prevent users from selecting a past date for the event.

Take Quiz

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08