HTML Tutorial Lesson 17: Setting up Forms Part 3

TwitterShare/Bookmark

[Lesson 16]<<[Contents]>>[Lesson 18]

We have learned how to set up various types of forms in HTML in two previous lessons. In this lesson, we shall examine more complex forms and learn how to set them up. The complex forms include the use of elements such as textrarea, radio and checkbox to create a multiline text box, radio buttons and check boxes on the web page.

17.1 Textarea

The Textarea element creates a multiline text box into a form that allows the user to enter multiline text. The number of  lines is specified with the rows attribute and the number of columns is specified with the cols attribute.

The following example is a form with text area 10 lines and 40 characters wide. The HTML code is

<form  action=”/index.php/contact-us/” method=”post”>

<label>Please provide your feedback in the box below:</label>

<textarea cols=”40″ name=”feedback” rows=”10″></textarea>

<input type=”Submit” value=”Submit Your Feedback” />

<input type=”reset” value=”Clear Entries” />

</form>

The resulting form is shown below:




17.2 Radio Button

Radio buttons are object on a web page that allows the user to select only one option. The value of the type attribute is radio , the name attribute is the value of the option the user selects, the value attribute is the value for the selected item and the checked attribute indicates the default item selected when a web page is loaded. A sample HTML code for creating radio buttons is shown below:

<form  action=”/index.php/contact-us/” method=”post”>

<p> Please select one T-shirt size below:</p>

<input type=”radio” value=”S”  checked=”checked”> S

<input type=”radio” value=”M” >M

<input type=”radio” value=”L” >L

<input type=”radio” value=”XL” >XL

<input type=”radio” value=”XXL” >XXL

</form>

The Output

Please select one T-shirt size below:

S
M
L
XL
XXL

17.3  The Checkbox

Unlike the radio buttons, checkboxes allow the user to select more than one option from a given list of items. The value of the type attribute is checkbox , the name attribute is the value of the option the user selects, the value attribute is the value for the selected item and the checked attribute indicates the default items selected when a web page is loaded. A sample HTML code for creating checkboxes is shown below:

<p>Please select the fruits you wish to order:</p>

<form  action=”/index.php/contact-us/” method=”post”>
<input checked=”checked” name=”fruits” type=”checkbox” value=”apple” /> Apple
<input name=”fruits” type=”checkbox” value=”orange” />Orange
<input name=”fruits” type=”checkbox” value=”banana” />Banana
<input name=”fruits” type=”checkbox” value=”grape” />Grape
<input type=”Submit” value=”Add to Cart” />
</form>

The output

Please select the fruits you wish to order:

Apple
Orange
Banana
Grape

[Lesson 16]<<[Contents]>>[Lesson 18]