Section 2: HTML Forms

Lesson 1: Creating Forms in HTML

HTML forms are crucial for user interaction on websites, allowing users to input and submit data. In this section, we'll explore the <form> tag and its attributes, as well as various input types.

1.1 <form> Tag and Its Attributes

The <form> tag is used to create an HTML form. It can contain various form elements such as text fields, checkboxes, radio buttons, and more. Let's create a simple form:

<form action="/submit_form" method="post">

    <!-- Form content goes here -->

</form>

• action: Specifies the URL where the form data will be sent upon submission.

• method: Defines the HTTP method used when sending form data (post or get).

1.2 Various Input Types

Different input types cater to various data input requirements. Here are some commonly used input types:

Text Input (<input type="text">):

<label for="username">Username:</label>

<input type="text" id="username" name="username">

Password Input (<input type="password">):

<label for="password">Password:</label>

<input type="password" id="password" name="password">

Radio Buttons (<input type="radio">):

<label>

    <input type="radio" name="gender" value="male"> Male

</label>

<label>

    <input type="radio" name="gender" value="female"> Female

</label>

Checkboxes (<input type="checkbox">):

<label>

    <input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter

</label>

Lesson 2: Form Controls and Elements

HTML provides various form controls beyond text fields and checkboxes. Let's explore additional form elements like <input>, <select>, <textarea>, and form attributes.

2.1 <input>, <select>, <textarea>

Textarea (<textarea>): 

<label for="message">Message:</label>

<textarea id="message" name="message" rows="4" cols="50"></textarea>

Select Dropdown (<select>):

<label for="country">Country:</label>

<select id="country" name="country">

    <option value="usa">United States</option>

    <option value="canada">Canada</option>

    <option value="uk">United Kingdom</option>

</select>

2.2 Form Attributes for Validation and Styling

Form attributes can be used for validation and styling purposes:

Required Attribute:

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

Placeholder Attribute:

<label for="search">Search:</label>

<input type="text" id="search" name="search" placeholder="Enter your search term">

Styling with CSS:

<style>

    label {

        display: block;

        margin-bottom: 5px;

    }

    input, select, textarea {

        margin-bottom: 10px;

    }

</style>

These form controls and attributes provide flexibility in creating user-friendly and interactive web forms. Explore and experiment with different input types and form controls to meet your specific requirements.