HTML <form>
Tag
The <form>
element represents a section in a document containing interactive input controls.
The <form>
element submits information to the server.
The most common <form>
input types are text
, radio
, checkbox
, date
, color
, email
, file
, password
, button
, submit
etc.
Element Attributes
Attribute | Value | Description |
---|---|---|
accept-charset |
character_set | This specifies the space-separated character encodings the server accepts. |
action |
url | This specifies the URL that processes the form submission. |
autocomplete |
on off |
Specifies whether the input components can be automatically completed by the browser by default. |
enctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how the form-data should be encoded when submitting data to the server (if method="post"). |
method |
get post |
It specifies how to send form data using HTTP method. Only for type="submit" |
name |
text | It specifies the form name. |
novalidate |
novalidate | Specifies that the form should not be validated when the form is submitted. Only for type="submit". |
rel |
external help license next nofollow noopener noreferrer opener prev search |
Specifies the relationship between an resource and the document. |
target |
_blank _self _parent _top |
It specifies where to display response after submitting the form. Only for type="submit". |
Global attributes
Global attributes may be applied on all elements, although some elements may have no effect on them.
<accesskey>
,
<class>
,
<contenteditable>
,
<contextmenu>
,
<data-*>
,
<dir>
,
<draggable>
,
<dropzone>
,
<hidden>
,
<id>
,
<lang>
,
<spellcheck>
,
<style>
,
<tabindex>
,
<title>
,
<translate>
.
Global Event Handler Attributes
Global Event Handler attributes may be applied on all elements, although some elements may have no effect on them.
<onabort>
,
<onautocomplete>
,
<onautocompleteerror>
,
<onblur>
,
<oncancel>
,
<oncanplay>
,
<oncanplaythrough>
,
<onchange>
,
<onclick>
,
<onclose>
,
<oncontextmenu>
,
<oncuechange>
,
<ondblclick>
,
<ondrag>
,
<ondragend>
,
<ondragenter>
,
<ondragleave>
,
<ondragover>
,
<ondragstart>
,
<ondrop>
,
<ondurationchange>
,
<onemptied>
,
<onended>
,
<onerror>
,
<onfocus>
,
<oninput>
,
<oninvalid>
,
<onkeydown>
,
<onkeypress>
,
<onkeyup>
,
<onload>
,
<onloadeddata>
,
<onloadedmetadata>
,
<onloadstart>
,
<onmousedown>
,
<onmouseenter>
,
<onmouseleave>
,
<onmousemove>
,
<onmouseout>
,
<onmouseover>
,
<onmouseup>
,
<onmousewheel>
,
<onpause>
,
<onplay>
,
<onplaying>
,
<onprogress>
,
<onratechange>
,
<onreset>
,
<onresize>
,
<onscroll>
,
<onseeked>
,
<onseeking>
,
<onselect>
,
<onshow>
,
<onsort>
,
<onstalled>
,
<onsubmit>
,
<onsuspend>
,
<ontimeupdate>
,
<ontoggle>
,
<onvolumechange>
,
<onwaiting>
.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<form action="actionpage_name">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"><br><br>
<input type="submit" value="Submit">
</form>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<form action="actionpage_name" method="POST">
<fieldset>
<legend>Interested subject:</legend>
<input type="checkbox" name="html" value="HTML">
<label for="html"> I am interested in HTML</label><br>
<input type="checkbox" name="css" value="CSS">
<label for="css"> I am interested in CSS</label><br>
<input type="checkbox" name="js" value="JavaScript">
<label for="js"> I am interested in JavaScript</label><br>
</fieldset>
<fieldset>
<legend>Now learning:</legend>
<input type="radio" id="html" name="runningsubject" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="runningsubject" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="js" name="runningsubject" value="JavaScript">
<label for="js">JavaScript</label><br>
</fieldset>
<input type="submit" value="Submit">
</form>
Click on the "Try it Now" button to see how it works.