Hudzilla.org - the homepage of Paul Hudson
Contents > HTML Forms > Designing a form Wish List | Report Bug | About Me ]

7.3.3     A working form

This is NOT the latest copy of this book; click here for the latest version.

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>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> 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 square brackets [ ] at the end. The reason for the square brackets is because it informs 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" 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.

Take a look at the illustration below to see how the form should look:



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.





<< 7.3.2 Available elements   7.4 Handling data >>
Table of Contents
 Want to see this stuff in print? PHP in a Nutshell takes the core topics covered here, adds in thousands of edits from the editorial team and myself, and combines them to make an unbeatable reference for PHP programmers at all levels.



My latest book has hundreds more tips on how to use PHP, Apache, and MySQL, plus Perl, Python, shell scripts, performance tuning, and more!
Top-right shadow
 
Bottom-left shadow Bottom shadow

Comments from other readers
A PHP User - 07 Sep 2008
fuki-u!!

A PHP User - 07 Sep 2008
hi tell me how checkbox value can be checked and the values can be sent to an e-mail with help php programming

Vaani , mailvaani@gmail.com - 07 Sep 2008
hi tell me how checkbox value can be checked and the values can be sent to an e-mail

A PHP User - 07 Sep 2008
yippee

A PHP User - 07 Sep 2008
[QUOTE]where do I find the someform.php.I created one in the default directory in htdocs where I place my scripts and it did not record anything when I submitted the form[/QUOTE]

Not sure if the comment use BB Code so excuse the QUOTE BB Code. You will need to actually make the someform.php do some thing for example you would just write the below into someform.php
<?php
echo $_GET['Age']."<br />";
echo $_GET['Story']."<br />";
echo $_GET['FaveSport']."<br />";
echo "<pre>";
print_r($_GET['Languages']);
echo "</pre>";
?>

A PHP User - 07 Sep 2008
where do I find the someform.php.I created one in the default directory in htdocs where I place my scripts and it did not record anything when I submitted the form

Thanks for the excellent web page

Jeff - 07 Sep 2008
Great book thank you!

A PHP User - 07 Sep 2008
check

died_at_27 - 07 Sep 2008
this one of the best e-books I ve ever seen, be sure I have seen many. a beginner can build his/her own by using this

tnx

matt - 07 Sep 2008
To Derek Manson

People only correct errors so other readers who may have missed them will see it.


anyway,
if you want xhtml compatable stuff, you need it all lowercase and things like "checked" need to be "checked=checked" in xhtml.

Tom - 07 Sep 2008
Alternately, instead of a select box, you could return an error if the age is bad, as in...

if(!is_numeric(ceil($_POST['age']))) $errors[] = 'Age must be numeric.';

You could also generate the select box with a for loop:

<?php
print'<select name="somefield">'."\n";
for($i = 0; $i < 60; ++$i) {
print'<option value="'.$i.'">'.$i.'</option>'."\n";
}
print"</select>\n";
?>

A PHP User - 07 Sep 2008
The example is fine - he mentioned CHECKED in the text and the code.

Derek Manson - 07 Sep 2008
Don't be such a jackass. The dude took the time to make
the damn thing. I sure as hell wouldent have
taken the time to put all of this information into
this kind of format. Who gives a fuck if he missed a few
small details. Your soposed to LEARN from the examples
and from the information he has given to you. It seems you
are trying to COPY his work and show it as your own.
Fucking loser, get a fucking life and leave people alone.
Scum bags like you piss me off to the core.

-Who ever did this, you did just fine.

Derek Manson - 07 Sep 2008
Don't be such a jackass. The dude took the time to make
the damn thing. I sure as hell wouldent have
taken the time to put all of this information into
this kind of format. Who gives a fuck if he missed a few
small details. Your soposed to LEARN from the examples
and from the information he has given to you. It seems you
are trying to COPY his work and show it as your own.
Fucking loser, get a fucking life and leave people alone.
Scum bags like you piss me off to the core.

-Who ever did this, you did just fine.

Derek Manson - 07 Sep 2008
Don't be such a jackass. The dude took the time to make
the damn thing. I sure as hell wouldent have
taken the time to put all of this information into
this kind of format. Who gives a fuck if he missed a few
small details. Your soposed to LEARN from the examples
and from the information he has given to you. It seems you
are trying to COPY his work and show it as your own.
Fucking loser, get a fucking life and leave people alone.
Scum bags like you piss me off to the core.

-Who ever did this, you did just fine.

Unix Programmer - 07 Sep 2008
This is a nit.

You referred to the CHECKED attribute in the text but not in the example.

(I really like this book! Very well presented.)

A PHP User - 07 Sep 2008
Go to hell

dho - 07 Sep 2008
A really good HTML reference is http://www.selfhtml.org/



Add comment
Please note that by posting a comment here you are committing it to the public domain. This is important so that others can make use of your code themselves, and also so that I can incorporate helpful notes directly into the main text. Comments are limited to 2000 characters in length.

If you are reporting an error in the content, please tell me directly.

Your name/email address:
Your comment:
 
Now, in order to verify that you're a real person, please answer this simple question: what is one plus four?
The answer is:
(please write in
numbers, eg 19)


Top-right shadow
 
Bottom-left shadow Bottom shadow

This website and its content is copyright © Paul Hudson 2005, all rights reserved.