HTML Form (With Examples)

HTML Form
An HTML Form is a section of the document that collects input from the user. The input from the user is generally
sent to a server (Web servers, Mail clients, etc). We use the HTML <form> element to create forms in HTML.
Example: HTML Form
The HTML <form> element is used to create HTML forms. For example,
<form>
<label for="firstname">First name: </label>
<input type="text" name="firstname" required>
<br>
<label for="lastname">Last name: </label>
<input type="text" name="lastname" required>
<br>
<label for="email">email: </label>
<input type="email" name="email" required>
<br>
<label for="password">password: </label>
<input type="password" name="password" required>
<br>
<input type="submit" value="Login!">
</form>
Browser Output
HTML Form Elements
A form contains special interactive elements that users use to send the input. They are text inputs, textarea fields,
checkboxes, dropdowns, and much more. For example,
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit">
</form>
Browser Output
To learn more about the various form controls, visit HTML Form Inputs.
Form Attributes
The HTML <form> element contains several attributes for controlling data submission. They are as follows:
action
The action attributes define the action to be performed when the form is submitted. It is usually the url for the
server where the form data is to be sent.
<form action="/login">
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
</form>
In the above example, when the form is submitted, the data from the form is sent to /login .
method
The method attribute defines the HTTP method to be used when the form is submitted. There are 3 possible values
for the method attribute:
post - It is used to send data to a server to update a resource.

<form method = "post">
...
</form>
get: It is used to request data from a specified resource.
<form method = "get">

...
</form>
dialog: This method is used when the form is inside a <dialog> element. Using this method closes the dialog
and sends a form-submit event.
To learn more about HTTP methods GET and POST, visit HTML Form Action: POST and GET.
target
It specifies where to display the response received after the form is submitted. Similar to the target attribute in <a>
tags, the target attribute has four possible values.
_self (default): Load the response into the same browser tab.
<form target="_self">
<label for="firstname">Enter your first name:</label>
<input type="text" name="firstname">
</form>
_blank: Load the response into a new browser tab.
<form target="_blank">
</form>
_parent: Load into the parent frame of the current one. If no parent is available,it loads the response into the
same tab.
<form target="_parent">
</form>
_top: Load the response into the top-level frame. If no parent is available, it loads the response into the same
tab.
<form target="_top">
</form>
enctype
It specifies how the form data should be encoded for the request. It is only applicable if we use the POST method.
<form method="post" enctype="application/x-www-form-urlencoded">

</form>
In the above example, data from the form will be encoded in the x-www-form-urlencoded format (which is the default
encoding format).
name
It specifies the name of the form. The name is used in Javascript to reference or access this form.
<form name="login_form">
<label for="email">Email:</label>
<input type="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" name="password"><br><br>
</form>
The above form can be accessed in javascript as:
document.forms['login_form']
Although it is possible to use name to access form elements in javascript, it is recommended to use id to access
the form elements.
novalidate
If the novalidate attribute is set, all validations in the form elements are skipped.
<form novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
In the above example, the form will be submitted even if we enter some invalid value to the email field, such as Hi
Previous Tutorial: Next Tutorial:

HTML Favicon HTML Form Elements

HTML Form (With Examples)

Uploaded by

Copyright:

Available Formats

HTML Form (With Examples)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Form (With Examples)

Uploaded by

Copyright:

Available Formats

HTML Form

post - It is used to send data to a server to update a resource.

get: It is used to request data from a specified resource.

<form method = "get">

tags, the target attribute has four possible values.

<form method="post" enctype="application/x-www-form-urlencoded">

The above form can be accessed in javascript as:

Previous Tutorial: Next Tutorial:

You might also like