DRILL 10: FORMS

General Instruction for Drill 10.

Inserting forms and its components

1. Identify
the type of form controls you’re going to insert in your HTML page.
2. Use the<form>…</form> element to create a form.
3. Use thefollowing elements in inserting form controls:
1. <input /> - use to define input types like text, password, checkbox, radio, submit, reset, file,
hidden, image, and button.
2. <select>…</select> - inserts a selection control for the user to select one or more options.
3. <textarea>…</textarea> - inserts a multi-line text input area for use in a form.
4. <button>…</button> - inserts a push button for use in a form or to start a script.

Note:
Required Attribute of a form
Attribute Values Description
action URL The URL of the form handler, typically a script file or Java servlet.

Optional Attributes of a form

Attribute Values Description
Specifies the method of sending the form data to the form handler.

method="get" sends the form data in the URL; for instance,

"download.asp?file=webeditor&country=US". The form data may not contain non-ASCII
characters, and the amount of form data that can be handled is limited by the maximum
URL length supported by the browser and the server. If the form data might exceed 100
get characters, you should use "post".
method
post

method="post" sends the form data as an HTTP POST request. POST does not have the
character encoding and length restrictions imposed by GET, but most browsers are unable
to bookmark POST requests.

The default method is "get".

Specifies the content type used in submitting the form. The default value is "application/x-
www-form-urlencoded". This content type results in name/value pairs sent to the server as
name1=value1&name2=value2..., with space characters replaced by "+" and reserved
characters (like "#") replaced by "%HH" where HH is the ASCII code of the character in
hexadecimal. Line breaks are encoded as "%0D%0A" (a carriage return followed by a line
enctype ContentType feed).

Authors should generally only use a different enctype when the form includes a type=file
input element, in which case the enctype should be "multipart/form-data" and the
method must be "post".
Specifies a list of character encodings that are accepted by the form handler. The value
accept- consists of a list of charsets separated by commas and/or spaces. The default value is
CharSets
charset "unknown" and is usually considered to be the character encoding of the document
containing the form.
Specifies the frame (of a frameset) the form response should be displayed in. If no frame
target FrameTarget
with such a name exists, the response is displayed in a new window.
Element-Specific Events of a form
Event Trigger
onsubmit when the form is submitted
onreset when the form is reset

• A mailto URL (such as "mailto:[email protected]") is allowed as the value of action, but

this is not supported by all browsers. Non-supporting browsers such as Internet Explorer 3.x typically will
open a blank e-mail message when the user submits a mailto form. Even on supporting browsers, mailto
forms are troublesome in that they fail to provide feedback to the user after the form submission.

Example of the form element

<form action="form_handler.asp" method="get">
First name:
<input type="text" name="fname" />
<br />
Last name:
<input type="text" name="lname" />
<br />
<input type="submit" value="Submit" />
</form>
This simple form takes a first and last name entered by the user and sends the data to "form_handler.asp" using the
GET method.
Optional Attributes of the input element
Attribute Values Description
text
password
checkbox Specifies the type of form control to create. The default value is "text". While
radio not a required attribute, type should be specified for maximum browser
submit
type compatibility.
reset
file
See the table below for descriptions of the control types.
hidden
image
button
Specifies the name in the name/value pair sent to the form handler.
name CDATA Required except for reset and submit buttons.
When type is "text", "hidden", or "password": Specifies the default value of
the input field.

When type is "checkbox" or "radio": Specifies the value of the control when
checked. Value must be specified for these controls.

value CDATA When type is "submit", "reset", or "button": Specifies the button label.

When type is "image": Specifies alternate text for some image-disabled

browsers.

When type is "file": Specifies the default filename. Browsers typically ignore
this as a security precaution.
checked [none] Specifies that a radio button or checkbox control is initially checked.
size Number Specifies the size, in number of characters, of a text or password field.
Specifies the maximum number of characters that can be entered in a text
maxlength Number
or password field.
src URL The URL of an image file (only used when type="image").
alt CDATA Specifies alternate text when type="image".
usemap URL The URL of a map definition to use when type="image". Poorly supported.
top
Specifies how to align an image button with respect to surrounding text.
middle
"Top", "middle", and "bottom" position the image vertically with respect to
align bottom
the current line (of text, usually). "Left" and "right" specify that the image is
left
placed at the left or right margin, with other content flowing around it.
right
Disables the input control. Disabled controls cannot receive focus, and their
disabled [none] values are not submitted with the form. Cannot be used with
type="hidden".
Prevents users from changing the value of an input control. The value is still
readonly [none]
submitted with the form. Only used with type="text".
A comma-separated list of media types to be accepted when type="file".
accept ContentTypes Generally ignored by browsers.
Specifies a single character as a shortcut key to give focus to the input
accesskey Character
control. Not applicable when type="hidden".
 Specifies the tabbing order of the control. The lower the number, the earlier
the control is in the tabbing sequence of the document. If tabindex=0 or is
tabindex Number not defined, the control comes after any elements with a positive tabindex.
Not applicable when type="hidden".

Examples of the input element

<center>File Submission Form</center>
<form>
Your name: <input type="text" name="username" /><br />
Your password: <input type="password" name="password" /><br />
File: <input type="file" name="filespec" /><br />
<fieldset>
File type:<br />
<input type="radio" name="filetype" value="program" checked/>
Program<br />
<input type="radio" name="filetype" value="image" />Image<br />
<input type="radio" name="filetype" value="other" />Other<br />
</fieldset>
<input type="checkbox" name="shared" value="yes" />Share this file<br />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
OUTPUT:
Optional Attributes of the select element
Attribute Values Description
name CDATA Specifies the name sent to the form handler with the value of the selected option.
Allows the user to select more than one option (by holding down the 'Ctrl' key while clicking each
multiple [none] desired option). When this attribute is present, browsers will render the selection control as a
box showing multiple options rather than the default drop-down menu.
Specifies the number of options visible at any time. If not specified, the form control is rendered
as a drop-down menu unless the multiple attribute is present. If size is specified, the form
size Number control will be rendered as a box showing the specified number of options. If the number of
available options exceeds this value, the form control will display a scrollbar to allow the user to
see all the available options.
Specifies that the selection control is unavailable to the user. A disabled selection control cannot
disabled [none]
receive focus, and the values of its options are never sent to the form handler.
Specifies the tabbing order of the element. The lower the number, the earlier the element is in
tabindex Number the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes
after any elements with a positive tabindex.

Element-Specific Events of the select element

Event Trigger
onfocus when the element receives focus
onblur when the element loses focus
onchange when the element loses focus and its value has changed since it received focus

• If the multiple attribute is present but size is not specified, some browsers will auto-size the selection control
large enough to display all the available options at once. To avoid an excessively tall selection box, be sure to
specify size.

Examples of the select element

Example 1
<p style="margin-left:0">Operating System:</p>
<select name="os">
<option>Windows XP</option>
<option>Windows 2000</option>
<option>Windows Me</option>
<option>Windows 98</option>
<option>Windows 95</option>
</select>
A simple selection control rendered as a drop-down menu.
Here's how the HTML above might render in a browser:
 Example 2
<p>Operating System:</p>
<select name="os" size="5" multiple>
<optgroup label="Microsoft">
<option>Windows XP</option>
<option>Windows 2000</option>
<option>Windows NT</option>
<option>Windows Me</option>
<option>Windows 98</option>
<option>Windows 95</option>
</optgroup>
<optgroup label="Macintosh">
<option>OS X</option>
<option>OS 9</option>
</optgroup>
</select>
A selection group using optgroup elements and allowing multiple selections.

Here's how the HTML above might render in a browser:

Required Attributes of the textarea element

Attribute Values Description
Specifies the number of rows visible in the textarea at any time. This does not limit the
rows Number
amount of text that can be inputted, since the textarea can be scrolled.
Specifies the width of the textarea in terms of columns of monospaced characters.
cols Number
Paragraphs that exceed this width are word-wrapped to the next line.

Optional Attributes of the textarea element

Attribute Values Description
name CDATA Specifies the textarea's name for the name/value pair sent to the form handler.
Disables the textarea. A disabled textarea cannot receive focus, and its name and value are not
disabled [none]
submitted with the form.
Prevents users from editing the contents of the textarea. The textarea's value is still submitted
readonly [none]
with the form.
accesskey Character Specifies a single character as a shortcut key for the element.
Specifies the tabbing order of the element. The lower the number, the earlier the element is in
tabindex Number the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes
after any elements with a positive tabindex.

Element-Specific Events of the textarea element

Event Trigger
onfocus when the textarea receives focus
onblur when the textarea loses focus
onselect when text in the textarea is selected
onchange when the textarea loses focus and its value has changed since it received focus
Example of the textarea element
<textarea rows="3" cols="20">
Please enter your comments here.
</textarea>

Text inside the textarea provides the textarea's default value.

Here's how the HTML above might render in a browser:

• Many browsers limit the amount of text that can be

entered in a textarea to 32 or 64 kilobytes.

Optional Attributes of the button element

Attribute Values Description
name CDATA The button's name (for use by a form handler).
value CDATA The button's value (for use by a form handler).
submit
type reset Specifies the button type; the default is "submit".
button
disabled [none] Disables the button.
accesskey Character Specifies a single character as a shortcut key for pushing the button.
Specifies the tabbing order of the element. The lower the number, the earlier the element is in
tabindex Number the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes
after any elements with a positive tabindex.

Element-Specific Events of the button element

Event Trigger
onfocus when the button receives focus
onblur when the button loses focus

Examples of the button element

Example 1
<button name="submit" value="modify">
<b><i>Modify Info</i></b>
</button>
Unlike buttons created using the input element, button elements can enclose other HTML tags.

Example 2
<button type="button" onclick="myscript()">
<img src="mybutton.gif" />
</button>
This button uses a graphical label.
Drill 10.1: FORMS in NO Arrangement

Text Field

Radio Button

Select Menu

Text Field

Select Menu
Textarea

Text Field

Password

Submit Button
Reset Button

Fieldset
Instruction for Drill 10
1. Create a New HTML page and name it Drill10_FORMS_Yourname.
2. Perform the Drill as shown below.
3. Save the File and open it in any WEB BROWSER (i.e Internet Explorer, Mozilla Firefox, Google Chrome,
Opera, Safari, and etc.) available in computer system.
NOTE: As you save your HTML document, don’t forget to refresh or reload your Web Browser.

EVALUATION CITERIA
Organization and Clarity (code & design) 15 pts
Conformity to the Requirements 20pts
Accuracy and Reliability 15pts
TOTAL 50pts

Checkbox

File