Forms in HTML

  • Last updated Apr 25, 2024

In HTML, forms are used to allow users to input data, submit information, and interact with a website. This guide will teach you how to create HTML forms, covering various form elements and attributes.

Basic Form Structure

The basic structure of an HTML form involves using the <form> element to encapsulate all the form elements. Here's a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Forms</title>
</head>
<body>
    <form action="/submit" method="post">
        <!-- Form elements go here -->
    </form>
</body>
</html>

The <form> serves as the container for all form elements. The action attribute specifies the URL where the form data will be sent, and the method attribute defines the HTTP method, such as "get", "post", or "put".

Form Input Elements

Here are some of the commonly used form elements:

Text Input:
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
  • <label>: Describes the purpose of the input field.
  • <input type="text">: Creates a single-line text input.
  • id and name: Unique identifiers for the input.
  • required: Specifies that the field must be filled out before submitting the form.

Here's the output:

Password Input:
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
  • <input type="password">: Conceals the entered characters for password entry.

Here's the output:

Radio Buttons:
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
  • <input type="radio">: Creates a radio button.
  • name: Groups radio buttons together, allowing the user to select only one option.

Here's the output:

Checkboxes:
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to Newsletter</label>
  • <input type="checkbox">: Generates a checkbox.
  • checked: Pre-selects the checkbox by default.

Here's the output:

Textarea:
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea>
  • <textarea>: Creates a multi-line text input.
  • rows and cols: Specify the visible size of the textarea.

Here's the output:


Select Dropdown:
<label for="country">Country:</label>
<select id="country" name="country" required>
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
</select>
  • <select>: Generates a dropdown menu.
  • <option>: Defines each option within the dropdown.

Here's the output:

Submit Button:
<button type="submit">Submit</button>
  • <button type="submit">: Creates a button for submitting the form.
Example

Here's the complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Forms</title>
</head>
<body>

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

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

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

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

       <input type="checkbox" id="subscribe" name="subscribe" checked>
       <label for="subscribe">Subscribe to newsletter</label>

       <label for="message">Message:</label><br>
       <textarea id="message" name="message" rows="4" cols="50" required></textarea>

       <label for="country">Country:</label>
       <select id="country" name="country" required>
           <option value="usa">United States</option>
           <option value="canada">Canada</option>
           <option value="uk">United Kingdom</option>
       </select>

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

</body>
</html>