Lesson 2.5: Forms – Input, Textarea, Select, Buttons

Web Development with HTML, CSS, JavaScript

Lesson 2.5: Forms – Input, Textarea, Select, Buttons

Forms in HTML are used to collect user input, such as text, numbers, selections, and files. They are essential for interaction between users and websites, like signing up, logging in, or submitting feedback.

1. The `<form>` Element

All form controls are placed inside a <form> element.

action: Defines the URL where form data is sent.
method: Defines how data is sent (get or post).

2. Input Fields (`<input>`)

The <input> element is the most versatile form control. It changes its behavior using the type attribute.

Common Input Types:

<form>

  <!-- Text input -->

  Name: <input type="text" name="fullname"><br><br>
  <!-- Email input -->

  Email: <input type="email" name="email"><br><br>
  <!-- Password input -->

  Password: <input type="password" name="password"><br><br>
  <!-- Number input -->

  Age: <input type="number" name="age"><br><br>
  <!-- Radio buttons -->

  Gender:

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

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

 Interests: <input type="checkbox" name="interest" value="coding"> Coding <input type="checkbox" name="interest" value="music"> Music <br><br> </form>

3. Textarea (`<textarea>`)

For multi-line text input such as comments or messages.

4. Select Dropdown (`<select>`)

Used to create a dropdown menu.

<option>: Defines the items inside the dropdown.
The selected attribute can make an option selected by default.

5. Buttons (`<button>` and `<input type="submit">`)

Buttons allow users to submit a form or trigger actions.

type="submit" → submits the form.
type="reset" → clears the form fields.
type="button" → custom actions (often used with JavaScript).

6. Example – Complete Registration Form

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

  <h3>Registration Form</h3>
  Name: <input type="text" name="fullname"><br><br>

  Email: <input type="email" name="email"><br><br>

  Password: <input type="password" name="password"><br><br>
  Gender:

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

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

  <select name="country">

    <option value="india">India</option>

    <option value="usa">USA</option>

    <option value="uk">UK</option>

  </select><br><br>
  About Yourself:<br>

  <textarea name="about" rows="4" cols="40"></textarea><br><br>

<input type="submit" value="Register"> </form>

✅ Key Takeaways:

Use <input> for single-line fields.
Use <textarea> for multi-line input.
Use <select> and <option> for dropdown menus.
Use <button> or <input type="submit"> to submit forms.
Always enclose form controls inside a <form> element.