Inputs in html
In this article we are going to learn about inputs in html how inputs can be used to create specific fields for users and how to validate the input field..
We learnt about html, text in html, lists in html and links in html so, now we are going to learn about inputs.
Inputs
Inputs are used in html to create fields that users can fill their details when signing on the website. Users can fill their names, locations, addresses, cities, countries, birthdays and many more as per each form fields and the tag for inputs is <input/>.
So, we are going to focus on how inputs are used and create our own input fields. Let us get started, we are going to create one input field that a user can use to fill the name. Copy and paste below code.
<input type="text" placeholder="first name"/>
So, we should have the following results.
When the user taps on the input the input gets focused and the keyboard can be opened automatically ready for the user to fill the input. So, the user can type the first name in the field as the input indicates that the field is for first name.
We can create another field that requires the user to fill the last name, copy and paste below code.
<input type="text" placeholder="last name"/>
So, we should have the following results.
The user can now fill the last name on the last name input field. We can create input field according our requirements. Let us create a field for numbers only, copy and paste below code.
<input type="number" placeholder="mobile number"/>
So, we should have the following results.
In this field the user can only type numbers not letters. Try to fill letters and you can see that no letters appears in the field but if you type numbers the input works fine. This means input fields can be used to validate what a user must fill, if the user must fill numbers only, we can tell the input to receive numbers only and if the user must fill all types of characters we can still tell the input to receive all characters.
We can also show the user by message that the input must be filled, so the field must not be left empty. Let us create input field that indicates that the user must fill it, copy and paste below code.
<input type="text" placeholder="location" required/>
So, we should have the following results.
So, if the field is empty will always shows a message that please fill out this field meaning the field is required and must not left empty.
Let us crete more than one input fields with different requirements, copy and paste below code.
<p><input type="text" placeholder="first name" required/></p>
<p><input type="text" placeholder="last name" required/></p>
<p><input type="number" placeholder="mobile number" required/></p>
<p><input type="text" placeholder="location" required/></p>
So, we should have the following results.