HTML Forms

This is the general format for creating a form:

<form>
form element definitions
form element definitions
</form>

What are the different form elements?

;
NAME PICTURE Tag and Attribute
Text Box <input type=text>
Generic Button <input type=button>
Reset Button <input type=reset>
Check Box <input type=checkbox>
Radio button <input type=radio>
Text Area <textarea rows=2 cols=10> </textarea>
Pull Down Menu <select>
<option>
< option>
< option>
</select>

Note: The first four form elements are created by using the <input> tag with the respective
type attribute. The pull down menu and text area form elements are not created with the
<input> tag but use the <select> and <textarea> tag.

How to put text in/on your form element.

The textbox, generic button, reset button, check box and radio button all have a value attribute.
Let's look at how the value attribute works for each one.

Textbox:
Code:  <input type=text value="Here is some text" >
Result: 
You can see the text box displays the text that was assigned to the value attribute and the
text box is sized accordingly.
Generic Button
Code:  <input type=button value="Press Here">
Result: 
Here the top of the button shows the text:Press Here and the button is sized accordingly.
Reset Button

You can leave out the value attribute when you code the reset button and it automatically
will display the word Reset. It doesn't hurt if you decide to use it or even change the name that is
displayed - it won't change the button's action. The action of the reset button is predefined: it will
clear the user-entered data from the form elements.
Code:   <input type=reset value="Click to clear form">
Result: 
Check Box and Radio Button

Both of these have a value attribute but their graphical representation is too small to display any text
strings. So, the value attribute can be used to store "hidden" data from the user. More on this later.


Text Area

The Text Area form element is a little different. It is created by using the container tag <textarea>
It also requires a specification for the number of rows and columns. The initial display
of text in a text area comes from the text between the start and end textarea tags.
Code:  <textarea rows=3 cols=30> Here is the displayed text</textarea>
Result: 
Pull Down Menu
The pull-down menu is created by using the <select> container tag. Within the
select tags a new tag is embedded called the <option> tag. The text immediately to the
right of each one of the option tags will be displayed. Each option tag creates a new
choice on the pulldown menu. An example can best demonstrate:
Code:
<select>
<option> Choice1
<option> Choice2
<option> Choice3
</select>

 Result:

How to layout your form elements and add titles.

Which form elements you use is dependent upon the needs of your interface and what type
of information you want to display. For the most part ordinary text is used in the HTML document
to add titles to your form elements. Here is a sampling:
Please enter your first name:

Send us your comments:

Choose your favorite colors:
Blue GreenRed 

Please choose yes or no: yes no

Choose your state:

Press Here:

Reset the form:

Here is partial html code for the above example:

You can use a borderless table to better organize your form elements:
Enter your name  Sex:MaleFemale
Press Here   State:
Here is partial html code for the above example: