html
  1. html-forms
PreviousNext

HTML Forms

  • HTML forms are essential for collecting user input on web pages.
  • They allow users to enter data, make selections, and submit information to be processed by a server or used for other purposes.

The <form> Element

The <form> element is used to create an HTML form for user input. It acts as a container for different types of input elements, such as text fields, checkboxes, radio buttons, submit buttons, and more. Here's an example of a basic form structure: 

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

Input Elements

Input elements are used within a form to collect specific types of user input. Here are some commonly used input elements:

  • <input type="text">: Displays a single-line text input field.
  • <input type="password">: Displays a password input field, where the entered text is masked.
  • <input type="checkbox">: Displays a checkbox for selecting one or more options.
  • <input type="radio">: Displays a radio button for selecting one option from a group.
  • <input type="submit">: Displays a submit button for submitting the form.
  • <input type="reset">: Displays a reset button for clearing the form.
  • <input type="file">: Allows users to upload files.
  • <textarea>: Displays a multi-line text input field.

These are just a few examples of the many input elements available in HTML. Each input element has different attributes and behaviors that can be customized to suit your needs.

The <label> Element:

The <label> element is used to associate a text label with an input element. It improves accessibility and usability by providing a clear description or prompt for the associated input field.

<label for="name">Name:</label>
<input type="text" id="name" name="name">

Here's an example of how to use the 

<label for="name">Name:</label>
<input type="text" placeholder="enter name" id="name" name="name">
Try Playground

In this example, the <label> element is associated with the <input> element using the for attribute.

The for attribute value matches the id attribute of the input element, linking them together.

Form Submission

When a user submits a form, the data entered in the form is typically sent to a server for processing. This can be achieved by specifying the action attribute in the <form> element, which determines the URL where the form data will be sent.

The method attribute specifies the HTTP method to be used, such as GET or POST.

<form action="/submit-form" method="POST">
  <!-- Input elements go here -->
  <input type="submit" value="Submit">
</form>
Try Playground

Simple Form Example

<!DOCTYPE html>
<html>
<head>
    <title>Sample Form</title>
</head>
<body>
    <h2>Contact Information</h2>
    <form action="/submit" method="post">
        <!-- Text Input -->
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="John Doe" required><br><br>

        <!-- Email Input -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="johndoe@example.com" required><br><br>

        <!-- Password Input -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br><br>

        <!-- Date Input -->
        <label for="birthdate">Birthdate:</label>
        <input type="date" id="birthdate" name="birthdate"><br><br>

        <!-- Radio Buttons -->
        <label>Gender:</label><br>
        <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" id="other" name="gender" value="other">
        <label for="other">Other</label><br><br>

        <!-- Checkbox -->
        <input type="checkbox" id="subscribe" name="subscribe" value="yes">
        <label for="subscribe">Subscribe to newsletter</label><br><br>

        <!-- Select Dropdown -->
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="usa">United States</option>
            <option value="canada">Canada</option>
            <option value="uk">United Kingdom</option>
            <option value="australia">Australia</option>
        </select><br><br>

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

        <!-- Submit Button -->
        <input type="submit" value="Submit">
    </form>
</body>
</html>

This is just a sample html form, we can beautify this using css. We will discuss more about beautification in our CSS tutorial.

Try Playground
CanvasForm Attributes
Published on: