In this tutorial you will learn the HTML Form. HTML forms are the most important portal for interacting with users. However, for historical and practical reasons, it is not always clear how to use them to their complete power. The HTML form is a unit of a document that contains commands. Such as checkbox, radio button, password fields, submit button, etc. It is used to assist the user to put the data which is sent to the server for further processes. Such as email address, contact number, name, etc.
HTML Forms Example:
<!DOCTYPE html> <html><body> <h2>HTML Forms</h2> <form action="/action.php"> <label for="firstname">First name:</label><br> <input type="text" id="firstname" name="firsname" value="Muhammad"><br> <label for="lastname">Last name:</label><br> <input type="text" id="lastname" name="lastname" value="Ali"><br><br> <input type="submit" value="Submit"> </form> <p>If you click the "Submit" button, the form-data will be sent "/action.php" file.</p></body> </html>
The HTML Forms Element:
The HTML forms tag is used to create a web page form for the user to input data. There are various elements that are used in the form element. Such as <button>, <select>, <option>, <label>, <input>, <textarea>, etc.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"> </form>
HTML forms Input Element:
The input field is used to specify the user to enter data. An input element is used within the element to specify input controls that allow the users to enter data in the input field. And the input field has many types depending on the HTML attributes. However, The is an empty element that only contains attributes. To explain the labels for the input element, to be used.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Muhammad"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Rauf"> </form> <p>Note that the form itself is not visible.</p>
The <label> Element:
The HTML <label> element is used to improve for mouse users, e.g. If a user clicks on the text within the <label> element, It will toggles the control. However, the <label> tag describes the label for a <input>, <button> , <progress>, and <textarea> elements.
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Muhammad"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Rauf"> </form>