An HTML form is composed of form elements, which are different kinds of input elements, such as checkboxes, text fields, submit buttons, radio buttons, and so on.
The HTML <input> element
The <input> element is an essential form element, which, depending on the type attribute, can be displayed in different ways.
Let’s speak about some of input types.
Text input
The <input type="text"> specifies a one-line input field for text input.Example of the text input:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
Name:<br>
<input type="text" name="name">
<br>
Surname:<br>
<input type="text" name="surname">
</form>
</body>
</html>Radio Button Input
The <input type="radio"> specifies a radio button with the help of which you can select one of many choices.
Example of the radio button input:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" name="game"value="football" checked> Football
<input type="radio" name="game" value="basketball"> Basketball
</form>
</body>
</html>Submit input
The <input type="submit"> submits the form data to a form-handler.
The form-handler is a server page with a script to process input data, which is defined in the action attribute of the form.
Example of the submit input:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
Name:<br>
<input type="text" name="firstname" value="Tom">
<br>
Surname:<br>
<input type="text" name="lastname" value="Brown">
<br>
Age:<br>
<input type="text" name="Age" value="21">
<br><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button, to sent the form-data to the action page.</p>
</body>
</html>The Action Attribute
The action attribute specifies the action that should be performed when the form is submitted.
When the user the form data is sent to a web page on the server when the user clicks on the submit button.
<form action="/form/submit">The Target Attribute
The target attribute defines whether the form result is open in a new browser tab, frame, or in the current window.
The default value of this attribute is _self. Using this value will open the form result in the current window.
The _blank value will open the form result open in a new browser tab.
<form action="/form/submit" target="_blank">The Method Attribute
The method attribute defines the HTTP method (GET or POST) that will be used when submitting the form data.
Example of the GET method:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" target="_blank" method="GET">
Neame:<br>
<input type="text" name="name" value="Tom">
<br>
Surname:<br>
<input type="text" name="Surname" value="Brown">
<br>
Age:<br>
<input type="number" name="Aage" value="21">
<br><br>
<input type="submit" value="Submit">
</form>
<p> Here we used the "_blank" value, which will open the form result in a new browser tab.</p>
</body>
</html>Example of the POST method:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" target="_blank" method="POST">
Name:<br>
<input type="text" name="name" value="Tom">
<br>
Surname:<br>
<input type="text" name="surname" value="Brown">
<br>
Age:<br>
<input type="number" name="age" value="21">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>When to use the GET Method
GET is the default method when submitting form data, and when using this method the form data is visible in the page address field.
When to use the POST Method
If the form data includes sensitive or personal information, always use the POST method, as it doesn’t display the submitted form data in the page address field.
Form submissions with the POST method can’t be bookmarked.
Other Attributes
Below you can find other <form> attributes:
| Attribute | Description |
|---|---|
| accept-charset | This attribute defines the charset that is used in the submitted form (default: the page charset). |
| autocomplete | This attribute defines whether the browser should autocomplete the form or not (default: on). |
| enctype | This attribute defines the encoding of the submitted data (default:url-encoded). |
| name | This attribute defines a name that is used to identify the form. |
| novalidate | This attribute defines that the browser must not validate the form. |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.