Forms

Forms are used to collect user input to be sent to a program on the server for processing. Forms can range from a simple login form with a username and password to complex forms spanning several pages for an online application form or survey. A form contains interactive widgets catering for different input types.

Consider the following:

<form method="get" action="server_program_name">

      <label for="email">Email: </label>
      <input type="text" id="email" name="email" />
      
      <label for="password">Password: </label>
      <input type="password" id="password" name="password" />
      
      <button type="submit" value="submit">Sign in</button>
      
</form>
Email: Password:
  • The two common attributes defined for the form element are method and action. The method attribute can set the HTTP request to get or post. The action attribute specifies the name of the program on the server that should receive the form input data.
  • Note the input elements have type values, text, password and submit determinning how the browser should handle the data.
  • The input elements are paired with a label element through the for and id attributes having the same value.

Submitting form data

Once a button or input type submit is clicked, a browser would send the input data via an HTTP request to the program specified by the form action attribute. For the above form example with the get method, the URL would be similar to: http://host/server_program_name?email=user_input&password=user_input. The server program can now retreive the form data from the HTTP call and process it. Note the HTTP syntax name=value seperated by an &, i.e. email=user_input&password=user_input. The alternative to get is the post method which works in a similar way using an HTTP post request.

The basic mechanism for forms to send user data to a server program is to use the HTTP get and post methods.

Form widgets

HTML Forms are made flexible with widgets for different user input. HTML5 provides a series of input types and validation attributes. Try the following form and see the following sections for example HTML for the widgets used in this form.

Sample form

Input widget types

Sign in: Password:

Choose your favourite colour: Red Green Blue

Select your favourite colour(s): red green blue

file:

  • All these are input elements with their type attribute set to text, password, radio, checkbox and file

Select widgets

Single select box

Multiple select widget (Use Shift and Ctrl keys):

Text area widget

Input widget types

The sample “Sign in” form above had the basic text and password inputs. The following are the remainning input widgets.

Radio button widget

Radio buttons are specified using the input type radio. They are grouped together by sharing the same value for their name attribute. For example:

<p>Choose your favourite colour:
   <input type="radio" name="colour" value="red" checked="checked" /> Red
   <input type="radio" name="colour" value="green" /> Green
   <input type="radio" name="colour" value="blue" /> Blue
</p>
<p>Which is your favourite pass time?
   <input type="radio" name="hobby" value="travel" /> Travel
   <input type="radio" name="hobby" value="food" /> Food
   <input type="radio" name="hobby" value="sky diving" /> Sky Diving
</p>

Choose your favourite colour: Red Green Blue

Which is your favourite pass time? Travel Food Sky Diving

On submit, the selected name=value pair is sent to the server with an HTTP request data similar to, colour="green"&hobby="travel"

Check box widget

A check box is created by using the input element with its type attribute set to the value checkbox

<p>Select your favourite colour(s):
   <input type="checkbox" name="red" value="true" checked="checked" /> red
   <input type="checkbox" name="green" value="true" /> green
   <input type="checkbox" name="blue" value="true" checked="checked" /> blue
</p>

Select your favourite colour(s): red green blue

On submit, only the selected name=value pair is sent to the server with an HTTP request data similar to, red="true"&blue="true"

File picker widget

HTML forms are able to send a file as user input to the server. A file picker widget can be specified with the input element type attribute set to the value file.

<form method="post" enctype="multipart/form-data" action="my_server_prog">
   <p>
      <label for="fileupload">Please choose a file to upload: </label>
      <input type="file" id="fileupload" name="file1" />
   </p>
</form>
  • Files are considered as binary data by HTML forms hence they can not be sent with the HTTP get method which appends text data in a URL. Instead the post method is used.
  • The HTTP Content-Type header is set by default to application/x-www-form-urlencoded; i.e. the form data is appended to the URL. For files, the HTTP Content-Type needs to be set with the HTML attribute enctype to multipart/form-data which splits the form data into multiple parts, one part for each file and one for any other form data.
  • The form files are received by the server program specified by the action attribute.

HTML5 new widgets

The following widgets are not supported by all browsers.

HTML5 new widgets


Choose a number:
1 5

  • To see the validation, try the email and url widgets and click the submit button.
  • In Chrome, try the Date and the Colour widgets to see the pop up windows.
<form method="post" enctype="multipart/form-data" action="my_server_program" >
   <p>
      <label for="email">What is your Email?</label>
      <input type="email" id="email" name="email" />
      <label for="url">Enter a URL:</label>
      <input type="url" id="url" name="url" />
      <label for="number">Choose a number:</label>
      <input type="number" min="1" max="10" step="2" id="number" name="number"  />
      <p>
      Choose a number:<br />
       1 <input type="range" min="1" max="5" step="1" id="range" name="range" /> 5
      </p>
      <label for="date">Select a date:</label>
      <input type="date" id="date" name="date" />
      <label for="colour">Pick a color:</label>
      <input type="color" id="colour" name="colour" />
      <label for="colours">What's your favorite colour?</label>
      <input type="text" id="colours" list="hint" placeholder="try b!" name="colours" />
      <datalist id="hint">
         <option>Red</option>
         <option>Green</option>
         <option>Baige</option>
         <option>Blue</option>
      </datalist>
      </p>
      <p>
      <button type="submit" value="submit">
         Submit
      </button>
      </p>
</form>

Exercise – Forms

  1. In the portfolio wd folder, create a form.html file.
  2. Save an example of each of the HTML widgets described above and in the form.html file.
  3. Validate the form.html file.