HTML Forms

Form collects user input

  • The action attribute determines where the information is sent.
  • The method attribute is assigned a HTTP verb that is included in the HTTP request
<!-- This formwill 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 <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">
</form>

2. Email Input

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

<form>
    <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">
</form>

3. Submit form

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

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

4. Password input

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

5. Number input

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

6. Range input

To create a slider, we use range input

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

7. Checkbox input

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

8. Radio button input

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

9. Drop-down list

<form>
  <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>
  </select>
</form>

10. Datalist input

<form>
  <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>
  </datalist>
</form>

11. Textarea

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

III. Form input attributes

1. required attribute

To ensure users provide the response, we add required attribute.

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

2. min and max attribute

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