Easy Web Site Design

HTML tutorial : HTML Forms

Suggested reading

Forms are used to allow users to send information back to the Web server.

Some typical uses of forms are:

as a search box
on log-in screens to receive user names and passwords
as contact forms (as an alternative to email)
e-commerce order forms, registration / sign-up forms
quizzes
user surveys etc etc

Once a form is submitted its contents must be processed by some kind of script. This is frequently a server side script written in a language such as PHP or Perl. Some common tasks carried out by the script are:

to forward the contents of the form (eg contact form) by e-mail to a site administrator
to consult a database using submitted data (eg search box, login screen)
to update a database (eg sign-up form)

Forms may also be processed by a client side script written in a language such as JavaScript, eg to score and provide feedback on a quiz where results do not need to be collected on the server.

Some forms are processed by both client side and server side scripts. The most frequent use of this approach is to validate the form before submitting it to the server, eg JavaScript is used to check that the user has entered valid data in each part of the form. If so, the form data is submitted to the server, if not JavaScript generates an error message prompting the user to try again.

Fortunately, many form processing scripts have been made available on an open source basis. This means they may be freely used, and modified, without cost. See Web Scripting for sources of free scripts.

Let's learn how HTML forms are constructed by looking at an example. The form below illustrates the most common Web form elements.

Name:

Password:

Describe yourself:
Please type your description in this box

Age: under 20 20-40 41-60 over 60

Interests: Sport Music Movies Travel Reading

Today's weather:

Section(s) to search:
Control-click (Windows) or Command-click (Macintosh) to select more than one.

Below we explain the code used to build the above form.

  <form action="#" method="post" name="myform" id="myform">

Forms are defined within <form> </form> tags. The opening tag takes the following attributes:

action indicates the name of the script file the form data should be sent to, eg action="sendmail.cgi" would send the form data to the script sendmail.cgi
method indicates the method used to send the data - post as in this case means the browser sends the form data in the http request body (essentially, it is hidden from the user). The alternative - get - appends the data to the url requested from the server and is best reserved for small amounts of data.
id is the name of the form which may be used by languages such as JavaScript to retrieve data from it.

  Name: 
    <input name="name" type="text" id="name" 
           value="name" size="20" maxlength="30">

Single line text boxes are defined by <input> tags. In HTML these do not need closing tags. They take the following attributes:

name gives the text box a unique name so that its contents may be accessed by a scripting language.
type defines the type of input. For a text box it's value is text, other allowable values include password, checkbox, radio, submit, reset.
id serves the same function as name.
size indicates the size of the text box.
maxlength indicates the maximum number of characters permitted.
value may be used to define text appearing in the displayed box, eg to provide the user with a prompt or help.

  Password:
    <input name="password" type="password" id="password"           
           size="15" maxlength="15">

An input type of password is similar to a text box except that the characters entered are not displayed on screen, rather they are shown as asterisks or blobs in order to protect the security of sensitive data (such as passwords). TIP As users do not receive visual confirmation of what the have typed it is common to add two password fields to sign-up forms to ensure that original password information is entered correctly (ie the data from the two fields are compared and sign-up is only completed where it agrees).

  Describe yourself:<br>   
  <textarea name="textarea" cols="50" rows="5">     
    Please type your description in this box
  </textarea>

Text boxes allowing multiple lines of input (eg for the message body of a contact form) are defined by <textarea> tags. As with all form elements the attributes include name, cols and rows define the width and height of the displayed box respectively. The text appearing between the <textarea> and </textarea> tags appears in the displayed box and can be used to provide additional help/prompts to the user.

  Age: under 20   
    <input type="radio" name="age" value="agegroup1">   
  20-40    
    <input type="radio" name="age" value="agegroup2">   
  41-60    
    <input type="radio" name="age" value="agegroup3">   
  over 60   
    <input type="radio" name="age" value="agegroup4">

Radio buttons are displayed as small, circular checkable buttons in the browser. They allow the user to select only one item from a group. They are created using an <input> tag with the type attribute set to radio. The input elements comprising a group of radio buttons all share the same name attribute value. Each radio button assigned its own value by way of the value attribute.

  Interests: 
  Sport    
    <input name="interests" type="checkbox" 
           value="sport">
  Music    
    <input name="interests" type="checkbox" 
           value="music">   
  Movies    
    <input name="interests" type="checkbox" 
           value="movies">   
  Travel    
    <input name="interests" type="checkbox" 
           value="travel">   
  Reading   
    <input name="interests" type="checkbox" 
           value="reading" checked>

Check boxes are displayed as small, square checkable buttons in the browser. They allow the user to select numerous items from a group. They are created using an <input> tag with the type attribute set to checkbox. The input elements comprising a group of check boxes all share the same name attribute value. Each check box is assigned its own value by way of the value attribute.

  Today's weather:    
  <select name="weather" size="1">   
    <option value="fine">fine</option>   
    <option value="cloudy">cloudy</option>   
    <option value="rainy">rainy</option>   
    <option value="snowy">snowy</option>   
  </select>

  Section(s) to search:    
  <select name="select" size="3" multiple>   
    <option value="art">art</option>   
    <option value="business">business</option>   
    <option value="finance">finance</option>   
    <option value="science">science</option>   
    <option value="math">mathematics</option>   
    <option value="history">history</option>   
    <option value="supernatural">the supernatural</option>   
  </select>

Drop down lists allow users to select one or more items from a list. They are often used as menus to save space on a Web page, or to select items from long lists such as countries.

Drop down lists are created using the <select> tags. The size attribute indicates the height of the drop down box, eg a size attribute value of 3 creates a box of sufficient height to display 3 items (additional items are accessed by means of scroll bars. The presence of the multiple attribute (no vale) within the select tag indicates more than one value may be selected (by control-clicking in Windows, or command-clicking in Macintosh).

Individual items are defined within <option> tags. Items are given values by means of the value assigned to the value attribute.

  <input type="submit" name="Submit" 
         value="Submit my answers">
  <input name="reset" type="reset" 
         value="Start again">

An input tag having a type attribute set to submit creates a submit button, ie a button which sends the form to the script defined in the action attribute of the opening form tag. The value attribute determines the text to be displayed on the button.

An input tag having a type attribute set to reset creates a reset button, ie a button which clears all entries made by the user allowing the form to be completed afresh.

W3Schools HTML Tutorial

W3C - Dave Raggett's Introduction to HTML

NCSA - A Beginner's Guide to HTML

HTML 4.01 Specification

USENET newsgroups:
alt.html
comp.infosystems.www.authoring.site-design
comp.infosystems.www.authoring.html
alt.macromedia.dreamweaver
macromedia.dreamweaver

Easy Web Site Design HTML tutorial : HTML Forms


Suggested reading More books on Web Site Design	Forms are used to allow users to send information back to the Web server. Some typical uses of forms are: as a search box on log-in screens to receive user names and passwords as contact forms (as an alternative to email) e-commerce order forms, registration / sign-up forms quizzes user surveys etc etc Once a form is submitted its contents must be processed by some kind of script. This is frequently a server side script written in a language such as PHP or Perl. Some common tasks carried out by the script are: to forward the contents of the form (eg contact form) by e-mail to a site administrator to consult a database using submitted data (eg search box, login screen) to update a database (eg sign-up form) Forms may also be processed by a client side script written in a language such as JavaScript, eg to score and provide feedback on a quiz where results do not need to be collected on the server. Some forms are processed by both client side and server side scripts. The most frequent use of this approach is to validate the form before submitting it to the server, eg JavaScript is used to check that the user has entered valid data in each part of the form. If so, the form data is submitted to the server, if not JavaScript generates an error message prompting the user to try again. Fortunately, many form processing scripts have been made available on an open source basis. This means they may be freely used, and modified, without cost. See Web Scripting for sources of free scripts. Let's learn how HTML forms are constructed by looking at an example. The form below illustrates the most common Web form elements. back to top Name: Password: Describe yourself: Please type your description in this box Age: under 20 20-40 41-60 over 60 Interests: Sport Music Movies Travel Reading Today's weather: Section(s) to search: Control-click (Windows) or Command-click (Macintosh) to select more than one. Below we explain the code used to build the above form. <form action="#" method="post" name="myform" id="myform"> Forms are defined within <form> </form> tags. The opening tag takes the following attributes: action indicates the name of the script file the form data should be sent to, eg action="sendmail.cgi" would send the form data to the script sendmail.cgi method indicates the method used to send the data - post as in this case means the browser sends the form data in the http request body (essentially, it is hidden from the user). The alternative - get - appends the data to the url requested from the server and is best reserved for small amounts of data. id is the name of the form which may be used by languages such as JavaScript to retrieve data from it. back to top Name: <input name="name" type="text" id="name" value="name" size="20" maxlength="30"> Single line text boxes are defined by <input> tags. In HTML these do not need closing tags. They take the following attributes: name gives the text box a unique name so that its contents may be accessed by a scripting language. type defines the type of input. For a text box it's value is text, other allowable values include password, checkbox, radio, submit, reset. id serves the same function as name. size indicates the size of the text box. maxlength indicates the maximum number of characters permitted. value may be used to define text appearing in the displayed box, eg to provide the user with a prompt or help. Password: <input name="password" type="password" id="password" size="15" maxlength="15"> An input type of password is similar to a text box except that the characters entered are not displayed on screen, rather they are shown as asterisks or blobs in order to protect the security of sensitive data (such as passwords). TIP As users do not receive visual confirmation of what the have typed it is common to add two password fields to sign-up forms to ensure that original password information is entered correctly (ie the data from the two fields are compared and sign-up is only completed where it agrees). Describe yourself:<br> <textarea name="textarea" cols="50" rows="5"> Please type your description in this box </textarea> Text boxes allowing multiple lines of input (eg for the message body of a contact form) are defined by <textarea> tags. As with all form elements the attributes include name, cols and rows define the width and height of the displayed box respectively. The text appearing between the <textarea> and </textarea> tags appears in the displayed box and can be used to provide additional help/prompts to the user. Age: under 20 <input type="radio" name="age" value="agegroup1"> 20-40 <input type="radio" name="age" value="agegroup2"> 41-60 <input type="radio" name="age" value="agegroup3"> over 60 <input type="radio" name="age" value="agegroup4"> Radio buttons are displayed as small, circular checkable buttons in the browser. They allow the user to select only one item from a group. They are created using an <input> tag with the type attribute set to radio. The input elements comprising a group of radio buttons all share the same name attribute value. Each radio button assigned its own value by way of the value attribute. back to top Interests: Sport <input name="interests" type="checkbox" value="sport"> Music <input name="interests" type="checkbox" value="music"> Movies <input name="interests" type="checkbox" value="movies"> Travel <input name="interests" type="checkbox" value="travel"> Reading <input name="interests" type="checkbox" value="reading" checked> Check boxes are displayed as small, square checkable buttons in the browser. They allow the user to select numerous items from a group. They are created using an <input> tag with the type attribute set to checkbox. The input elements comprising a group of check boxes all share the same name attribute value. Each check box is assigned its own value by way of the value attribute. Today's weather: <select name="weather" size="1"> <option value="fine">fine</option> <option value="cloudy">cloudy</option> <option value="rainy">rainy</option> <option value="snowy">snowy</option> </select> Section(s) to search: <select name="select" size="3" multiple> <option value="art">art</option> <option value="business">business</option> <option value="finance">finance</option> <option value="science">science</option> <option value="math">mathematics</option> <option value="history">history</option> <option value="supernatural">the supernatural</option> </select> Drop down lists allow users to select one or more items from a list. They are often used as menus to save space on a Web page, or to select items from long lists such as countries. Drop down lists are created using the <select> tags. The size attribute indicates the height of the drop down box, eg a size attribute value of 3 creates a box of sufficient height to display 3 items (additional items are accessed by means of scroll bars. The presence of the multiple attribute (no vale) within the select tag indicates more than one value may be selected (by control-clicking in Windows, or command-clicking in Macintosh). Individual items are defined within <option> tags. Items are given values by means of the value assigned to the value attribute. back to top <input type="submit" name="Submit" value="Submit my answers"> <input name="reset" type="reset" value="Start again"> An input tag having a type attribute set to submit creates a submit button, ie a button which sends the form to the script defined in the action attribute of the opening form tag. The value attribute determines the text to be displayed on the button. An input tag having a type attribute set to reset creates a reset button, ie a button which clears all entries made by the user allowing the form to be completed afresh. W3Schools HTML Tutorial W3C - Dave Raggett's Introduction to HTML NCSA - A Beginner's Guide to HTML HTML 4.01 Specification USENET newsgroups: alt.html comp.infosystems.www.authoring.site-design comp.infosystems.www.authoring.html alt.macromedia.dreamweaver macromedia.dreamweaver back to top
© web.twinisles.com Questions? Comments? Contact info@twinisles.com