HTML Forms

HTML forms are used to collect user input. They are essential in creating interactive web applications, such as login pages, search fields, and surveys.

Introduction to HTML Forms

Forms are created using the <form> element. Inside the form, we use input controls like text fields, checkboxes, buttons, etc.

<form>
  <!-- form elements go here -->
</form>

Input Types: Text, Email, Password, etc.

The <input> tag is used to create many form fields with different types.

<form>
  <label>Name: </label>
  <input type="text" name="username"><br><br>

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

  <label>Password: </label>
  <input type="password" name="password">
</form>

Radio Buttons and Checkboxes

Use radio buttons when only one option is allowed. Use checkboxes for multiple selections.

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

  <p>Select your hobbies:</p>
  <input type="checkbox" name="hobby" value="reading"> Reading <br>
  <input type="checkbox" name="hobby" value="traveling"> Traveling <br>
  <input type="checkbox" name="hobby" value="gaming"> Gaming
</form>

Select Dropdown and Textarea

The <select> tag creates a dropdown, and <textarea> is for multi-line text input.

<form>
  <label>Choose a country:</label>
  <select name="country">
    <option value="india">India</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select><br><br>

  <label>Comments:</label><br>
  <textarea name="comments" rows="4" cols="40"></textarea>
</form>

Submit and Reset Buttons

<input type="submit"> sends the form data. <input type="reset"> clears all fields.

<form>
  <input type="submit" value="Submit Form">
  <input type="reset" value="Reset Form">
</form>

Fieldset and Legend

The <fieldset> groups related elements, and <legend> adds a title.

<form>
  <fieldset>
    <legend>Personal Info</legend>
    <label>Name: </label>
    <input type="text"><br><br>

    <label>Age: </label>
    <input type="number">
  </fieldset>
</form>

Form Attributes

Forms use attributes like:

• action – URL where form data will be sent
• method – HTTP method: GET (default) or POST
• name – Identifier for the form

<form action="submit.php" method="post" name="userForm">
  <label>Username: </label>
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

Conclusion

HTML forms are essential for capturing input from users. From basic input fields to complex multi-section forms, mastering these tags is crucial for every web developer.

In the next chapter, we will dive into HTML Semantic Elements define the role or purpose of the content they contain.

If you have any questions, feel free to ask. Thank you for reading!