Basic Form Elements

Forms are the basic way of capturing information from a user (but not necessarily processing it). Because of the way they work today, and the frameworks they are reliant on, they almost always have to utilize a combination of HTML, CSS, and JavaScript.

  • Forms will always be enclosed by <form> tags; similar to the following.
  • It is merely a matter of convention that radio buttons denote either/or choices and checkboxes denote multiple choice.

A "<form>" element on its own does not define intaractivity. You need to make use of other elements within the form element to do that. Keeping track of how each is used can be tricky because each of these sub elements is defined by both the element tag and a "type" attribute within that element. You unfortunately can not just make each element a "<form>" element and apply individual attributes within it.

There are three basic types of (interactive) form elements.

  • "input"
  • "select"
  • "textarea"

Each of these element types must appear *within* the greater "<form>" element.


<form>
    <input></input>
    <select></select>
    <textarea></textarea>
</form>

The mere existence of the elements is not enough however. Let's look at how each can be used individually and what interface element they will produce.

Input Element Types

Let's look at the different attribute values that can be used within the "type" attribute for each form element. There are only a few but each has a very distinct use. Here are the valid values that the "type" attribute will take...

  • "text"
  • "checkbox"
  • "radio"
  • "submit"

If we were to actually write all of these inputs elements within a form element and give them the appropriate type attributes the actual code would look like what you see below. The product of this code appears with it.


<form>
    A simple input field:
    <br>
    <input type="text" name="radio_button_name">
    <br>
    <input type="radio" name="radio_button_name">
    <br>
    <input type="submit" name="button_name">
</form>
A simple input field:


So how do each of these interactive elements differ from one another?

Text Fields

Text fields are where you can write out a string of plain text. They differ semantically from the "textarea" form element in that they are meant for shorter string inputs. Entires such as a first name, last name, username, or passwords are appropriate uses of the "text" input element. If you need to allow the user to fill in greater amounts of text, such as for messages, resume descriptions, or your fan fiction stories then you should use the more versatile "textarea" form element described further down.

Check Boxes

Check boxes allow the user to input a boolean value for information, meaning something is either true or not, with no leeway inbetween. Along with helping to keep the form concise and clear it saves the time of the user by allowing them to simply click once to give an answer to a yes or no question without having to type out anything.

Radio Buttons

The difference between checkmark boxes and radio buttons is that checkmark boxes can be checked "on" or "off" in any combination. Radio buttons can only have ONE option selected for that set of buttons. A set of radio buttons is defined by the "name" attribute. This means that if give two different radio buttons the same name attribute then only one of them will be able to be checked.

The Submit Button

The "submit" button servers the singlular purpose of posting the completed form in a fashion defined by the original form element "action" attribute. Traditionally it just signals for the browser to gather the information the user has input and send it to the assigned location.

There is an alternate way to handle this information however.

Select Element Types

Let's look at the different attribute values that can be used within the "type" attribute for each form element. There are only a few but each has a very distinct use. Here are the valid values that the "type" attribute will take...



Boolean options

These are options that are either true or false, on or off.

Submit

Submit buttons are easy enough to make, but actually making them work takes extra effort.