Home Logo
Show Full Menu
Hide Full Menu
 

Continuing forms [Input Types]

Created: 17/09/10 Views: 842 myFave Image

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;
it is the type attribute that makes each input differ.
Here is the list of input types;

We will not look at the input types separately.

Button

The button input type is a clickable button which is usually used to activate javascript.
Here is an example of a button
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.


Checkbox

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.


File Field

The file input type uses the 'browse' option to select a file from your computer.
Here is an example of a file field
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.


Hidden Field

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
As you can tell, there is no visual example, this is because it's hidden, however on submission of the form, there will be data given from the name 'hiddenData' of 'customer_1'.


Image Field

The image input type allows you use an image for a submit button.
Here is an example of an image 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.


Password Field

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.


Radio Button

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.


Reset Button

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 reset button nothing will happen as there are no other fields to reset. You will be able to see this in practice in the last form mini-series of tutorials.


Submit Button

The submit is a button that when clicked will submit (send) the forms data to the server for processing.
Here is an example of a submit 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.


Text Field

The text input style is a singular line box to enter text.
Here is an example of a text field
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.

next tutorial: Continuing forms [Textarea]

There are no comments