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 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:
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
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" />
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.
A checkbox is a tickbox (basically!). You can have a single checkbox or a group of checkboxes. The attributes available on this are
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 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:
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:
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 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" />
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
An example of usage for this is
<input type="submit" id="subbutton" name="subbutton" value="Submit Form" />
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.
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’.
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:
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.
Author comments are in a darker gray color for you to easily identify the posts author in the comments
[...] Read the full post on BloggingTips.com – HTML Forms II [...]
[...] The final installment of this series about forms, their usage and markup. You can catch up on the previous posts at Part 1 and Part 2. [...]
[...] The final installment of this series about forms, their usage and markup. You can catch up on the previous posts at Part 1 and Part 2. [...]
Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums
Great information! Using forms on blogs can really provide bloggers with a wealth of information – more and more folks should use them. I like how you break down the lesson!
Data points, Barbara