Jump to content

Web Foundations/Forms

From Wikiversity
Internet word cloud
Internet word cloud

This lesson introduces forms.

Objectives and Skills

[edit | edit source]

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

  • Create a basic HTML form that accepts user input.

Readings

[edit | edit source]
  1. Wikipedia: HTML form
  2. Wikibooks: HyperText Markup Language/Forms

Multimedia

[edit | edit source]

Examples

[edit | edit source]
<form>
<!-- form content -->
</form>

Text Input

[edit | edit source]

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

[edit | edit source]

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

<textarea name="Comment" rows="5" cols="30">Default</textarea>
[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]

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

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

Reset Button

[edit | edit source]

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

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

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

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

Action

[edit | edit source]

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

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

Get Method

[edit | edit source]

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

[edit | edit source]

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

[edit | edit source]
  1. Complete the tutorial TutorialsPoint: HTML Forms

Key Terms

[edit | edit source]
client-side script
Common Gateway Interface (CGI)
query string
server-side script

See Also

[edit | edit source]

References

[edit | edit source]