We are all aware of the significance of interactive websites in today's environment. The major component that helps to do it is Form, which is essential to gather data from users, which implies communicating with the user. To develop a form, we must first understand HTML's Basic Input Type.
There are different types of inputs types available to improve customer experience.
<Input > types
Button:
It offers an empty button. Simple clickable button without any default function. It has a value attribute.
<input type="button" value="Button-Name">
CheckBox
a checkbox that enables the selection and deselection of single values.
<input type="checkbox" name="checkbox1" checked>
Colour
The user can choose a colour via the colour picker. It displays the standard colour and has a value property. Hex codes are used for colour.
<input type="color" value="#ffffff">
Date
The user can choose a date from the date picker and also provides numeric wheels to select the year, month and day in the supporting browser. It follows attributes,
min - sets a limit on the earliest date to accept.
max - sets a limit on the latest date to accept.
value - sets the default date in the date picker.
<input type="date" name="Joining-Date" min="2017-04-01" max="2022-06-30" />
Datetime - local:
The date and time picker allowed the user to choose a date, year, month, or day, as well as a minute and an hour. It shares the same property as "date."
<input type="datetime-local" name="meeting time" value="2022-11-12T18:30" min="2022-11-12T00:00" max="2022-11-18T00:00">
Email:
It allows the user to input an email address and checks to see whether it is in the right format. It follows attributes,
maxlength - It sets a limit on the maximum number of characters one can enter.
minlength - It sets a limit on the minimum character one can enter.
pattern - It is used to specify a regular expression, it validates email and checks if it is in the same format. one shouldn't rely on the pattern for validation because it is easy to make adjustments in HTML.
<input type="email" id="email" size="30" minlength="3" maxlength="64">
File:
It allows the user to choose a file. Use the accept property to specify which file types the control may pick. It contains several attributes that allow you to pick numerous files.
<input type="file" id="file1" name="MyFile" accept="image/png, image/jpeg">
Hidden
It is not displayed but the value is submitted to the server.
<input type="hidden" id="postId" name="postId" value="1" />
Image:
It is used to create a graphical submit button. It has an src attribute to define the source and an alt attribute to provide alternative text to the image.
<input type="image" id="image" alt="Login" src="/images/login-button.png">
Month:
It allows users to enter months and years without a time zone. It has min, max, and value attributes.
<input type="month" min="2021-03" value="2021-11">
Number:
It allows entering only numeric values. It has min, max, and value attributes.
<input type="number" min="1" max="100">
Password:
It let the user enter a password securely. It replaces each entered character with a symbol such as an asterisk ("*") or a dot ("•").
<input type="password" id="pass" name="password" minlength="7">
Radio:
It allows the user to choose only one option from multiple choices. e.g. select gender.
<input type="radio" value="choice 1">
Range:
It allows the user to choose values from the range by defining the maximum and lowest values so that the user may choose between them. It is used when the exact value doesn't matter that much.
<input type="range" id="volume" name="volume" min="0" max="11">
Reset:
It cleans all the choices made by the user and resets the form to its initial values. It renders as a button.
<input type="reset" value="Reset">
Search
It is the same as the text field but created to accept search queries.
<input type="search" id="site-search" name="searchBar">
Submit:
It submits the form to the server. It gets rendered as a button on the web page.
<input type="submit" value="Submit" />
Tel:
It lets the user enter a telephone number. It has no validation for it. It has a pattern attribute.
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-8]{4}">
Text:
It gives a single-line text field to enter text. We can set maximum and minimum limits on the number of characters one can enter.
<input type="text" minlength="4" maxlength="12" >
Time:
It allows users to enter time in hours and minutes format. It is helpful for appointment booking. It works according to browser support.
<input type="time" min="09:00" max="18:00">
URL:
It helps the user to enter the URL. It provides a text field.
<input type="url" name="url" id="url" placeholder="[https://example.com](https://example.com)" pattern="https://.\*" size="30">
Week:
It allows entering week, month and year. It takes a value as YYYY-W01 to W53 where W is the week and 01 to 52/53 is the week number.
<input type="week" name="week" min="2018-W18" max="2018-W26">