Introduction
An HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.
For Examples :
| Type | Description |
| <input type=”text”> | Defines a one-line text input field |
| <input type=”radio”> | Defines a radio button (for selecting one of many choices) |
| <input type=”submit”> | Defines a submit button (for submitting the form) |
Attribute Values
| Value | Description |
| button | Defines a clickable button (mostly used with a JavaScript to activate a script) |
| checkbox | Defines a checkbox |
| color | Defines a color picker |
| date | Defines a date control (year, month, day (no time)) |
| datetime-local | Defines a date and time control (year, month, day, time (no timezone) |
| Defines a field for an e-mail address | |
| file | Defines a file-select field and a “Browse” button (for file uploads) |
| hidden | Defines a hidden input field |
| image | Defines an image as the submit button |
| month | Defines a month and year control (no timezone) |
| number | Defines a field for entering a number |
| password | Defines a password field |
| radio | Defines a radio button |
| range | Defines a range control (like a slider control) |
| reset | Defines a reset button |
| search | Defines a text field for entering a search string |
| submit | Defines a submit button |
| tel | Defines a field for entering a telephone number |
| text | Default. Defines a single-line text field |
| time | Defines a control for entering a time (no timezone) |
| url | Defines a field for entering a URL |
| week | Defines a week and year control (no timezone) |
The Action Attribute
The action attribute defines the action to be performed when the form is submitted.
Normally, the form data is sent to a web page on the server when the user clicks on the submit button.
In the example above, the form data is sent to a page on the server called “/action_page.php”. This page contains a server-side script that handles the form data:
<form action=”/Page1.html“>
If the action attribute is omitted, the action is set to the current page.
The Target Attribute
The target the attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.
The default value is “_self” which means the form will be submitted in the current window.
To make the form result open in a new browser tab, use the value “_blank“ :
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<p>When submitting this form, the result will be opened in a new browser tab:</p>
<form action="/Page1.html" target="_blank">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output :-
The Method Attribute
The method the attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:
<!DOCTYPE html>
<html>
<body>
<h2>The method Attribute</h2>
<p>This form will be submitted using the GET method:</p>
<form action="/Page1.html" target="_blank" method="GET">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>After you submit, notice that the form values is visible in the address bar of the new browser tab.</p>
</body>
</html>
When to Use GET?
The default method when submitting form data is GET.
However, when GET is used, the submitted form data will be visible in the page address field:
/action_page.php?firstname=Mickey&lastname=Mouse
When to Use POST?
Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.
The Name Attribute
Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all.
Additional attributes Section
In addition to the attributes that operate on all <input> elements regardless of their type, email inputs support the following attributes:
| Attribute | Description |
| maxlength | The maximum number of characters the input should accept |
| minlength | The minimum number of characters long the input can be and still be considered valid |
| multiple | Whether or not to allow multiple, comma-separated, e-mail addresses to be entered |
| pattern | A regular expression the input’s contents must match in order to be valid |
| placeholder | An exemplar value to display in the input field whenever it is empty |
| readonly | A Boolean attribute indicating whether or not the contents of the input should be read-only |
| size | A number indicating how many characters wide the input field should be |
| spellcheck | Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used |
HTML <textarea>
<!DOCTYPE html>
<html>
<body>
<form action="/Page1.html" id="usrform">
Name: <input type="text" name="usrname">
<input type="submit">
</form>
<br>
<textarea rows="4" cols="50" name="comment" form="usrform">
Enter text here...</textarea>
<p>The text area above is outside the form element, but should still be a part of the form.</p>
<p><b>Note:</b> The form attribute is not supported in IE.</p>
</body>
</html>
Output :-
HTML <option> selected Attribute
- The selected attribute is a boolean attribute.
- When present, it specifies that an option should be pre-selected when the page loads.
- The pre-selected option will be displayed first in the drop-down list.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
</body>
</html>
HTML <button> form action Attribute
The form attribute specifies where to send the form data when a form is submitted. This attribute overrides the form’s action attribute.
The form attribute is only used for buttons with type=“submit”.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="/action_page2.php">Submit to another page</button>
</form>
</body>
</html>
Output :-
