A working form

We now have enough information to construct a working form, so we will start off with something fairly basic, then afterwards put together a more complicated form that we can examine in depth. Here is the basic form:

<form action="someform.php" method="post">
Name: <input type="text" name="Name" value="Jim" /><br />
Password: <input type="PASSWORD" name="Password" /><br />
Age: <input type="text" name="Age" /><br />
<input type="submit" />
</form>

That will submit three variables to someform.php: Name, Password, and Age. Note how form variables are given names using the name attribute - the names you use here will be used in the PHP script that receives the variables. Also notice that the default value of a field can be set using the value attribute, which means that the Name text box will be set to "Jim" by default.

A final key thing you should take note of is that the Age field, which will presumably contain numbers like 18, 34, etc, is the same type as the Name field, which is likely to contain strings like "Bob", "Sarah", etc. HTML does not have any way to say "restrict this field to numbers only", which means users can enter their age as "Elephant" if they wish. Never trust input from users!

And now a more complicated form, using various other types:

<form action="someform.php" method="get">
Name: <input type="text" name="Name" value="Jim" /><br />
Password: <input type="password" name="Password" maxlength="10" /><br />
Age range: <select name="Age">
<option value="Under 16">Under 16</option>
<option value="16-30" selected="selected">16-30</option>
<option value="31-50">31-50</option>
<option value="51-80">51-80</option>
</select><br /><br />
Life story:<br /> <textarea name="Story" rows="10" cols="80">Enter your life story here</textarea><br /><br />
<input type="radio" name="FaveSport" value="Tennis"> Tennis</input>
<input type="radio" name="FaveSport" value="Cricket"> Cricket</input>
<input type="radio" name="FaveSport" value="Baseball"> Baseball</input>
<input type="radio" name="FaveSport" value="Polo"> Polo</input>
<br />
<input type="checkbox" name="Languages[]" value="PHP" checked="checked"> PHP</input>
<input type="checkbox" name="Languages[]" value="CPP"> C++</input>
<input type="checkbox" name="Languages[]" value="Delphi"> Delphi</input>
<input type="checkbox" name="Languages[]" value="Java"> Java</input>
<br /><input type="submit" />
</form>

There are several pieces of particular importance in there, so you should read through carefully:

• maxlength="10" is one of the attributes for the Password element - this can be used in normal text boxes too, and acts to restrict the number of characters that be typed in to the value of maxlength - 10, in the example.

• Age is now a drop down list box - note how the name attribute is placed inside the select element, but each individual option element has its own value. The text inside the value attribute is what is submitted to the form handler specified in the form's action attribute - the text after each option and before the next option is the text the user will see.

• "selected" is specified as an attribute of one of the option elements, which means that that option will be the default selection of the parent select list.

• Life story is a text area element. Note that it has attributes rows and cols to specify the size of the text area, in characters.

• All members of a "radio" element group need to have the same "name" attribute. The "name" attribute is used to inform the browser which group each "radio" element is part of so that users can only select one at a time.

• All members of a check box element group need to have the same "name" attribute, and that "name" attribute needs brackets [ ] at the end. The reason for the brackets is because they inform PHP that the value may be an array of information - users can select multiple values, and PHP will place them all into an array of the value of the "name" attribute.

• checked="checked" is specified as an attribute of one of the check boxes, which means it will be checked by default.

• GET is the method attribute for the form, meaning that the information sent through to the handler page (someform.php) will be sent in the location bar of the browser as a normal URL. This will allow you to see how easy it is to change variables in the location bar, and, by entering lots of text into the Story text area element, how easy it is to have too much data for GET to handle.

Hundreds of books have been published on HTML programming, and if you want to carry on learning more about HTML you will do best to pick up one of them - that is the section on HTML forms pretty much over with.

Copyright ©2015 Paul Hudson. Follow me: @twostraws.