Understanding HTML Form Input Type
In the previous blog we have talked about how to send form data to backend but most of new developers face problems in understanding basic things of form which we will talk in detail about it.
First we will talk about input and it’s various types:
1. Text
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
In the above code we can see that there is input type text which takes input as text and there is a label tag which provides names for the respective input field so users can understand well.
There is an id attribute which is unique to every element and used for targeting those elements for different purposes.
In the provided HTML form, the "name" attribute is used to define the name associated with each input field. This name is used when submitting the form to identify the data entered in each input.
Below is some animation please ignore any wrong thing which is not up to mark it’s my first time doing this:
2. Radio:
<form>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="transgender" name="gender" value="Transgender">
<label for="transgender">Transgender</label>
</form>
In the above code you can see that there is a change value next to the type attribute of input which is radio instead of text and the name of all inputs are the same because in the radio type you can only select one option at a time, and only the selected value will be sent to the server.
There will be a genuine question that in the text type type we are providing input but here there is no such option so how the server will get our data. So basically when we enter data in the input field with the text type input it’s got set to the value attribute of the input tag, and it will be the same for the radio type. Here whatever we want to send to the server, we have to set it to the value attribute of the input tag.
This blog has become very long we will discuss the remaining ones in the next blog.
Hope you enjoyed reading, if this blog helped you anyway please follow me leave a clap and share with your friends and colleagues.
Your support gives me motivation to write more content 😊, Happy Reading
