HTML Forms

Form is used to collect user input.

For example, this form will send information to example.html as a POST request

<form action="/example.html" method="POST"></form>

I. Form elements

  • <form> defines an HTML form for user input
  • <input> defines an input control
  • <textarea> defines a multiline input control (text area)
  • <label> defines a label for an element
  • <button> defines a clickable button
  • <select> defines a drop-down list
  • <option> defines an option in a drop-down list

II. Input types

<input type="button" />
<input type="checkbox" />
<input type="color" />
<input type="date" />
<input type="datetime-local" />
<input type="email" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="month" />
<input type="number" />
<input type="password" />
<input type="radio" />
<input type="range" />
<input type="reset" />
<input type="search" />
<input type="submit" />
<input type="tel" />
<input type="text" />
<input type="time" />
<input type="url" />
<input type="week" />

1. Text Input

To create text input, we use the <input> element.

<form action="/example.html" method="POST">
    <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" placeholder="Enter your first name"><br>
    <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" placeholder="Enter your last name">
    <input type="submit" value="Submit">

2. Email Input

To create email input, we use the type “email”.

    <label for="email" id="email-lable">Email:</label><br>
        <input type="email" id="email" name="email" placeholder="Enter your email"><br>
    <input type="submit" value="Submit">

3. Submit form

To make a submit button in a form, we use <input> with the type “submit”. If there isn’t a value attribute, the default text, Submit, shows up on the button.

  <input type="submit" value="Send">

4. Password input

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

5. Number input

  <label for="years"> Years of experience: </label>
  <input id="years" name="years" type="number" step="1">

6. Range input

To create a slider, we use the range input.

  <label for="volume"> Volume Control</label>
  <input id="volume" name="volume" type="range" min="0" max="100" step="1">

7. Checkbox input

  <p>Choose your flavor:</p>
  <input id="vanilla" name="topping" type="checkbox" value="vanilla">
  <label for="vanilla">Vanilla</label>
  <input id="chocolate" name="topping" type="checkbox" value="chocolate">
  <label for="chocolate">Chocolate</label>
  <input id="strawberry" name="topping" type="checkbox" value="strawberry">
  <label for="strawberry">Strawberry</label>

8. Radio button input

  <p>What is sum of 1 + 1?</p>
  <input type="radio" id="two" name="answer" value="2">
  <label for="two">2</label>
  <input type="radio" id="eleven" name="answer" value="11">
  <label for="eleven">11</label>

9. Drop-down list

  <label for="lunch">What's for lunch?</label>
  <select id="fruits" name="fruits">
    <option value="mango">Mango</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>

10. Datalist input

  <label for="lunch">What's your favorite fruit?</label>
  <input type="text" list="fruits" id="fruit" name="fruit">
  <datalist id="fruits">
    <option value="mango">Mango</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>

11. Textarea

  <label for="comment">Comment: </label>
  <textarea id="comment" name="comment" rows="5" cols="30" placeholder="Adding text">

III. Form input attributes

1. required attribute

To ensure users response, we add the required attribute.

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

2. min and max attribute

The input min and max attributes specify the minimum and maximum values.