Lesson 6.2: Forms to Fill – Inputs

In our last lesson we discussed how to use the basic form element, along with the grouping element fieldset and it’s legend element. We also looked at an example which included a few things we hadn’t discussed yet: inputs. In this lesson, we’ll take a detailed look at inputs. Before that though, we want to look at one other element.

The label Element

The label element (<label>) is used to label form elements. This element is more appropriate to use then something like a paragraph or other text to display form element names to the user. The label element has an opening and closing tag, where you put the text inside. The label also has a unique attribute: for.

You can wrap the input with the label element as well, if you want. If you don’t, you will have to specify the for attribute. The for attribute takes the name of the id of the form element that it is meant for. Below is an example form. The first input is wrapped with the label, where the second one is not so we specify the for attribute:

<form action="#" method="post">
<fieldset>
<legend>Legend Example Form</legend>
<label>Name: <input type="text"></label>
<label for="address">Address: <input type="text" id="address"></label>
</fieldset>
</form>

View Live Label Form Example

As you can see, there isn’t much difference in the display of the two, and it is more a personal preference. How you arrange them will also affect how you create the CSS to style them. Also note that you can specify the for attribute even if you wrap the input with the label element, though it is unnecessary.

The input Element

The input element has your typical id and name attributes, which serve a purpose for something more than just CSS, as well as two important unique attributes: type and value. It also has a few more which are only used when the type is set to certain things.

Text inputs, password inputs, radio buttons, and check boxes all use the same element, the input element. To tell the browser which one of these you want to use, you specify the type attribute. There are a lot of possible inputs. We’ll discuss each one of these in a bit.

The value attribute is an attribute which contains the value the input currently has. What this value is differs depending on the type. For example, text and password inputs will have a value that is a string of text, while the value when type is submit, button, or reset is the text displayed on the button.

The input element also has a number of other unique attributes. Some of them to note are: maxlength, readonly, disabled, size, and tabindex.

The maxlength attribute allows you to specify the maximum length of the value, to prevent too much data from being sent to the server. It’s better to think of this as the maximum size the data can be (in terms of bytes), since it also affects things like file uploads. It takes a value of the maximum size in bytes.

The readonly and disabled attributes do similar things, but for different types. The readonly attribute affects the input when type is text or password, and prevents them from changing the values. The disabled attribute affects most types and makes the input unable to be changed at all (such as not being able to check a check box). You can use these to disable things until you are ready for the user to change it, in which you would remove the attribute with Javascript.

Both readonly and disabled have one possible value. For readonly, it is “readonly”. For disabled, it is “disabled”. To remove these properties (make the input editable again), you have to remove the attribute entirely, with Javascript.

We’ll discuss both the meaning of value and any additional attributes for each type in it’s own sections.

Text and Password Types

When the type is text (type=”text”) or password (type=”password”) they function almost identically. They both display a single-line box in which you can type text (a text input). When type is either of these, value will have the text that is typed into the box.

The only difference between text and password is that when a user types in passwords the browser will usually just display asterisks (*) or small circles, instead of the actual value. This prevents people from looking over your shoulder to see your password as you type.

If you set the value in your HTML, you can set the default text which will be displayed inside of the box when the page first loads. You will also get the value in Javascript when you process the form.

Here is an example for text and password inputs:

<input type="text" value="Some text">
<input type="password" value="Some text">

View Live Example of Text and Password Types

Check boxes and Radio Buttons

Check boxes (type=”checkbox”) and radio buttons (type=”radio”) look rather different, however they function very similar. Neither of them will show the user the value in value, and the user cannot change the value. While most types don’t require the value attribute, check boxes and radio buttons do.

The value specified in the value attribute is what is associated with this value when it is submitted (and you try to handle it with PHP or other server-side scripts).

Check boxes and radio buttons also have an additional attribute they use, which is “checked”. The attribute “checked” can only have one possible value, which is also “checked”. If this attribute is present, then the element will be checked (or selected) by default. If you don’t want it checked, you just omit the value.

Since you often will want more than one check box or radio button for a group, you give all the inputs you want in the same group to have the same name.

There are only two differences between radio buttons and check boxes. The first is the most obvious, how they look. Check boxes are square and can have a check, while radio buttons are circular with a filled circle inside. The other difference is that radio buttons can only have one selected per group, while check boxes can have as many as you want.

Below is an example with four check boxes in a group, and four radio buttons in another group. Notice how you can select as many check boxes as you want, but the radio button will move around with only one selected:

<form action="#" method="post">
	<fieldset>
		<legend>Radio Buttons and Check Boxes Example</legend>
		<input type="checkbox" name="checkboxes" checked="checked">
		<input type="checkbox" name="checkboxes">
		<input type="checkbox" name="checkboxes">
		<input type="checkbox" name="checkboxes">
		<input type="radio" name="radiobuttons">
		<input type="radio" name="radiobuttons" checked="checked">
		<input type="radio" name="radiobuttons">
		<input type="radio" name="radiobuttons">
	</fieldset>
</form>

View Live Example of Radio Buttons and Check Boxes Example

If you wanted to take a look at the values individually, you could assign each of them a unique id. Remember, you can have multiple elements with one name, but only one element with an id.

Button, Submit, and Reset Buttons

Submit buttons (type=”submit”), reset buttons (type=”reset”) and regular buttons (type=”button”) all behave nearly the same. The value attribute of the input element is used to set the text that appears on button, and is pretty much the only attribute that needs to be set when using buttons.

The difference between the three types is what happens when you click them. Reset buttons will reset the form to the values that were in the form when the page first loads. Submit buttons will submit the form, sending it to the page specified by the form elements action attribute. The regular buttons don’t do anything when pressed. To have them to anything, you must specify a Javascript action for them, using an attribute such as onclick. We’ll discuss this later on in our Javascript lessons.

There is also a button element (<button>), which is essentially identical to the input element. It also has a type attribute (which only takes “button”, “reset”, or “submit”) and a value property, though the value property isn’t the text on the button in this case. The button element has an opening and closing tag, and the text that appears on the button goes in between these two. That means some inline elements, like strong (<strong>) can go in a button.

Basically the button is used when a simple string of text isn’t enough. However, you should be careful because it isn’t very well supported by most browsers yet (especially Internet Explorer), so use it with caution and thoroughly test the page. The input element buttons are good in most cases though.

Here is an example of the 3 types of buttons. There is also a text input so you can see the effects of the reset button. Note that the action is set to “#”, so it simply reloads the page. Also, I’ve set this method to get so you can take a look at how the URL changes:

<form action="#" method="get">
  <fieldset>
    <legend>Button, Radio, and Submit Buttons Example</legend>
    <input type="text" id="test">
    <input type="button" value="I don't do anything.">
    <input type="reset" value="I reset what you put in the text input.">
    <input type="submit" value="I submit the form.">
    <button type="button">I'm a button element that does nothing.</button>
  </fieldset>
</form>

View Live Example of Button, Submit, and Reset Buttons Form

Image Input

If you use an image input (type=”image”) you can specify an image to use in place of a submit button. Essentially, the image is simply a way to replace the submit button with something a bit more exciting. To use an image type you need to specify two attributes. The first is the source (src), which you put the image’s filename in (same as the src attribute for the image element (<img>)). The other is the alternate text attribute (alt), which is also identical to the alternate text attribute of the image element.

There will be an example of this, combined with the file and hidden inputs in a bit.

File Input

The file input (type=”file”) is used to upload files to from the users computer to the server. The file input takes an optional attribute, accept. This attribute let’s you specify what types of files you can upload. You specify these by a comma-seperated list of mime-types. Mime-types are a string that specifies the type of file it is. For example, the common image formats JPG, GIF, and PNG have mime-types of image/jpg, image/gif, and image/png respectively.

Note that the file input doesn’t let you do something with the file you upload. Usually what will happen is the file is uploaded to your server in a temp section. If you don’t use server-side scripting like PHP to move this file, the file will simply disappear after a while. We’ll talk about this in later PHP lessons.

The example for this is in the next section.

Hidden Input

The hidden input (type=”hidden” is used to specify a value to be passed on when the form is uploaded. The user never sees this value, nor can they change it, and it is simply passed on when the form is uploaded. The hidden input passes on whatever you set in it’s value attribute to the server.

Warning: Don’t rely on this value to pass critical information to your server. While it is normally not possible to change this value, there are ways that advanced users can get around this and “hack” your form, changing this value at will. Keep this in mind when you start doing PHP involving forms. Don’t let it become a security hole.

Here is an example of image, file, and hidden inputs. I’ve set the method to get this time so you can see that the hidden input is actually sent. Also notice that there isn’t anything displayed for the hidden inputs. The image input works just like the submit button. I’ve also set the file input’s accept to a non-existent mime-type, so you can’t actually upload anything.

<form action="#" method="get">
  <fieldset>
    <legend>Image, File, and Hidden Inputs Example</legend>
    <input type="hidden" id="hidden1" value="Hello World">
    <input type="file" id="file" accept="fake/notreal">
    <input type="hidden" id="hidden2" value="My name is bob">
    <input type="image" src="images/button.png" alt="Submit">
  </fieldset>
</form>

View Live Example of Image, File, and Hidden Inputs

What a long lesson. In this lesson we covered a lot, and all just for one very flexible element: the input element (<input>). In our next lesson we’ll take a look at a few of the other elements for receiving user input (that aren’t <input>).