HTML <form> and <input> tags

Forms

Forms give the otherwise static web page a layer of interactivity from the end user: instead of giving them just data, the user can also be the data provider!

Structure

A simple HTML form in HTML may look like this:

<form action="destination.html" method="post">

    <label for="fname">First name</label>
    <input type="text" name="fname" id="fname">
    
    <label for="lname">Last name</label>
    <input type="text" name="lname" id="lname">
    
    <label for="gender">Gender</label>
    <select name="gender" id="gender">
        <option value="m">Male</option>
        <option value="f">Female</option>
        <option value="n">Other</option>
    </select>
    
    <input type="submit" value="Go!">
    
</form>

Attributes

Breaking that into small pieces, let's begin with the parent <form> tag:

• action refers to where the form will take us once we submit the form
• method refers to how the form will submit (and what the URL will look like upon the form's submission)
• POST - submitting data - the URL would have no query strings (the URL would have "?" followed by some text)
• GET - retrieving data - the URL would have query strings (e.g. index.html?fname=Jon)

Form elements

A <form> tag will typically consist of child tags such as:

• <input> (for short texts, passwords, choices and hidden data)
• <textarea> (for longer texts)
• <select> (more commonly referred to as "drop-down menus")

In addition to those child tags, <label> tags should also appear beside them to, well, label them!

input type="text"

At the minimal, the <input> field for type="text" looks like this:

<form action="destination.html" method="post">

  <label for="fname">First name</label>
  <input type="text" name="fname" id="fname" maxlength="50" required="required">
    
</form>

Other attributes can include:

• maxlength (enforces a maximum character length of input)
• minlength (enforces a minimum character length of input)
• required (enforces some kind of value; cannot stay blank)
• id (identifies the field uniquely)

input type="password"

The <input> field for type="password" can look something like this:

<form action="destination.html" method="post">

  <label for="passwort">Passwort</label>
  <input type="password" id="passwort" minlength="8" placeholder="make it hard to guess!" required="required"> 
    
</form>

(We used the value passwort there to help avoid confusion with the HTML input type of "password"!)

So, the password field looks almost like the text field, except that the user only sees dots (or some kind of cryptic character) instead of the text.

Things to note:

• The minlength and maxlength (an integer) restrict the length of user input
  • We can use none, one or both of those attributes
• The placeholder offers a hint for the user on what to do
  • This will disappear on user input (and reappear upon resetting the field)

input type="radio"

The <input> field for type="radio" looks like this:

<form action="destination.html" method="post">

  <p>Select your language:</p>

  <input type="radio" name="language" id="form-lang-en" value="en">
  <label for="form-lang-en">English</label>

  <input type="radio" name="language" id="form-lang-is" value="is">
  <label for="form-lang-is">Icelandic</label>
  
  <input type="radio" name="language" id="form-lang-jp" value="jp">
  <label for="form-lang-jp">Japanese</label>
  
  <p>Select your gender:</p>
  
  <input type="radio" name="gender" id="form-gender-m" value="m">
  <label for="form-gender-m">Male</label>
  
  <input type="radio" name="gender" id="form-gender-f" value="f">
  <label for="form-gender-f">Female</label>
  
  <input type="radio" name="gender" id="form-gender-x" value="x">
  <label for="form-gender-x">Other</label>
    
</form>

Things to note:

• Unlike type="text" , each type="radio" button must have the same name if it belongs to a set of related options
  • (we would have a different value for the name attribute if we have another set of related options elsewhere on the same form, as in the case with gender)
• The value attribute does not need to have the same value as the text in the <label>
  • i.e. the form will submit "en" even though the user may see English on the form
• The <label> corresponds with each radio button, not via the button's name attribute, but via the id
  • the id provides the unique identifier in this case
• The <label> also allows greater accessibility
  • a user can now click on the label instead of just the button itself!

input type="checkbox"

The <input> field for type="checkbox" looks like this:

<form action="destination.html" method="post">

  <p>Select your pizza toppings:</p>
  
  <input type="checkbox" name="cheese" id="toppings-cheese" checked>
  <label for="toppings-cheese">Cheese</label>
  
  <input type="checkbox" name="pepperoni" id="toppings-pepperoni" checked>
  <label for="toppings-pepperoni">Pepperoni</label>

  <input type="checkbox" name="ham" id="toppings-ham">
  <label for="toppings-ham">Ham</label>

  <input type="checkbox" name="peppers" 
      id="toppings-green-peppers" value="green">
  <label for="toppings-green-peppers">Green peppers</label>

  <input type="checkbox" name="pineapple" id="toppings-pineapple">
  <label for="toppings-pineapple">Pineapple</label>

</form>

Things to note:

• Unlike type="radio", the checkboxes do not need the same value in the name attribute
• The checkbox does have an optional value attribute
  • This will submit along with the name which acts as a "key"
  • When the checkbox does not have a value, the value would simply equal to on
• The checked attribute makes the checkbox checked by default
  • We can do this for more than one checkbox
• The <label> for each type="checkbox" corresponds with each checkbox's id value (not the name)
• The <label> also allows for greater accessibility
  • the user can click on a larger label instead of the smaller checkbox

input type="reset"

For whatever reason, this <input> with a type="reset" appears as a button and allows a user to return each field in the form back to its blank or default setting:

<form action="destination.html" method="post">

  <div>
    <label for="fname">First name</label>
    <input type="text" name="fname" id="fname">
  </div>
  
  <div>
    <label for="lname">Last name</label>
    <input type="text" name="lname" id="lname">
  </div>
  
  <div>
    <label for="gender">Gender</label>
    <select name="gender" id="gender">
        <option value="m">Male</option>
        <option value="f">Female</option>
        <option value="n">Other</option>
    </select>
  </div>
  
  <!-- ready, reset, go! -->
  <div>
    <input type="reset">
    <input type="submit" value="Go!"> 
  </div>
    
</form>

Personally, using a "reset" button:

• feels like a waste of time after filling in a whole form
• feels like over-kill after filling in just one field!
• could potentially annoy the user if clicked accidentally

This input "type" still remains available for whatever reason!

input type="hidden"

In a form, an <input> tag with a type="hidden" would usually not appear on the form interface but remain in the background:

<form action="destination.html" method="post">
  
  <input type="hidden" name="cantsee" value="this">
  
  <div>
    <label for="fname">First name</label>
    <input type="text" name="fname" id="fname">
  </div>

  <div>
    <input type="reset">
    <input type="submit" value="Go!"> 
  </div>
  
</form>

So, when the form submits, it will send the hidden field with cantsee as the key and this as the value, along with the other fields!