Web Foundations/Forms

From Wikiversity
Jump to navigation Jump to search
Internet word cloud

This lesson introduces forms.

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>

Dropdown List[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]