HTML <form> tagS2C Home   « HTML <form> tag

Definition

The <form> tag is used to define a form whose user input information is sent to the URL specified in the required action attribute.

Example


<form action="../../htmlintermediate/simpleform.html" method="get">
  <p>Name:<input type="text" name="name"></p>
  <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pie" checked="checked" value="chicken"> Chicken</p>
  <p><input type="radio" name="pie" value="fish"> Fish</p>
  <p><input type="radio" name="pie" value="shepherds"> Shepherds</p>
  <p>Other stuff you wanna tell us about pies:</p>
  <p><textarea rows="3" cols="30" name="comments"></textarea></p>
  <p>Submit your information:</p>
  <p><input type="submit" value="Submit"></p>
</form>

Name:

Which pie do you prefer?:

Chicken

Fish

Shepherds

Other stuff you wanna tell us about pies:

Submit your information:

Attributes

The following attributes can be used with the <form> tag.


<form> Specific Attributes
Attribute Value Description Example
accept-charsetcharacter_setA space-separated list of one or more character encodings that the server accepts on form submission. Default UNKNOWN 

<form accept-charset="utf-8">Form contents</form>
actionurlSpecifies the url of a file that will process the control on submission. 

<form action="url">Form contents</form>
autocomplete empty string or autocompleteSpecifies whether the form should complete the form contents based on user history. 

<form autocomplete>Form contents</form>
<form autocomplete="autocomplete">Form contents</form>
enctypeapplication/x-www-form-urlencoded (default)

multipart/form-data

text/plain		Specifies how form-data should be encoded before sending it to a server. 

<form enctype="text/plain">Form contents</form>
methodget

post		Specifies the HTTP method to be used on control submission. 

<form method="get">Form contents</form>
namenameSpecifies a name for the button. 

<form name="aName">Form contents</form>
novalidateempty string or novalidateSpecifies that no validation is to be done on control submission. 

<form novalidate>Form contents</form>
<form novalidate="novalidate">Form contents</form>
relSpecifies the relationship between a linked resource and the current document. 

<a href="../images/apple.jpg"
   rel="nofollow">Apple</a>
externalReferenced document is not part of the same site as current document.
helpLink to a help document for current context.
licenseReferenced document provides the copyright license terms for current document.
nextIndicates that the document is part of a sequence, and that the link to the referenced document is next.
nofollowIndicates that the link is not endorsed by the original author or publisher of the page.
noopenerCreates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with.
noreferrerIndicates that no referrer information is to be leaked when following the link.
openerCreates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not anauxiliary browsing context.
prevIndicates that the document is part of a sequence, and that the link to the referenced document is previous.
searchSpecifies that referenced document provides an interface specifically for searching the document and its related resources.
targetSpecifies where to display the response after control submission. 

<form target="_self">Form contents</form>
_blankOpens linked document in new window or tab.
_parentOpens linked document in parent frame.
_self (default)Opens linked document in same frame as it was clicked in.
_topOpens linked document in window body
framenameOpens the linked document in a named framename.
<form> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<form class="name">Form contents</form>
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<form id="name">Form contents</form>
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<form style="color:red;">Form contents</form>
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<form title="Content info">Form contents</form>
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<form accesskey="a">Form contents</form>
tabindexSpecifies a tab order for the element. 

<form tabindex="1">Form contents</form>
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<form dir="ltr">Form contents</form>
<!-- The text will flow from right to left -->
<form dir="rtl">Form contents</form>
langSpecifies a language code for the content of the element. 

<form lang="en">Form contents</form>
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<form spellcheck="true">Form contents</form>
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<form translate="no">Form contents</form>
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<form contenteditable="true">Form contents</form>
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<form draggable="true">Form contents</form>
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<form hidden>Form contents</form> 
<form hidden="hidden">Form contents</form>
<form> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<form oncopy="go()">Form contents</form>
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<form oncut="go()">Form contents</form>
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<form onpaste="go()">Form contents</form>
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<form ondrag="go()">Form contents</form>
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<form ondragend="go()">Form contents</form>
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<form ondragenter="go()">Form contents</form>
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<form ondragleave="go()">Form contents</form>
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<form ondragover="go()">Form contents</form>
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<form ondragstart="go()">Form contents</form>
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<form ondrop="go()">Form contents</form>
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<form onblur="go()">Form contents</form>
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<form onchange="go()">Form contents</form>
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<form oncontextmenu="go()">Form contents</form>
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<form onfocus="go()">Form contents</form>
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<form oninput="go()">Form contents</form>
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<form oninvalid="go()">Form contents</form>
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<form onreset="go()">Form contents</form>
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<form onselect="go()">Form contents</form>
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<form onsubmit="go()">Form contents</form>
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<form onkeydown="go()">Form contents</form>
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<form onkeypress="go()">Form contents</form>
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<form onkeyup="go()">Form contents</form>
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<form onabort="go()">Form contents</form>
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<form oncanplay="go()">Form contents</form>
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<form oncanplaythrough="go()">Form contents</form>
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<form oncuechange="go()">Form contents</form>
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<form ondurationchange="go()">Form contents</form>
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<form onemptied="go()">Form contents</form>
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<form onended="go()">Form contents</form>
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<form onloadeddata="go()">Form contents</form>
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<form onloadedmetadata="go()">Form contents</form>
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<form onloadstart="go()">Form contents</form>
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<form onpause="go()">Form contents</form>
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<form onplay="go()">Form contents</form>
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<form onplaying="go()">Form contents</form>
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<form onprogress="go()">Form contents</form>
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<form onratechange="go()">Form contents</form>
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<form onseeked="go()">Form contents</form>
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<form onseeking="go()">Form contents</form>
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<form onstalled="go()">Form contents</form>
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<form onsuspend="go()">Form contents</form>
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<form ontimeupdate="go()">Form contents</form>
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<form onvolumechange="go()">Form contents</form>
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<form onwaiting="go()">Form contents</form>
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<form onclick="go()">Form contents</form>
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<form ondblclick="go()">Form contents</form>
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<form onmousedown="go()">Form contents</form>
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<form onmousemove="go()">Form contents</form>
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<form onmouseout="go()">Form contents</form>
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<form onmouseover="go()">Form contents</form>
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<form onmouseup="go()">Form contents</form>
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<form onwheel="go()">Form contents</form>
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<form onscroll="go()">Form contents</form>
Window - NONE