Form Elements in HTML
In HTML form is used to collect some input from the user.
The <form> element is used to create an HTML form.
<form>
<!--form elements-->
</form>
There are the following elements defined to collect users data:
- label
- input
- Radio and Checkbox
- TextArea
Let's understand each tag with an example:
1. Label
<label> is used to define label for form Elements, it is useful for meta information about the element.
To bind label with an element we use for attribute.
Note: The for attribute should be equal to the id attribute value of the form element.
Example:
<form>
<label for="name">Name</label>
<input type="text" id="name">
<label for="email">Email</label>
<input type="email" id="email">
</form>
Output:
2. Input
<input> tag in html is used to take input from user. It is a self-closing tag.
There are the following type of input elements:
- text
- password
- date
- number
- range
- radio
- checkbox
- button
- submit
And many more...
Example:
<input type="text">
<input type="password">
Try yourself by providing above type and observe the output.
If you'll notice here, after writing these input text, you are getting an empty input box. Looking at this user cannot decide what data to fill inside. Hence to provide these information, you can either use label tag or placeholder attribute for input tag.
Example:
<input type="text" placeholder="Ener your name here "><br>
<input type="password" placeholder="Enter your password here">
You can provide default value to these input elements using value attribute as
<input type="text" placeholder="Enter your name here " value="Joey">
3. Radio and Checkbox:
Radio: <input type="radio"> defines a radio button. It is useful when you want your user to select a single value from multiple choices.
Example:
<form>
Gender:
<input type="radio" value="M"> Male
<input type="radio" value="F"> Female
<input type="radio" value="O"> Others
</form>
Output:
In the above form, if you'll click on each radio button then all of them will be selected at a time, which is violating the definition of radio buttons.
Hence to achieve this functionality, instead of using only value, use name attribute as well. And provide same name for related radio buttons
Example:
<form>
Gender:
<input type="radio" value="M" name="gender"> Male
<input type="radio" value="F" name="gender"> Female
<input type="radio" value="O" name="gender"> Others
</form>
Now you'll be able to select only one of multiple choices.
Checkbox: <input type="checkbox"> defines a checkbox. It is useful when you want to select one or more options from a limited number of choices.
Example:
<form>
Gender:
<input type="checkbox" value="cricket"> Cricket
<input type="checkbox" value="football"> Football
<input type="checkbox" value="Others"> Others
</form>
Output:
4. TextArea:
In case if you want to collect reviews or comments or multi line paragraph from a user, you can use <textarea>.
To define the size of the TextArea you can user rows and cols attribute.
Example:
<form>
<label for="name">Name<label>
<input type="text" id="name">
<label for="email">Email<label>
<input type="email" id="email">
<label for="message">Comment</label>
<textarea I'd="message" rows="5" cols="40">Write your views about our blog</textarea>
<input type="Submit" value="Submit">
</form>
Output:
Comments
Post a Comment