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:

 

<select name="state" size="1">
   <option value="none">outside US</option>
   <option value="virginia">Virginia</option>
   <option value="newyork">New York</option>
   <option value="florida">Florida</option>
</select> 


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


And we add this to our form for sure:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- textfield for the name of the user-->
   Name: <input type="text" name="name" value="your name">
   <!-- multi line text area -->
   You Oppinion:
   <textarea name="oppinion">     
    Please write a shot summary of your oppinion
   </textarea>
   <p>Thats what i know about html:<br />
      <input type="checkbox" name="knowledge" value="images"/>Images<br/> 
      <input type="checkbox" name="knowledge" value="frames"/>Frames<br/> 
      <input type="checkbox" name="knowledge" value="tables"/>Tables<br/>
      <input type="checkbox" name="knowledge" value="forms"/>Forms<br/>
   </p>
   <!-- Radio button for gender selection -->
   <p>Gender:<br />
     <input type="radio" name="gender" value="male"> Male<br />
     <input type="radio" name="gender" value="female"> Female<br />
   </p>
   <p>State:<br/>
      <select name="state" size="1">
         <option value="none">outside US</option>
         <option value="virginia">Virginia</option>
         <option value="newyork">New York</option>
         <option value="florida">Florida</option>
      </select> 
   </p>
</form>

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:

<input type="submit" value="Send email"/>

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:

<input type="password" name="feldname"/>

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.


<input type="hidden" name="filled" value="true"/> 

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:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- textfield for the name of the user-->
   Name: <input type="text" name="name" value="your name">
   <!-- multi line text area -->
   You Oppinion:
   <textarea name="oppinion">     
    Please write a shot summary of your oppinion
   </textarea>
   <p>Thats what i know about html:<br />
      <input type="checkbox" name="knowledge" value="images"/>Images<br/> 
      <input type="checkbox" name="knowledge" value="frames"/>Frames<br/> 
      <input type="checkbox" name="knowledge" value="tables"/>Tables<br/>
      <input type="checkbox" name="knowledge" value="forms"/>Forms<br/>
   </p>
   <!-- Radio button for gender selection -->
   <p>Gender:<br />
     <input type="radio" name="gender" value="male"> Male<br />
     <input type="radio" name="gender" value="female"> Female<br />
   </p>
   <p>State:<br/>
      <select name="state" size="1">
         <option value="none">outside US</option>
         <option value="virginia">Virginia</option>
         <option value="newyork">New York</option>
         <option value="florida">Florida</option>
      </select> 
   </p>
   <!-- add a button to submit the form -->
   <p><input type="submit" value="Send the mail"></p>
</form>

A mail generated by this form would look like this:


name=Timo Schmidt
oppinion=Awesome website
knowledge=bilder
knowledge=frames
knowledge=tabellen
knowledge=formulare
gender=male
state="virginia"

Navigation