Forms for HTML

This lecture notes is based on Prof Doreen De Leon's lectures.

Reading

Sebesta Chapter 2.10

Basics

The <form> Tag

The action attribute

The method attribute

The enctype attribute

Example
<form action="">
<p>
<b>Name</b>:
<input type="text" name="myname" size="25"/><br/><br/>
<input type="submit" value="Submit my name"/>
</p>
</form>

Name:



<h2>Google</h2>
<form action="http://www.google.com/search" method="get">
<p>
<!-- h1=en English -->
<input type="hidden" name="hl" value="en"/>
<input type="text" name="q" size="25"/>
<input type="submit" value="Google Search"/>
</p>
</form>

Google

When you type in "Charles" and press Google Search, the URL will be http://www.google.com/search?hl=en&q=Charles. When you type in "Charles Li" and press Google Search, the URL will be http://www.google.com/search?hl=en&q=Charles+Li.

The <input />Tag

Text Fields in Forms

Four types: conventional, masked for security, a field that names a file to be transmitted, and a multi-line text field.

Checkboxes

Radio Buttons

Action Buttons

Submission buttons

Reset buttons

Custom image buttons

Hidden Fields

Multiline Text Areas — the <textarea> Tag

rows, cols attributes

Example:

<textarea name="comments" rows="8" cols="50">
Please write your comments here.
</textarea>

appears as:

Multiple Choice Elements

The <select> tag

The <option> tag

Example

<p> Choose your vegetable (one) </p>
<p>
<select name="veggie">
<option>carrots</option>
<option>broccoli</option>
<option>squash</option>
<option>spinach</option>
</select>
</p>
appears as:

Choose your vegetable (one)


<select name="veggie" size="2">
<option>carrots</option>
<option>broccoli</option>
<option>squash</option>
<option>spinach</option>
</select>