HTML: Form Input Types

HTML Form Input tag is one of the major reasons why JavaScript is thriving. It helps us collect and process data from a user. There is hardly any website where any type of data is not processed; be it collecting customer information, sending a request to a supplier, sending and downloading images, taking questionnaires, running a poll etc. All of these operations are done with one or another HTML form input type. It is a part of our daily lives, and as developers who build projects, we can’t do away with collecting or sending data, hence we can’t do without the Form element.

I’ll be discussing some of the most used HTML Form input types, their uses, and how best they should be applied. Let’s dive into the different form input types and a practical use case.

Form Input Type: text: The input type ‘text’ allows for entries that are single-lined texts. Any number or integer entered in this text field will be processed as text.

<form>
    <label for="name">Enter your name</label>
    <input type="text" name="name"/>
</form>

The output of this line of code will be :

Form Input Type: password: This is a field that accepts texts, numbers and other special characters. It is the password field and so the characters are represented in the form of an asterisk (*). Let’s see how this works.

<form>
    <label for="password">Enter your password</label>
    <input type="password" name="name"/>
</form>

The output:

Form Input Type: date: This field is the date field, and the user can enter the date manually or by using the date picker interface provided.

<form>
    <label for="date">Enter today's date</label>
    <input type="date" name="date"/>
</form>

Form Input Type: email: This is an input field for an email address. If entered incorrectly, the email pattern validation alerts the user that the email is incorrect or entered incorrectly.

<form>
    <label for="email">Enter your email</label>
    <input type="email" name="email"/>
</form>

The output in the browser:

Form Input Type: button: This is another way of defining a button instead of using the tag. Let’s see how this can be used.

<form>
    <label for="button">This is a button</label>
    <input type="button" onclick="console.log('Hello World')" value="Click"/>
</form>

The output goes thus:

Form Input Type: radio: A radio button presents several choices where the user is only expected to choose a single answer. It is used in questionnaires and polls.

<div>
        <h4>How many vowels are there in the alphabet</h4>
<form>
    <input type="radio" name="radio" />
    <label for="button">12</label>
</form>
<form>
    <input type="radio" name="radio" />
    <label for="button">5</label>
</form>
<form>
    <input type="radio" name="radio" />
    <label for="button">8</label>
</form>
    </div>

The output will be printed as such:

Form Input Type: checkbox: A checkbox presents several choices where the user can choose more than a single answer. Just like a radio button, It can be used in questionnaires and polls.

<div>
        <h4>How many vowels are there in the alphabet</h4>
<form>
    <input type="checkbox" />
    <label for="button">12</label>
</form>
<form>
    <input type="checkbox" />
    <label for="button">5</label>
</form>
<form>
    <input type="checkbox" />
    <label for="button">8</label>
</form>
    </div>

This will be the output:

Form Input Type: number: This field allows for entries that are strictly integers. The numbers can be set to a couple of attributes depending on what the entries are for. For example, you can set a minimum or a maximum value for the numbers.

<form>
    <label for="question">How many vowels are there in the alphabet</label>
    <input type="number" name="vowels" min="5" max="10" />
</form>

The output:

Form Input Type: file: The file type is used to Choose and Select a file in a document. The file will navigate into the document path of users’ computers and they will be prompted to select the file to upload. Just like this:

<form>
    <label for="question">Please attach a file</label>
    <input type="file" name="myfile" />
</form>

And in your browser, the output will look like this:

Form Input Type: tel: Here, the text field is requiring that a phone number be entered. The tel type has a couple of attributes such as pattern and required that developers can use to set the pattern by which the telephone numbers are expected to be inputted.

<form>
    <label for="question">Please enter your phone number</label>
    <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"  />
</form>

The output goes thus:

Form Input Type: search: The search field is like a normal text field where you get to input your search parameters.

<form>
    <label for="question">Please enter your search word</label>
    <input type="search" name="search"  />
</form>

Form Input Type: url: The url type is a text field box that expects users to enter a url they are either searching for or as a means of data collection for a form.

<form>
    <label for="question">Please enter your url</label>
    <input type="url" name="urlfield"  />
</form>

I hope this tutorial has been helpful. If Yes, you can like and follow me.

Thanks and have a great day.

Comments

[Gamerseo]

This is a great post for beginners.

[Toby]

I bet it is. Thanks

[Medea]

really informative!

[Toby]

Thanks