Forms

Creating forms with HTML

To admit, with HTML only there are not so many use cases for forms. But you should still get used to them and understand how they work, because when you build interactive web applications, forms are essential to build these dynamic components.

 

For this workshop i want to show you forms by example of an mail form. When you will learn PHP someday or any other server side programming lanuage. You will recognize that there are better solutions for this task. But in this example, the principle is important.


To start a form, you need to add a form area. The form area is defined with the form tag (<form></form>). With the attribute "action" you define what will happen with the form, when the user submits this form. With the attribute "method" you define how the content of the form should be send. The method can be get" or "post".

 

When you use the "get" method, the data of the form will be submitted in the url, The method "post" will post it with the http body instead, this is important because the lenght of urls is limited to 1024 signs. The "enctype" , that you see in the example is used a encoding type of the mail and only relevant for this example.

<form action="mailto:user@domain.de"  method="post" enctype="text/plain">
   <!-- This is where the form fields go -->
</form> 

When you add the HTML code above to your page, you will see, that nothing would change, because by now our form has no fields.

You will see a difference as soon as you add fields to your form. So let's start and add a text field to the form:

Add a textfield to the HTML form

Whenever you want to allow the user to add numbers or text, you can chosse a textfield.

You can add it like this:

<form action="mailto:user@domain.de" method="post" enctype="text/plain">
   <!-- textfield to add a name to the form -->
   Name: <input type="text" name="name" value="Your Name">
</form>

We use the <input> tag for our text fied. This tag allows you to add the "type" attribute. This "type" attribute contains the definition of the datatype that you want to send. With the "value" attribute you can define default text of the form.

The Textarea tag

With textfields you only have a one line field. When you need a larger area for text, there the user can add many lines you can use the <textarea> tag.

To see how it works, we add a textarea fields, where the user can add a message for his mail.

<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>
</form> 


As you see a textarea needs a closing tag. You can add the default text between the start and end tag of the textarea.

Adding checkboxes to a form

For some parts in a form you need a box, that the user can select or not. Theses boxes are called "checkbox". The user can select as much or a minimum options as he likes.

You can use the following tag to add a checkbox:

 

<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/>


All fields have the same name in this form. To identify what was selected by the user, we give every option a unique value in the "value" attribute. And we add it to our form:

<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>
</form>

Now we know how to provide the posibility to the user to select multiple options, but how can we force the form, that only one of many options is selectable?

Radiobuttons

Radioboxes have there name from old radios. When you press a button on those old radios all others have been disabled. It was only possible to activate one button at a time.

 

For HTML Radiobuttons it's the same, they are used when you only want to allow one selection at the time. A good example here is the gender, because nobody has two at the same time ;)


You can at this radio button like this:

<input type="radio" name="gender" value="male"/>Male<br/>
<input type="radio" name="gender" value="female"/>Female<br/>

For radio buttons from the same group it is important, that the "name" Attribute contains the same name.


So let's add the radio button to our contact form:

 

<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>Geschlecht:<br />
     <input type="radio" name="gender" value="male"> Male<br />
     <input type="radio" name="gender" value="female"> Female<br />
   </p>

</form>

Beside the form elements that you have learned by now, there are more elements available in HTML. One example are dropdown lists or password fields. On the next page you will learn more about these form elements.

 

 

Navigation