Lesson 6: HTML form elements

ByDr.-Ing. Erik Neitzel
Lesson 6: HTML form elements

This lesson gives an introduction to HTML form elements and how they are used within web pages. WordPress plugins usually help you as a blogger to create such forms by using your mouse, yet we want to understand what is happening there. That way you are able to fix and improve the forms you create.

A simple HTML form

First of all, let’s look at how a form is used in general.

1
2
3
<form action="mailto:user@domain.de" method="POST" enctype="text/plain">
     <!-- Some input and/or button elements -->
</form>

As you can see, the tag in question is called “form” and has two very important attributes: action and method. Action is responsible for what happens when a user clicks the submit button inside your form. In the case shown above the form data is being send via email by the web server.

As we grow our knowledge of server sided scripting using PHP, however, we will see what we can do if the form action contains a target-script.php. Then it will also get clear what the method attribute is all about. For now let’s just keep in mind not to forget those two attributes. The encoding type is simply for, well, style.

Within a form, you may want to have at least one text input field:

1
<input type="text" name="name" value="Your name" />

If your form use case does not require any other sorts of user data but free text inputs, then you are almost finished. Scroll to the end of this article to get your submit button syntax, and you will have your form. If you need some more stuff, just read ahead.

Radio buttons and check boxes

There are cases in which you want to restrict user input to certain pre-defined values. If you want her or him to decide between two or more specific choices, use radio buttons:

1
2
<input type="radio" name="gender" value="m"/>male<br/>
<input type="radio" name="gender" value="w"/>female<br/>

If the user should have the possibility to select more than just one entry at the same time, use check boxes:

1
2
<input type="checkbox" name="skills" value="1"/>Snowboarding<br/>
<input type="checkbox" name="skills" value="2"/>Skiing<br/>

Please note that the user may see “Snowboarding” but the target to which your form gets send to just receives “skills:1”, since the value for a checkbox named skills is 1. This is the same with any other input element. Values being transferred to the form destination can be different from what the user sees.

Dropdown menus

If you have to display a lot of data, while the user still has just one choice, you may not want to flood your form with fifty radio buttons. You can use drop down menus instead:

1
2
3
4
5
6
7
8
9
<select name="state" size="1">
     <option value="0" selected>Please select</option>
     <option value="1">Alabama</option>
     <option value="2">Alaska</option>
     <option value="3">Arizona</option>
     <option value="4">Arkansas</option>
     <option value="5">California</option>
     <!-- and so on -->
</select>

Here it is important to note again, that the user may see some text like “Alabama” but the target script receives value “1”.

Why is this important? This is advanced, but interesting to know if you are a little more experienced: You may have cases in which you build dropdown lists dynamically using PHP based on database content.

That content can also be changed all the time (this is what databases are for). But then you may have entries within your dropdown list that all look alike at worst (think of surnames, for examples). The value, however, will be different, since here you may want to use primary keys, which are always unique. Then, your target script will know the difference between all the entries.

Password and hidden fields

At times you want the user to have some privacy while typing. For that, you can use input type “password”, which results in seeing stars or bubbles instead of the actual text entered:

1
<input type="password" name="entered_user_password"/>

There are also times in which you want to send some other data to your target destination (e.g. a PHP script) which the user shall not have any influence on. Submitting the clients IP address is an example for such a hidden field, which you can use as follows:

1
<input type="hidden" name="sec" value="abc"/>

Buttons

Finally, a form must be able to get sent and to get cleared:

1
2
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>

Example form

To sum up what we’ve learned so far, you could have a very simple HTML form like this:

1
2
3
4
5
6
<form action="mailto:user@domain.de" method="POST" enctype="text/plain">
     <input type="text" name="name" value="Your name" />
     <input type="radio" name="gender" value="m"/>male<br/>
     <input type="radio" name="gender" value="w"/>female<br/>
     <button type="submit" value="Submit">Submit</button>
</form>

By the way, it is a good idea to structure form input elements using an HTML table inside the form. That way the form looks more straight. This concludes HTML forms within this PHP MySQL tutorial for now.

The next lessons:

Dr.-Ing. Erik Neitzel