Forms are one of the most important elements of HTML. Almost every website uses a form in one way or another. Some uses of HTML forms are contact page form, files uploader form, user registration form, etc. If you want to learn more about the basics of creating an HTML form, you can refer to our beginner step-by-step guide on creating forms.
In this tutorial, we will learn about the various types of inputs that can be taken using the input element of the HTML forms. We will also present an example HTML code for the input element that will help to understand the element better. The HTML codes present in this tutorial can be run by clicking the run button present at the top of that code block.
The input element
The Input tag of HTML is used to take input from the user. We can take various input types from the users such as text, password, radio box, files, etc. The below code shows a simple form in which we ask the user to enter his name.
<form>
<label for="name">Enter Your Name</label>
<input type="text" id="name">
</form>
We can run the above code by clicking the run button present in the right top menu of the above code block. On running the above code, we will prompt a form to enter the name.
Text Input
To take text input from the user, such as name, or some short text, we can use the attribute type=”text” in the input element of the HTML form. We have seen the example code for this type of input in the previous code block. This type of input is one of the most used and is helpful while taking short text from the user.
Password Input
There is a security vulnerability while taking passwords as an input using the text field of HTML. This is because anything we enter in the text field is visible to people present nearby. This lets the nearby people know our password. So to prevent this type of vulnerability, there is a special password input field in the HTML form. The password field replaces the input characters entered by users with bullets characters, so nobody nearby can see the password entered by the user. So we need to use the type=”password” attribute in the input element to use the password input field. The following code shows a practical demonstration of this method.
<form>
<label for="pass">Enter Your Password</label>
<input type="password" id="pass">
</form>
We can run the above code by clicking the run button present at the top of the above code block. If we enter anything in the prompted form on running the above code, it will be replaced by a bullet character.
Email Input
Email input is one of the most important input fields of HTML. This field is usually used when we want to take the email as input from the user. Common uses of the email field include a contact form, user registration form, feedback form, comments form, etc. The email field also checks and validates the syntax of the entered email, and if the syntax is not valid, it will display some errors. Therefore, we need to give the attribute type=”email” to the input element to use the email field. The following code shows an example code of the email input form.
<form>
<label for="email">Enter Your Email</label>
<input type="email" id="email">
</form>
We can run the above code by clicking the run button present on top of the above code block. On running the code, we will get a form that will ask us to enter an email. We can check the form by entering a valid and a non-valid email. If we enter a valid email, everything will be correct, and the form works fine, but if we enter a non-valid email, it will prompt some error in the syntax of the email.
URL input
HTML forms also provide the input field for URLs. This field can be used to take URL as input from the user. This is important when we want to take a URL, For Example, a link to some uploaded document. We need to give the attribute type=”URL” to the input element to use the URL field. One special thing about the URL field is that it checks the URL entered and, if it does not have valid syntax, it will show an error. The following code shows a practical demonstration of taking URL as input.
<form>
<label for="url">Enter an URL</label>
<input type="url" id="url">
</form>
We can run the above code by clicking the run button present on top of the above code block. On running the above code, we will get a form that will ask to enter a URL. If we enter a valid URL in the form, it will work fine, but if we enter a URL that does not have valid syntax, the form will show an error.
Number input
In HTML form, we have an input field of the type number that can take a number as input from the user. The number field only takes numbers as input, and we cannot give any other characters except the digits to the input field. To create a number field input, we need to give the attribute type=”number” to the input element of the form. The below code shows a practical demonstration of the number field.
<form>
<label for="number">Enter a Number</label>
<input type="number" id="number">
</form>
We can run the above code by clicking the run button present at the top of the above code block. Then, we will get an HTML form that asks us to enter a number on running the above code block. Furthermore, we can enter any number into the field, but we can’t enter any other characters except the ten digits.
File Input
Files input is one of the most common types of input in HTML form. Files input field is important, where we want our user to upload files to the server. To create a file uploader, we need to give the attribute type=”file” in the input element of the HTML form. The following code shows an example of a simple file uploader form.
<form>
<input type="file" id="file">
</form>
We can run the above code by clicking the run button present in the top menu of the above code. On running the above code, we will get a file uploader option to upload a single file. We can check the working of the uploader by browsing and selecting any file.
In the above file uploader, we can select only one file at a time. We can’t select multiple files at once. So to achieve this, we need to use the attribute multiple as a parameter to the input element of the HTML form. The below example shows the HTML code to achieve this.
<form>
<input type="file" multiple id="file">
</form>
We can run the above code by clicking the run button present in the top menu of the above code. On running the above code, we will get a file uploader option available to upload multiple files at once. We can check this by clicking the choose files option and selecting multiple files.
Date and Time
Date and time inputs are fundamental types of inputs in many websites. For Example, assume that we have a travel website that books tickets for traveling on flights. In such a scenario, we can use the date input and the time input field of the HTML form to take the traveling time and date instead of using text input. To give date input in HTML form, we need to use the attribute type=”date” in the input element of the HTML form. The below example shows n example code for the Date input field.
<form>
<label for="date">Please enter the Date</label>
<input type="date" id="date">
</form>
The above code can be run by clicking the run button present at the top of the above code block. On running the above code, we will get a date picker input available to enter a date.
There is also a special input field to take the time as an input from the user. To take the time as an input from the user, we need to give the attribute type=”time” to the input element of the HTML form. The below code block shows a practical demonstration of using the time field input of the HTML form.
<form>
<label for="time">Please enter the Time</label>
<input type="time" id="time">
</form>
We can run the above code by clicking the run button present at the top menu of the above code block. On running the above code, we will get a time picker to select the time in 24 hours format. We need to select the hour and minute in the time picker, and if there will be a server-side code, the entered time will be processed accordingly.
Radio Button and Checkbox
Sometimes we want to take input by giving some options to the user. For example, if we know the available options, we can give all the options in the form and let the user select from them. This process is simple, and the user did not have to type the option in the text box or any other input box we have discussed. We can give this type of option by using the radio type of the input element. To use the radio button, we need the type=”radio” parameter of the input element. We also need to use the value and name attribute of the input element. The below code block shows an illustration of creating a radio button.
<form>
<label>Please enter your Gender.<br></label>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="Female" name="gender" value="Female">
<label for="Female">Female</label><br>
<input type="radio" id="Other" name="gender" value="Other">
<label for="Other">Other</label>
</form>
We can run the above code by clicking the run button present on the top of the above code block. On running the above code block, we will get an option to select the gender from three options Male, Female and Other.
While using the radio button, we can only select one option from a group of options. But, sometimes, we want to give the user multiple options to select from a group of options. This can be achieved by using the checked box. The checked Box is very similar to the radio box, but in the radio box, we can select only one option from a group of options, but in the checked box, we can select multiple options at once. To use the checkbox, we need to give the option type=”checkbox” in the input element of the HTML form. The below example shows a practical demonstration of creating a Checkbox.
<form>
<label>Please enter your Favorite Programming Languages.<br></label>
<input type="checkbox" id="Python" name="Python" value="Python">
<label for="python">Python</label><br>
<input type="checkbox" id="Javascript" name="Javascript" value="Javascript">
<label for="Javascript">Javascript</label><br>
<input type="checkbox" id="C++" name="C++" value="C++">
<label for="C++">C++</label><br>
<input type="checkbox" id="Java" name="Java" value="Java">
<label for="Java">Java</label><br>
<input type="checkbox" id="Golang" name="Golang" value="Golang">
<label for="Golang">Golang</label><br>
</form>
We can run the above code by clicking the run button present on top of the above code block. On running the above code, we will get an option to select our favorite programming languages from a group of five languages.
Reset and Submit
We have seen different types of inputs of HTML forms, but we also need to submit the forms. To submit a form, we need to use submit the type of the input element. Therefore, we need to provide the attribute type=”submit” in the parameter of the input element to use the submit button. The below code block shows a practical demonstration of using the submit button in an HTML form.
<form>
<label for="name">Please Enter Your Name</label>
<input type="name" id="name">
<input type="submit" value="Click to submit">
</form>
We can run the above code by clicking the run button present on top of the above code block. In the above code, we have created a submit button using the type=”submit” parameter of the input element of the HTML form. Thus, on running the above code, we will get an HTML form with a submit button. On clicking the submit form, the details entered in the form will be submitted to the server.
We also have a built-in input button to reset the form details that have been entered. To use the reset input button, we need to give the parameter type=”reset” in the input element of the HTML form. The below code block shows a practical demonstration of using the reset button in an HTML form.
<form>
<label for="name">Please Enter Your Name</label>
<input type="name" id="name">
<input type="submit" value="Click to submit">
<input type="reset" value="Click to Reset">
</form>
We can run the above code by clicking the run button present on top of the above code block. On running the above code, we will get an HTML form with a reset button. If we fill in the details in the HTML form and click on the reset button, the form entries will be cleared.
Conclusion
In this tutorial, we have learned about the different ways in which we can take input from a user using HTML forms. We have seen how to take text, email, password, files, etc., as input from a user. You may also refer to our step-by-step guide on creating a file uploader and downloader using the flask library of python and the HTML form.
