Lecture 5: HTML Forms

1. Introduction

Forms are used to collect input from users, such as names, emails, or passwords. Data entered into a form can be sent to a server using the action and method attributes.

2. Basic Form Structure

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br><br>

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

  <button type="submit">Submit</button>
</form>

Explanation:

• <form> → main container for the form.
• action → URL where data is sent.
• method → GET (adds data in URL) or POST (sends securely in request body).
• <label> → describes an input field.
• <input> → actual input field.

3. Input Types

• text → Single-line input
• password → Hidden text input
• email → Requires valid email format
• radio → Select one option
• checkbox → Select multiple options
• date → Pick a date
• file → Upload a file

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

4. Textarea

Use for multi-line text input (like comments).

<textarea name="message" rows="5" cols="30"></textarea>

5. Dropdown (Select & Option)

Dropdown menus allow users to choose one option from many.

<select name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

6. Validation

HTML provides built-in validation with attributes like:

• required → makes a field mandatory.
• pattern → defines regex pattern.
• min / max → set range for numbers or dates.

<input type="text" pattern="[A-Za-z]+" title="Only letters allowed">