DEV Community

Cover image for HTML Forms
Elijah Watson
Elijah Watson

Posted on

HTML Forms

An HTML form is used to collect user input. The HTML <form> element creates an HTML form for user input. The <form> element is a container for different types of <input> elements, such as text fields, checkboxes, radio buttons, submit buttons, etc.

Using forms can be a good way to collect input data to use somewhere else.

Text Fields

The Description for <input type="text"> from W3 schools says:

"Displays a single-line text input field"

As shown here
Here I am using the form text field element to create a basic form with no CSS

 <h2>HTML Forms</h2>

    <form action="/action_page.js">
        <input type="text" id="fname" name="fname" placeholder="John"><br>
        <input type="text" id="lname" name="lname" placeholder="Doe"><br><br>
    </form>
Enter fullscreen mode Exit fullscreen mode

The text field input type can be used to collect information like user names, passwords, etc.

CheckBoxes

The Description for <input type="checkbox"> from W3 schools says:

"Displays a checkbox (for selecting zero or more of many choices)"

As shown here
Image description

 <form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form> 
Enter fullscreen mode Exit fullscreen mode

The checkbox input type can be used to make multiple-choice questions.

Top comments (0)