HTML form and input tags

Forms give the otherwise static web page a layer of interactivity ...

... instead of just the website giving the user data, the user can also give the website data!

Structure

A simple 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="x">Other</option>
    </select>

    <input type="submit" value="Go!">

</form>

Elements

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)

Labels

On top of most of each the form fields, we have a <label> tag that points to the field...

...also note that when the user clicks on a <label> tag, it becomes equivalent to clicking on the field itself!

Each <label> has a for attribute which matches the form field's name attribute:

• The "First name" label matches the <input> field that has the name fname

• The "Last name" label matches the <input> field that has the name lname

• The "Gender" label matches the <select> field that has the name gender

However, the input with the type of submit (i.e. a button) does not need a label as the value text serves as the label!

Inputs

Fortunately or unfortunately, the <input> tag covers a lot of different types of form "components" and takes on many shapes:

• text field (users can type something)

• password (users can type something with **** stars)

• radio button (select one or another)

• checkbox (select one or more)

• reset (a special button to clear a form)

• submit (a special button to submit its parent form)

• hidden (a field that exists on the form but not shown)

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

    ...    

</form>

Other attributes can include

• maxlength (enforce a maximum length of input)

• required (enforces a value; cannot stay blank)

• id (identifies the field uniquely)

  • differs from name in that name does not enforce uniqueness

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

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

    ...    

</form>

Passwords

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" name="user-password" id="passwort" 
        minlength="8" placeholder="make it hard to guess!" required> 

</form>

It essentially looks like an <input> field with the type="text" except that the user only sees dots instead of the text! Also:

• The minlength and maxlength (an integer) restrict the length of user input

  • (we could use none, one or both of those attributes)

• The placeholder offers a hint that will disappear on user input (and reappear if reset)

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>

• 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 since that provides the unique identifier in this case

• The <label> also allows greater accessibility as a user can now click on the label instead of just the button itself!

Checkboxes

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

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

    <p>Select your 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>

• Unlike type="radio" the checkboxes do not need the same value in the name attribute

• The checkbox does have an optional value attribute which will submit along with the name which will act as a "key" or property name

  • When the checkbox does not have a value then the value would simply be 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 the user to click on the label instead of the checkbox for greater accessibility

Resets

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

Still, this input type remains available for some odd reason...

Hidden fields

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>

• When the form submits, it will send the hidden field with cantsee=this as a key and value data pair