HTML Forms

Forms can be used to submit information, such as registration details or a message via a contact form.

<form>

The 'form' tag, together with its corresponding closing tag, encompasses all elements of a form. The example below is a basic contact form, which contains two text boxes for first and last name, a drop-down box for selecting the title, radio buttons for gender, male or female, a further text box for the e-mail address, a check box for mailing list sign up and a text area for the message. As with all forms, it is finished off with a button for submission purposes.

The 'action' attribute of the 'form' tag specifies what happens when the form is submitted, in this case it specifies the destination web page 'send.php'. The 'method' attribute can either be set to 'post' or 'get'. The 'get' method is best used where the form does not contain any sensitive data because when it is submitted the data in the form forms part of the address. The 'post' method is best used for things like the contact form below, as the data is not passed as part of the address and is therefore more secure.

Further Reading

<input>

The 'input' tag is used to create the text boxes for first name, last name and e-mail address, as well as for the gender radio buttons, mailing list sign up check box and the submit button. The key attribute that defines what the 'input' tag is used for is the 'type' attribute. This is set to 'text' for the text boxes, 'radio' for the radio buttons, 'checkbox' for the check box and 'submit' for the submit button.

The 'name' attribute is used for identification purposes and is particularly important for the male and female radio buttons because by giving them the same name it groups them together. This is also the case with check boxes, however, in this example there is only one. The 'size' and 'maxlength' attributes specify the visible width and maximum number of characters allowed respectively. Finally, the 'value' attribute can be used to pre-populate a value into the item concerned. Exception to this are with the check box, where the 'value' attribute specifies the value if it is checked, and the submit button, where it specifies the text that appears on the button.

Further Reading

<select> and <option>

These tags are used to create a drop-down list, which in the example below is for 'Title'. The opening and closing 'select' tags are used to define the list, with the option tags defining each option in the list. The 'name' attribute is again used for identification purposes. The 'value' attribute in the 'option' tag is what gets submitted, with the value between the opening and closing 'option' tags being for display purposes only.

Further Reading

<textarea>

The 'textarea' tag is used where input of more than one line is required. Here the 'rows' and 'cols' attributes are used to define its size.

Further Reading

<form action="send.php" method="post">
   <p>First name: <input type="text" name="firstname" size="30" maxlength="50" value=""></p>
   <p>Last name: <input type="text" name="lastname" size="30" maxlength="50" value=""></p>
   <p>Title: 
      <select name="title">
         <option value="Mr">Mr</option>
         <option value="Mrs">Mrs</option>
         <option value="Miss">Miss</option>
         <option value="Ms">Ms</option>
         <option value="Dr">Dr</option>
      </select>
   </p>
   <p>Gender: 
      <input type="radio" name="gender" value="male" checked>Male 
      <input type="radio" name="gender" value="female">Female
   </p>
   <p>E-mail: <input type="text" name="email" size="30" maxlength="50" value=""></p>
   <p>Sign up to mailing list: <input type="checkbox" name="maillist" value="Yes"></p>
   <p>Message:</p>
   <p><textarea name="message" rows="10" cols="30"></textarea></p>
   <p><input type="submit" value="Send"></p>
</form>

Other Form Tags