Web Foundations/Forms
This lesson introduces forms.
Objectives and Skills
editObjectives and skills for this lesson include:[1][2]
- Create a basic HTML form that accepts user input.
Readings
editMultimedia
editExamples
editForm
edit<form>
<!-- form content -->
</form>
Text Input
editA 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
editAllows for multiple rows of data to be shown and entered.[4]
<textarea name="Comment" rows="5" cols="30">Default</textarea>
Dropdown List
editDisplays 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
editAllows 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
editAllows 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
editPermits 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
editA button that tells the browser to take action on the form.[9]
<input type="submit" value="Submit">
Reset Button
editA button that tells the browser to restore input fields to their initial values.[10]
<input type="reset" value="Reset">
File
editA file select control for uploading a file.[11]
<input type="file" name="upload">
Action
editSpecifies the target script or file that will process the submitted form.[12]
<form action="process.cgi">
<!-- form content -->
</form>
Get Method
editSend 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
editSend 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- Complete the tutorial TutorialsPoint: HTML Forms
Key Terms
edit- client-side script
- Common Gateway Interface (CGI)
- query string
- server-side script
See Also
editReferences
edit- ↑ CIW: Site Development Associate Exam Objectives
- ↑ CIW: Site Development Associate Course Description
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: List box
- ↑ Wikipedia: Radio button
- ↑ Wikipedia: Checkbox
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Form (HTML)
- ↑ Wikipedia: Query string
- ↑ Wikipedia: Query string