Week 3

Learn How to Create HTML Document Form

Forms are used to collect user input.

The main input elements are text box, password box, radio buttons and checked boxes.

1. Text box
 <input type="text" name="myname" size=30 maxlength=40>

2. Password Box
<input type="password" name="pwd" size=15 maxlength=15> 

3. Radio Buttons
 <p> Your favourite brand: <br>

<input type="radio" name="device" value="apple"> Apple <br>
<input type="radio" name="device" value="nokia"> Nokia <br>
<input type="radio" name="device" value="samsung"> Samsung <br> 

</p>

4. Checked Boxes
<p> What devices have you used? <br>
 
<input type="checkbox" name="device" value="apple"> Apple <br>
<input type="checkbox" name="device" value="nokia"> Nokia <br>
<input type="checkbox" name="device" value="samsung"> Samsung <br>
 
</p>

5. Select
<select name="cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
</select>

6. Multiples Selections 
<select multiple name="cars">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
</select>

7. Text Area
<textarea name="comments" rows=5 cols=65></textarea>

8.Submit and Reset
<input type="submit" value="Register">
<input type="reset" value="Clear">

Lab Session 

We were asked to create a HTML form based on the example given by our lecturer. This form is created by making a table first followed by adding the intended input elements.

This is the form created by me based on the given paper.