Extended Form Elements

Option Lists in HTML Forms

When you want to display many options on a small space, you can use dropdown option lists. An example would be, from which state a user is comming:


In the example above some states are missing, but it think the principle is clear.

And we add this to our form for sure:

Now the form ist nearly complete but an very important element is missing. We need a button to submit the form.


Submit Buttons

You can add a submit button, with the following tag:

We need to define the Attribute "type" of the button. To change the label of the button, we need to change the value attribute.


One Formelement, that is pretty important, but i could not use in this form example is the password field.


Password Fields

With a password field, the user can write down his password into a field, where the content is only displayed with stars and nobody else could see it.

This is the tag for a password field:

An additional feature are hidden form fields, they can be very usefull.

Hidden form fields

[Translate to english:] Ein verstecktes Formularfeld dient zu reinen Datentransport. Bei PHP Skripten kann man z.B. soetwas manchmal finden:

A hidden for field can be used to transport hidden control infomration or to pass a state to a server application.

By adding this hidden element to the form, the application can later check if the form has been send to the server.

These hidden form fields can also be used to send status information.


But keep in mind, these fields can be manipulated very easy, so you should never use them to transfer or transport sensitive data.


In the form example, we don't use this element because there is no need. The finished form example looks like this:

A mail generated by this form would look like this:

name=Timo Schmidt
oppinion=Awesome website