Forms are not difficult. They are almost useless without some sort of scripting but if you learn forms now you can use them more with PHP later. The form collects data from the user and the browser sends it to the server. Then the scripting language does something with that data. The scripting can be done using cgi scripts but on this page and the next one the form data gets sent to a PHP page.
Basics
To create a simple form you need three main elements:
- the form element with attributes telling the browser how to handle the form
- at least one place where data can be put in by the user
- a button to tell the browser to send the data
<form method="post" action="http://www.yourwebskills.com/files/examples/process.php">
<input type="text" name="text1" />
<input type="submit" />
</form>
Paste that into a blank Web page (with the standard HTML, HEAD and BODY elements) and try it.
The FORM tags surround the rest and can also include other HTML elements (e.g. DIVs for layout). The FORM element doesn't show visibly in any way. Included in the opening FORM tag are two attribute/value pairs. The METHOD choses between two ways of getting the data to the server. The ACTION is the page which handles the data. The above form is sent using the POST method to a page called process.php on the yourwebskills.com server. process.php is a very simple PHP page which will show you the data you put in the form. You should be able to use that ACTION to test any form until you learn PHP for yourself.
Inside the FORM element are the visible parts of the form.
The two INPUT elements are self-closing and are two different TYPEs. The text INPUT field is a box for the user to type text into. The submit TYPE is a button which sends the data. The NAME for the text field is there to identify the data later. When the data is sent to the server the contents of that text box will be accessed using the name (you will see this when you try it).
Paste the above code into a page and view it. Put something in the text field and press the button.
Next copy the text field line to create a new one. You need to change the name for the new field (any names are fine as long as they are unique and start with text). Try the new form.
Other attributes
Input fields need some extra attributes which can then be used by the browser and server:
- id="fred" identifies the INPUT element itself (used by labels, JavaScript and CSS)
- value="some text" puts some default data in the field already
- size="10" sets the display width of the field (in characters for text/password or pixels for everything else)
- maxlength="10" stops the user from entering more characters than you want as a limit
- tabindex="4" sets the order of the fields for the user to tab through using the keyboard (traditionally tab was used to move around the screen without a mouse)
- accesskey="w" sets a shortcut, if the user presses ALT-w while on the Web page the cursor jumps to this field (keyboard shortcuts also work with links so be careful not to have a link with the same access key
- readonly means the user cannot change the default value of the field (there is no value for this key word)
- disabled means the user cannot even get the cursor into the field (again no value)
Add the NAME attribute to the text field in the form. Try the form again and it should work now. The result will show as the name of the field and the content of that field. Copy the INPUT text field to create another. Change the name as each field should have a unique name. Try the form again.
Try adding each of the above attributes and experimenting. You will learn more field types soon. For now copy the INPUT element and have more fields with different names, IDs and sizes. Submit this form and see the data received by the server.
Labels
It is possible to use normal paragraph text to label fields and explain to the user what they could type in. However, LABEL tags allow the label to be linked to the field (you must include the ID in the INPUT tag) so that if the label is clicked the field gets the focus:
<form method="post" action="form.php">
<label for="text1">Type your name here: </label><input type="text" name="text1" id="text1" size="15" />
<input type="submit" />
</form>
Attach some labels to your fields. The results will not change but it should help the user.
POST and GET
Forms can send data in two main ways:
- GET which sends the data in the address of the next page (as part of the URI)
- POST which sends the data invisibly to the server
POST is a neater way but either will work. The ACTION page on yourwebskills.com can handle both so change your form METHOD to get and try again. Look in the address bar of your browser to see the GET data once the form has been sent (after a ?).
