HTML Form tag
The <form>
tag is one of the most important HTML elements used to create web forms. It is used to define a section of a web page that contains interactive form controls such as text fields, checkboxes, radio buttons, submit buttons, and more.
Here is an example of a basic form:
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
</form>
In this example, the <form>
element wraps around the form controls such as text fields and the submit button. The for
attribute in the <label>
element associates the label with the corresponding input field using the id
attribute. This makes it easier for users to understand what information is required in each field.
The name
attribute in the <input>
element is used to identify the input field when the form is submitted. The type
attribute is used to specify the type of input control that is being used. In this example, the first input control is a text field, and the second input control is an email field. The <br>
element is used to create a line break between each input control.
Finally, the <input>
element with type="submit"
creates a submit button that users can click to submit the form.
The <form>
element can also have several attributes that can be used to specify how the form should be processed and validated. Here are some commonly used attributes:
action
: Specifies the URL of the page that will process the form data when the form is submitted.method
: Specifies the HTTP method to be used when submitting the form. The two most common methods areGET
andPOST
.enctype
: Specifies the type of encoding to be used when submitting the form data. The most common value for this attribute ismultipart/form-data
, which is used when uploading files.target
: Specifies where the response from the form submission should be displayed. The most common values for this attribute are_self
, which loads the response in the same window, and_blank
, which opens the response in a new window.
Here is an example of a form with attributes:
<form action="/submit-form.php" method="POST" enctype="multipart/form-data" target="_self">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="file">File:</label>
<input type="file" id="file" name="file">
<br>
<input type="submit" value="Submit">
</form>
In this example, the action
attribute is set to “/submit-form.php”, which specifies the URL of the page that will process the form data. The method
attribute is set to POST
, which specifies that the form data should be submitted using the HTTP POST method. The enctype
attribute is set to multipart/form-data
, which specifies that the form data will include file uploads. The target
attribute is set to _self
, which specifies that the response should be displayed in the same window.
In summary, the <form>
tag is a key HTML element used to create web forms. It wraps around the form controls and allows users to submit data to a web server.