View video tutorial

HTML <form> Tag

HTML

The <form> Tag submit collected data to the server.

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>.

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>
Try it Now »

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>
Try it Now »

Click on the "Try it Now" button to see how it works.