While working with HTML Form element(i.e. <form>), we have come across a lot of Form elements(Like <input>, <label>).
We will be discussing about the commonly used form elements in this tutorial.
The <input> element as the name suggest, is used to get some input based on the type attribute.
It is one of the commonly used element in the <form> element.
<html> <body> <form action=" "> <label for="first_name">First Name :</label> <input type="text" id="first_name" name="First_Name"><br><br> <input type="submit"> </form> </body> </html>
So, if you see the above output , there is a small textbox just beside the label First Name :. You can type something in that textbox.
That textbox is a representation of the <input> element.
The <input> element has an attribute called type. That type attribute says what is to be accepted as input.
<input type="text" id="first_name" name="First_Name"><br><br>
In this case the input will be a text(Because you need to enter the first name as input). And thus we have given the value of type attribute as text.
Next, let us come to the submit button.
<input type="submit">
In this case, the value of the <input> element is submit. Which inserts a button and names it Submit automatically.
On clicking the Submit button the form is submitted.
The <label> element in HTML is used to place a label or a text, which can be used with the <input> element.
<html> <body> <form> <label for="first_name">First Name :</label> <input type="text" id="first_name" name="First_Name"><br><br> </form> </body> </html>
To understand the <label> element, let us look at the above output. The above output has a text named First Name :.
And the <label> element also has the text First Name : in it.
<label for="first_name">First Name :</label>
So, the <label> element represents the text or the label that would be displayed on the webpage.
Next, there is this for attribute, whose value is exactly same as the value of the id attribute of the <input> element.
So, the value first_name links the <label> and <input> element together, stating that first name needs to entered for the label with value First Name :.
So far, we have seen that we can define a textbox which supports one line of text.
<input type="text" id="first_name" name="First_Name">
Now, with the <textarea> element, you can enter multiple lines of text.
<html> <body> <form> <label for="para">Enter a paragraph :</label><br><br> <textarea name="paragraph" rows="20" cols="50"></textarea> </form> </body> </html>
So, we have created a textarea, where you can write multiple lines of text.
<textarea name="paragraph" rows="20" cols="50"></textarea>
And the rows and columns attribute defines the number of rows and columns for the <textarea> field.
The <select> element creates a drop down that contains a set of values. And the <option> element contains the set of values for the <select> element.
<html> <body> <form> <label for="fruit">Set of fruits :</label> <select id="fruit" name="fruit"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="guava">Guava</option> </select> </form> </body> </html>
So, in the above output, we got a dropdown that contains a set of fruits. And we have used the <select> element along with the <option> element to achieve it.