COM271, Week 7

HTML Form Elements

Syllabus | Table of Pages | Assignments | References and Useful Links

The examples on this page illustrate html form elements and a few of their attributes. If you want to see how the forms are handled by server-side programming, using PHP, submit the forms. We'll take another look at this late in the semester.

Text Box

Enter your name:

Here is the code to send text to another server page:
<form method="get" action="http://www.com.uri.edu/com372/common/PHP/examples_com271 /text_box.php">
<p>Enter your name: <input type="text" name="first_name" size="25"></p>
<input type="submit" value="Submit Your Name"%gt;
</form>

Whatever character string (letters, numbers, symbols) is typed in the text box will be assigned to the name "first_name."

Select (Drop-down) Box

Select Color

Choose a color: Red Green Yellow

The Form: The form contains an html <select> element, with three <option> elements. Notice the use of <fieldset> to draw a box and <legend> to label it.

<fieldset>
<legend>Select Color</legend>
<p>Choose a color: <select name="color" >
<option value="r">Red</option>
<option value="g">Green</option>
<option value="y">Yellow</option>
</select>
<input type="submit" value="Select a Color">
</form>

Only one option will be selected here. Its value will be paired with the name "color."

Radio Buttons

Select Color

Choose a color:
Red:
Green:
Yellow:

The Form: Similar to the, here we have options to choose, this time using radio buttons

<p>Choose a color:<br />
Red: <input type="radio" name="color" value="r"><br />
Green: <input type="radio" name="color" value="g"><br />
Yellow: <input type="radio" name="color" value="y">

The radio buttons share a common name. Only one button can be selected.

Check Boxes

Select as Many Desserts as You Like!

Choose Desserts:
Cake:
Pie:
Ice-cream:

The check boxes are individual, with unique names and values. You can check or uncheck any of them. Cake is pre-selected (checked).

Cake: <input type="checkbox" name="cake" value="1" checked="checked"><br />
Pie: <input type="checkbox" name="pie" value="yes"><br />
Ice-cream: <input type="checkbox" name="ice_cream" value="true"><br />

Text Area

Tell me your life story in 25 words or less:

<textarea cols="60" rows="4" name="life_story" maxlength="5000"></textarea>

Type into the box. If you go beyond the 4 rows that show, the box will scroll.