Web Foundations/Forms

Internet word cloud

This lesson introduces forms.

Objectives and Skills

Objectives and skills for this lesson include:^[1]^[2]

Create a basic HTML form that accepts user input.

Readings

Multimedia

Examples

Form

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

Text Input

A simple text box that allows input of a single line of text.^[3]

<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.^[4]

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

Dropdown List

Displays a list of items a user can select from.^[5]

<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.^[6]

<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.^[7]

<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.^[8]

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

Submit Button

A button that tells the browser to take action on the form.^[9]

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

Reset Button

A button that tells the browser to restore input fields to their initial values.^[10]

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

File

A file select control for uploading a file.^[11]

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

Action

Specifies the target script or file that will process the submitted form.^[12]

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

Get Method

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

<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.^[14]

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

Activities

Complete the tutorial TutorialsPoint: HTML Forms

Key Terms

client-side script
Common Gateway Interface (CGI)
query string
server-side script