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="html4intermediate/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>

Required Attributes

action - specifies the URL location to send submitted form data to.


<form action="html4intermediate/simpleform.html">Some text here</form>  

Optional Attributes

accept - limited browser support - use the server to validate file uploads.

target - this attribute is deprecated.

accept-charset - limited browser support - specifies allowable character sets.


<form accept-charset="UTF-8"></form>  

enctype - specifies character encryption prior to submission.


<!-- characters encryption before submission (default) -->
<form action="html4intermediate/simpleform.html" 
      enctype="application/x-www-form-urlencoded"></form>  
   
<!-- no character encryption -->
<form action="html4intermediate/simpleform.html" 
      enctype="multipart/form-data"></form>  
   
<!-- spaces converted to "+" symbol -->
<form action="html4intermediate/simpleform.html" 
      enctype="text/plain"></form>  

method - specifies the URL location to send submitted form data to.


<!-- user data tagged to end of URL (default) -->
<form action="html4intermediate/simpleform.html" method="get"></form>  
   
<!-- user data hidden -->
<form action="html4intermediate/simpleform.html" method="post"></form>  

name - specify a name for the form.


<form name="theNameOfTheForm"></form>  

Common Attributes

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<form class="classname"></form>

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<form id="idname"></form>

style - specifies an inline style for the element allowing you to apply the style to the content.


<form style="color:red;text-align:left"></form>

title - specifies extra information about the content.


<form title="information about the content"></form>

Language Attributes

dir - specifies the directional flow of the content.


<!-- The text will flow from left to right -->
<form dir="ltr"></form>

<!-- The text will flow from right to left -->
<form dir="rtl"></form>

lang - specifies a language code for the content of the element.


<form lang="en"></form>

xml:lang - specifies a language code for the content of the element in XHTML documents.


<form xml:lang="fr"></form>

Document Event Attributes

NONE

Form Event Attributes

onreset - The JavaScript code to be run when a form is reset.


<!-- Executes the go() function -->
<form onreset="go()"></form>

onsubmit - The JavaScript code to be run when a form is submitted.


<!-- Executes the go() function -->
<form onsubmit="go()"></form>

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed.


<!-- Executes the go() function -->
<form onkeydown="go()"></form>

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<form onkeypress="go()"></form>

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<form onkeyup="go()"></form>

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<form onclick="go()"></form>

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<form ondblclick="go()"></form>

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<form onmousedown="go()"></form>

onmousemove - The JavaScript code to be run when the mouse button is moved.


<!-- Executes the go() function -->
<form onmousemove="go()"></form>

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<form onmouseout="go()"></form>

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<form onmouseover="go()"></form>

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<form onmouseup="go()"></form>

go to home page Homepage go to top of page Top