Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are input elements in HTML5
The Input element in HTML is used to create interactive controls for web-based forms for accepting data from the user. <input> element has only opening tag and <input> element will work only if we will add it between <form> tags.
Input element is considered as one of the most powerful and complex HTML element because of the massive number of combinations of attributes and input types. We have several attributes that we can use with <input> element but we can use only one attribute at a time as per the need.
E-mail Attribute
As the name suggests email attribute is used when we want the user to type email address inside the field. The format that email attribute follows is “%@%” which means that you should have one ‘at the rate’ symbol in your content.
Any other content that doesn’t follow the format will generate an error during form submission. We can use multiple attribute inside input element to allow several email addresses to be entered in the same field.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Email attribute</h1>
<form action="#">
<label for="email">Enter your email address:</label>
<input type="email" id="email" name="email">
<input type="submit">
</form>
</body>
</html>
Search Attribute
Search attribute is used to create a search box on the webpage which contains the text that needs to be searched on the webpage.
The search box often renders with rounded corners and they also display a cross symbol (X) to remove all the content from the search box. But to make a search attribute work we should always have a submit button linked with search box.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Search Attribute</h1>
<form action="#">
<label for="Text to be searched">Enter Text:</label>
<input type="search" id="search" name="search">
<input type="submit">
</form>
</body>
</html>
Tel Attribute
Tel attribute stands for Telephone. As the name implies this attribute is used to create a field on the webpage where a user can enter mobile number. When a user will hover over the telephone field a numeric keypad will get generated which will be used for entering phone number in the field.
Due to wide variety of phone number format around the world, we don’t have any particular format for this attribute hence user won’t get any error during form submission even if they have entered text inside the field.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Telephone attribute</h1>
<form action="#">
<label for="phone">Enter a phone number:</label><br>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}- [0-9]{2}-[0-9]{3}" required>
<input type="submit">
</form>
</body>
</html>
URL Attribute
URL attribute is used to create a field on the webpage that accepts url as a input from the user. The url field will only work with url address and will generate an error if no protocol i.e. http: is entered or if the url entered by the user is malformed.
URL field is generally used in the forms where we want the user to share the links of social media handles like Instagram, Linkedin or for sharing some project links.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Display a URL Input Field</h1>
<form action=”#”>
<label for="Instagram">Instagram Link:</label>
<input type="url" id="instagram" name="instagram">
<input type="submit"><br><br>
<label for="Linkedin">Linkedin Link:</label>
<input type="url" id="linkedin" name="linkedin">
<input type="submit"><br><br>
<label for="Twitter">Twitter Link:</label>
<input type="url" id="twitter" name="twitter">
<input type="submit">
</form>
</body>
</html>
Range Attribute
Range attribute is used to create a field on the webpage where we want the user to input a number. But instead of typing the number manually we use slider which has upper and lower range and user can select any number between that range by moving slider.
But to make range attribute work we have to use several attribute alongside like min( starting of range), max (ending of range), step ( stepping interval) and value (by-default value).
The range attribute is widely used in the e-commerce website where it is used to create a slider in the filter section so the user can set the price range and filter out the products.
Example
<!DOCTYPE html>
<html>
<body>
<h1>Range attribute</h1>
<form action="#">
<label for="Price">Price(between 0 to 1000):</label>
<input type="range" id="price" name="price" min="0" max="1000" step=”50” value=”500”>
<input type="submit">
</form>
</body>
</html>
Besides these, we have number attribute which creates a field that accepts numbers as input. checkbox attribute which comes in use when we want to create a field where user have to select one option from given checkboxes, date attribute to create a field that accepts date as input and follows dd-mm-yyyy format and so many more.
Conclusion
To conclude, we can use all these attributes in the input element at the same time to increase the functionality of our webpage. These attributes doesn’t only increase functionality of the webpage, but also provides built-in error validation like in-email; we have a particular format to check valid email.
Similarly in other attributes we have different format that allows only valid data to be sent to the server. With the right combination of these elements, a website can become much more interactive and engaging for users. As such, understanding how to use input elements is an essential part of becoming a successful web developer.
221 Views
