Premium HTML Course

5. HTML Forms

Forms are an essential part of web development. They allow users to submit data to a server, such as personal information, search queries, or login credentials.

Basic Syntax of an HTML Form

Forms in HTML are created using the <form> element. The form can contain various input elements such as text fields, buttons, checkboxes, and radio buttons.

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

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

The action attribute specifies the URL where the form data will be sent, and the method attribute specifies how the data will be sent (usually "GET" or "POST").

Common Form Elements

• <input>: The most common form element used to collect user input. It can have different type attributes, such as text, password, radio, and checkbox.
• <label>: Defines a label for an input element, improving accessibility.
• <select>: Creates a dropdown menu for selecting one or more options.
• <textarea>: Used for multiline text input.
• <button>: Creates clickable buttons for submitting forms or triggering JavaScript functions.

Example: HTML Form with Different Input Types

This example demonstrates various form input types:

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

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

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

  <label for="terms">Accept Terms:</label>
  <input type="checkbox" id="terms" name="terms"> I accept the terms

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

This form includes a text field, password field, radio buttons for gender selection, a checkbox for agreeing to terms, and a submit button.

Handling Form Data

When a user submits a form, the data is sent to the server as a collection of name-value pairs. The name attribute of each form element is used to identify the data, and the value attribute stores the submitted value.

Form Validation

HTML5 provides several attributes that can be used for form validation. Some common attributes include:

• required: Ensures that the user fills out the field before submitting the form.
• minlength: Specifies the minimum number of characters for a text input.
• maxlength: Specifies the maximum number of characters for a text input.
• pattern: Defines a regular expression for validating the input value.

Example: Form Validation

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

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

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

This form ensures that the email field is required and must be a valid email format, and the password must be at least 6 characters long.

Conclusion

HTML forms are a fundamental aspect of collecting user input on web pages. With various input types and built-in validation, forms enable users to interact with your site and submit data effectively. In the next lesson, we will dive into HTML tables and their usage.