This lesson introduces forms.

Internet word cloud
Internet word cloud

Objectives and Skills

edit

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

  • Create a basic HTML form that accepts user input.

Readings

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

Multimedia

edit

Examples

edit

Form

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

Text Input

edit

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

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

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

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

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

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

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

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

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

Reset Button

edit

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

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

File

edit

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

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

Action

edit

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

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

Get Method

edit

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

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
  1. Complete the tutorial TutorialsPoint: HTML Forms

Key Terms

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

See Also

edit

References

edit