Web Foundations/Forms

Internet word cloud

This lesson introduces forms.

Objectives and Skills

Objectives and skills for this lesson include:

• Create a basic HTML form that accepts user input.

Readings

1. Wikipedia: HTML form
2. Wikibooks: HyperText Markup Language/Forms

Examples

Form

<form>
<!-- form content -->
</form>

Text Input

A simple text box that allows input of a single line of text.

<input type="text" name="Name" value="Default">
<input type="text" name="Name" size="20" maxlength="30" value="Full Name">

Multiline Text Input

Allows for multiple rows of data to be shown and entered.

<textarea name="Comment" rows="5" cols="30">Default</textarea>

Dropdown List

Displays a list of items a user can select from.

<select name="list">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>

List Box

Allows the user to select one or more items from a list contained within a static, multiple line text box.

<select name="list" multiple="multiple">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
</select>

Option Button

Allows the user to choose only one of a predefined set of mutually exclusive options.

<input type="radio" name="option" value="option1">Option 1<br>
<input type="radio" name="option" value="option2">Option 2<br>

Check Box

Permits the user to make a choice between one of two possible mutually exclusive options.

<input type="checkbox" name="option" value="Send email" checked="checked">

Submit Button

A button that tells the browser to take action on the form.

<input type="submit" value="Submit">

Reset Button

A button that tells the browser to restore input fields to their initial values.

<input type="reset" value="Reset">

File

A file select control for uploading a file.

<input type="file" name="upload">

Action

Specifies the target script or file that will process the submitted form.

<form action="process.cgi">
<!-- form content -->
</form>

Get Method

Send form data as a query string with name/value pairs in the request URL.

<form action="url" method="get">
<!-- form content -->
</form>

Post Method

Send form data as a query string with name/value pairs in the HTTP request body.

<form action="url" method="post">
<!-- form content -->
</form>

Activities

1. Complete the tutorial TutorialsPoint: HTML Forms

Key Terms

client-side script

Common Gateway Interface (CGI)

query string

server-side script

See Also

• W3Schools: HTML Forms
• Mozilla: HTML forms

References

← Tables

Web Foundations

Multimedia →