Web-Development-blogs
How to Create a Basic HTML Form

How to Create a Basic HTML Form

Forms are a fundamental part of any website, allowing users to interact and share information. In this guide, we’ll explore the basics of creating an

Aashish Jha's photo
Aashish Jha
·

4 min read

Table of contents

The <form> Tag: Structure and Basics

To create a form, you need a pair of <form> tags. These tags include important attributes:

  1. action Attribute

Specifies the location (e.g., index.php) where the submitted form data is sent. While this usually involves a backend language like PHP, for this guide, we’ll focus only on the HTML portion.

  1. method Attribute:

method attribute is used to define (or set) how the data is sent

Follwoing are the available options for the method attribute

Different methods available for html form

Though we won’t be working with a backend, it’s good to understand these basics as they are critical in form submission.

Building the Form: Common Input Elements

1. Text Box

To create a text box, use the <input> tag:

<label for="username">Username:</label>  
<input type="text" id="username" name="username" required minlength="6" maxlength="15" placeholder="Enter your username">

Key details:

  • Labels: The <label> element ensures accessibility, especially for screen readers. Using the for attribute, you link the label to the corresponding input's id.

  • Attributes:

    • required: Ensures the field cannot be left blank.

    • minlength/maxlength: Enforces input length constraints.

    • placeholder: Offers a hint for the expected format or content.

2. Password Fields

  • For secure input, use the type="password" attribute:
<label for="password">Password:</label>  
<input type="password" id="password" name="password" required minlength="6" maxlength="15">
  • This masks user input and supports similar attributes like minlength, maxlength, and required.

3. Email Input

  • To validate email formats automatically, use type="email":
<label for="email">Email:</label>  
<input type="email" id="email" name="email" placeholder="example@gmail.com" required>

4. Phone Number

  • Use type="tel" with a pattern attribute for formatted phone numbers:
<label for="phone">Phone Number:</label>  
<input type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

5. Interactive Elements

  • Submit and Reset Buttons

  • To create buttons for submission and resetting data:

<input type="submit" value="Submit">  
<input type="reset" value="Reset">

6. Dropdown Menu

  • Used for a selection list:
<label for="payment">Payment Method:</label>  
<select id="payment" name="payment">  
  <option value="visa">Visa</option>  
  <option value="mastercard">MasterCard</option>  
  <option value="giftcard">Gift Card</option>  
</select>

7. Radio Buttons

  • Radio buttons allow users to select one option from a group:
<p>Title:</p>  
<input type="radio" id="mr" name="title" value="Mr">  
<label for="mr">Mr</label>  
<input type="radio" id="ms" name="title" value="Ms">  
<label for="ms">Ms</label>  
<input type="radio" id="dr" name="title" value="Dr">  
<label for="dr">Dr</label>

8. Checkboxes

  • The checkbox is shown as a square box that is ticked (checked) when activated.

  • Checkboxes are used to let a user select one or more options of a limited number of choice

<label for="subscribe">Subscribe:</label>  
<input type="checkbox" id="subscribe" name="subscribe">

9. Text Areas

  • Used to take multi line text inputs.
<label for="comment">Comment:</label>  
<textarea id="comment" name="comment" rows="3" cols="25"></textarea>

10. File Uploads

  • Used to upload a documents (may be pdf, png, jpeg, docx, etc)

  • Use the accept attribute to limit the file types, such as image/png or image/jpeg.

<label for="file">Upload File:</label>  
<input type="file" id="file" name="file" accept=".png, .jpeg">

11. Advance Attribute - Setting encryption type to forms

  • When submitting large data like images, use the enctype="multipart/form-data" attribute in the <form> tag:
<form action="/upload" method="post" enctype="multipart/form-data">

Example - 1: Creating basic HTML form

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Form Example</title>
</head>
<body>
  <h1>Basic HTML Form</h1>
  <form action="/submit-form" method="post" enctype="multipart/form-data">
    <!-- Username -->
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required minlength="6" maxlength="15" placeholder="Enter username">
    <br><br>

    <!-- Password -->
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="6" maxlength="15">
    <br><br>

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

    <!-- Phone -->
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone" required placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
    <br><br>

    <!-- Date -->
    <label for="bday">Birth Date:</label>
    <input type="date" id="bday" name="bday">
    <br><br>

    <!-- Quantity -->
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="0" max="99" value="1">
    <br><br>

    <!-- Radio Buttons -->
    <p>Title:</p>
    <label for="mr">Mr</label>
    <input type="radio" id="mr" name="title" value="Mr">
    <label for="ms">Ms</label>
    <input type="radio" id="ms" name="title" value="Ms">
    <label for="phd">PhD</label>
    <input type="radio" id="phd" name="title" value="PhD">
    <br><br>

    <!-- Dropdown Menu -->
    <label for="payment">Payment Method:</label>
    <select id="payment" name="payment">
      <option value="visa">Visa</option>
      <option value="mastercard">MasterCard</option>
      <option value="giftcard">Gift Card</option>
    </select>
    <br><br>

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

    <!-- Textarea -->
    <label for="comment">Comment:</label>
    <textarea id="comment" name="comment" rows="3" cols="25" placeholder="Enter your comment"></textarea>
    <br><br>

    <!-- File Upload -->
    <label for="file">Upload Image:</label>
    <input type="file" id="file" name="file" accept="image/png, image/jpeg">
    <br><br>

    <!-- Submit and Reset Buttons -->
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
  </form>
</body>
</html>

Example - 2: Form with dialog tag

<dialog id="favDialog">
  <form method="dialog">
    <p><label>Favorite animal:
      <select>
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select>
    </label></p>
    <menu>
      <button value="cancel">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<output aria-live="polite"></output>

<!--Refere the js code in below block to handle the events in above form-->

var updateButton = document.getElementById('updateDetails');
var favDialog = document.getElementById('favDialog');
var outputBox = document.querySelector('output');
var selectEl = document.querySelector('select');
var confirmBtn = document.getElementById('confirmBtn');

// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
  outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});

Thank you for reading ❤️🧑‍💻

~ Aashish Jha

Web DevelopmentformsHTML5ChaiCodeChaiaurcode