HTML Forms II

Last week I explained the markup required for setting up the main aspects of a form. This week I’m going to explain the form input tag and its various uses.

The input tag

The input tag offers us several types of field depending on the value of the type attribute used. The different types available are text, password, checkbox, radio, file, hidden, submit, reset, button, image.

The type attribute defines the type of input field we’re using, and depending on what’s used can then define how the other attributes are used. So the different types are:

text

The text type is the most common input type used. This gives us a text field to allow the user to type in plain text. When using a text input you have the following attributes available to you

id

This should match the value of the label’s for attribute, as explained last week, and also the value of the name attribute (see below)

name

This is a required for serverside scripting and should match the value of the id attribute.

size

This allows you to define the length of the field displayed on the screen. It’s optional.

maxlength

This allows you to restrict the maximum number of characters allowed in the text box. This is optional.

value

If this contains a value it will be displayed in the text field. This is optional

disabled

The disabled attribute (which should have a value of disabled), will prevent the user from being able to edit the content of the field.

Example usage of this would be

<label for="fieldname">Name</label>
<input type="text" id="fieldname" name="fieldname" size="25" maxlength="100" value="Your Name" />

password

The password type is identical to the text type except by using a type value of password it masks the characters typed into the box from anyone else.

checkbox

A checkbox is a tickbox (basically!). You can have a single checkbox or a group of checkboxes. The attributes available on this are

id

This should match the label’s for attribute value.

name

This can either match the ID or if it’s for a group of checkboxes it can use a different value. For accessing the checkboxes via PHP or ASP you need to use the same name in the group and put square brackets at the end of it eg. name=”chkboxes[]“.

value

This is a required attribute otherwise your checkbox, despite being checked, will be empty.

checked

If you want to set your checkbox to be ticked by default then it must use the checked attribute and have a value of checked.

An example of usage is

<label for="chkname"><input type="checkbox" id="chkname" name="chkname" value="Box 1" checked="checked" /> Box 1</label>

(Technically you don’t need the for attribute in the label tag when you wrap the tag inside the label tags, however for code completion I still use it).

radio

‘Radio buttons’ are similar to checkboxes (they’re the circle ones), however you usually have a group of radio buttons and they all share the same name attribute. The difference then is that you can only select one radio button in a group. Otherwise the attributes available are the same as for the checkbox above.

An example of using radio buttons could be to ask someone their favourite colour eg.

<label for="red"><input type="radio" id="red" name="colour" value="Red" /> Red</label>
<label for="blue"><input type="radio" id="blue" name="colour" value="Blue" /> Blue</label>
<label for="green"><input type="radio" id="green" name="colour" value="Green" /> Green</label>

And to see this in action:

Red

Blue

Green

file

The file type allows you to put a file browse box on the form to let someone browse for a file on their computer. If you want to use this then you need to also add the attribute enctype=”multipart/form-data” to the form tag as well, or else the file will not be uploaded.

When using the file type the following attributes are available:

id

This should match the value of the label’s for attribute, as explained last week, and also the value of the name attribute (see below)

name

This should match the value of the id attribute.

size

This allows you to define the length of the field displayed on the screen. It’s optional.

This field is quite similar to the text field with the attributes and the usage is similar, except the outcome with add a browse button after the field eg.

hidden

Hidden input types allow you to add additional data into a form without it being displayed on the screen. This is quite similar to the text input except that you must have the value attribute, and do not need the size, maxlength or disabled attributes, eg.

<input type="hidden" id="fieldname" name="fieldname" value="Reference Code" />

submit

The submit type will create a submit button on the screen to allow your user to submit the form by clicking the button. The attributes available are

id

This should match the value of the label’s for attribute, as explained last week, and also the value of the name attribute (see below)

name

This should match the value of the id attribute.

size

This allows you to define the width of the button displayed on the screen. It’s optional.

value

This should contain the text for the button.

disabled

The disabled attribute (which should have a value of disabled), will disable the button and the user will not be able to click it.

An example of usage for this is

<input type="submit" id="subbutton" name="subbutton" value="Submit Form" />

reset

The reset button is identical to the submit button above, except you use a type value of ‘reset’. On clicking a reset button, the form will be reset to the default values.

button

This defines a clickable button, similar to the reset and submit buttons. It’s usually used to activate JavaScript applications. It uses the same attributes as the submit button except the type value is ‘button’.

image

Instead of a standard submit button you can use a graphical image to act as the submit button instead by setting a type value of ‘image’. The attributes used with this type are:

id

This should match the value of the name attribute.

name

This should match the value of the id attribute.

src

Required. This points to the source of the image, similar to the img tag.

alt

Required. This contains the alternative text incase the image is not displayed, and for accessibility purposes.

Conclusion

The input tag is quite complex but very useful! Next week I’ll explain the other form inputs, select and textarea, and give some examples of form usage in full.

Written by Sarah from Stuff By Sarah
Posted on February 26th, 2009 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates

4