In this tutorial we will include input areas in our web page. Input areas are used to allow the end user to insert or choose data from the form. The input areas are written using <input/> tag.
These are the attributes that we are going to use for the <input /> tags;
name the name of the input area
type the input type
value what the value of the input is
size how many characters wide is the area
maxlength maximum limit of characters inputted
checked make item checked by default
it is the type attribute that makes each input differ.
Here is the list of input types;
button a clickable button
checkbox a multiple selection area
file button to browse for a file
hidden a hidden input field
image uses an image for a submit button
password a masked input field designed to hide passwords
radio a single selection area
reset a button that resets the form to their pre-set values
submit a button which send the data to the file in the action attribute
text a singular line input field to enter characters in
We will not look at the input types separately.
Here is an example of a button
<input name="theButton" type="button" value="Click Me" />
As you can tell, the name of the button is 'theButton', value which appears on the button is 'Click Me'. If you click the button now you will realize that nothing happens as no behaviors have been set for it.
The checkbox input type is a multiple selection area using check boxes to tick/un-tick options.
Here is an example of a checkbox
As you can tell, each checkbox is separate, the name of the checkbox is under the name attribute, the value of the checkbox is in the value attribute, also if you notice on the Bread option, i used checked="checked" which sets it checked by default.
The file input type uses the 'browse' option to select a file from your computer.
Here is an example of a file field
<input name="theFile" type="file" size="20" />
As you can tell, when you click on the browsing button it opens up a dialogue box of your folders and files. Once you have selected the file and click submit on a full form the file will be sent, however it requires the ecnctype to be multipart/form-data otherwise the file will be ignored.
The hidden input type allows you to put extra data into the form that is not visible to the end user and is unchangeable, right now you may not be able to think of any uses for it, however when you start the php tutorials you'll understand how useful it is.
Here is an example of a hidden field
At the moment if you click on the button there will be no action as there is no <form></form> tags surrounding it. For the image input type you are required to use the src attribute to tell the browser where to find the source image, I would also recommend using the size and border attributes just so your image will be consistent throughout different browsers.
The password input type is very similar to the text input type but the contents are masked.
Here is an example of a password field
As you can see, if you start typing into the password field, all the characters are masked to prevent anyone else seeing the password, however the actual value is still there when the form gets submitted to the server.
The radio input type is similar to the checkbox however only one option can be selected. To group the radio buttons together you need to keep the name attribute the same as which ever button is selected will be the value of that name.
Here is an example of grouped radio buttons
As you can see, the first button, Cheese, in the coding has the checked attribute written in it which will make 'Cheese' checked by default. If you select another button, the previous one un checks and the clicked button checks, resulting in the name attribute's ('radioList') value only being one of the radio button's value.
The reset is quite simply a button that when clicked will reset the form back to it's 'default' state.
Here is an example of a reset button
At the moment if you click on the submit button nothing will happen as there are no <form></form> tags with form data inside. You will be able to see this in practice in the last form mini-series of tutorials.
The text input style is a singular line box to enter text.
Here is an example of a text field
<input name="theText" type="text" value="Enter text here..." size="30" maxlength="30" />
As you can tell, the name of the text field is 'theText', the pre-set value is 'Enter text here...', the width of the text field is 30 characters wide and the maximum amount of characters allowed in this text field is 30.