The HTML <input> elements allows you to create interactivity in your website, where users can communicate with you, using forms. Input can be of any type, such as text, file, date, color, etc. Input comes with a special type, that allows you to write your “passwords” but they are hidden behind the asterisks (*). You can have your input form to have a file input, so users can also send you a file. You can also attach images using input.
Table of Contents
- Text
- Password
- Submit
- Reset
- Number
- Range
- Hidden
- Date
- Month
- Week
- Time
- Button
- Checkbox
- Radio
- File
- Color
- Tel
- Optional Attributes
- Conclusion
1. Text
Text input is default value for input type. It allows you to write single line sentences. All of the line breaks returns as a single line.
<form>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required="" minlength="4" maxlength="8" placeholder="Enter your Name">
</form>
Additional Attributes
2. Password
Input of type Password provides a way to securely write passwords in input fields. Each character is replaced by an asterisk (“*”) or a dot (“•”).
<form>
<label for="pass">Password (8-12 characters):</label>
<input type="password" id="pass" name="password" minlength="8" maxlength="12" required>
</form>The Password type works the same way as a text type, so you can use minlength and maxlength for passwords length. If you want to make password field mandatory for form submit, you can use required.
Additional Attributes
3. Email
Email Input type allows the user to enter and edit the email address. You can also write multiple emails, if you specify multiple attribute.
<label for="email">Enter your email:</label>
<input type="email" id="email" size="30" required>Additional Attributes
4. Submit
Submit input type renders a button, which submits forms to a form handler, which can then process the input data. The data can be used to login the user, or register a user to a new site.
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>The form handler is specified in the form’s action attribute, which takes the input data.
5. Reset
Reset elements, rendered as a button is used to make the form fields back to their initial value, e.g. Clear them.
<form>
<label for="id">User ID:</label>
<input type="text" id="id" name="id" />
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
6. Number
Html input number allows you to write only the numbers in the input field. The built-in validation makes sure that no non-numerical character is present.
<label for="candles">Number of Candles (10-50):</label>
<input type="number" id="candles" name="candles"
min="10" max="50" placeholder="Enter a number between 10-50">Additonal Attributes
7. Range
Range input type allows you to use a slider to specify a value. Rather than using type number, you can use range, so a user can slide to select the value. The value must be greater than the minimum value and also less than the maximum value.
<div>
<input type="range" id="volume" name="volume" min="0" max="11">
<label for="volume">Volume</label>
</div>
Additional Attributes
8. Hidden
The Hidden input element is used by developers/programmers to include data that cannot be seen or modified by users when the form is submitted. For example, a unique token that is sent with every form submission. Hidden inputs are invisible in the displayed page, and there is no way to make them visible.
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="hidden" id="customerId" name="customerId" value="3487">
<input type="submit" value="Submit">
</form>9. Date
Html input date let the user select a date from a monthly calendar. You can either use it as a text input field to write your date, or you can pick a date using a special Date picker.
<label for="start">Start date:</label>
<input type="date" id="start" name="start-date"
value="2022-08-31"
min="2022-01-01" max="2022-12-31">The date is value is displayed in the text input. You can write your own date here, or you can open the date picker to pick a date, that should be between min and max.
10. Month
Input type Month allow you to select month and year. Like the date picker, you also have the ability to pick month using the interface.
<form>
<label for="birthdaymonth">Birthday (month and year):</label>
<input type="month" id="birthdaymonth" name="birthdaymonth">
</form>11. Week
Input type week allows the user to select a week and year. Like the data, and month input types, a week can also be selected from the interface as given below.
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>12. Time
Input type Time allows the user the select the time, using the interface.
<form>
<label for="appointment">Select a time:</label>
<input type="time" id="appointment" name="appointment">
</form>13. Button
Html input type Button renders as a clickable button, which can be programmed to run functions on its onclick event.
OnClick event allows you to run a function once the button is clicked.
<input type="button" value="Submit" onClick="alert('Button Pressed')">14. Checkbox
Html input checkbox allows you to select single or multiple options in a given form.
<fieldset>
<legend>Choose your favorite programming language:</legend>
<div>
<input type="checkbox" id="python" name="python"
checked>
<label for="python">Python</label>
</div>
<div>
<input type="checkbox" id="js" name="js">
<label for="js">Javascript</label>
</div>
<div>
<input type="checkbox" id="cpp" name="cpp">
<label for="cpp">C++</label>
</div>
</fieldset>Additional Attributes
15. Radio
Unlike checkbox, radio types only allows you to select a single value from a given list of value. For example, if you want to get gender from a user, you can use radio types, since a user can only have a single gender.
<fieldset>
<legend>Select your gender </legend>
<div>
<input type="radio" id="male" name="gender" value="male"
checked>
<label for="male">Male</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
</fieldset>It should be noted that the name property for both of these radio inputs is same, because they are related and we only need a single value.
If we use different names for both of these inputs, we would then be able to select both the values, which we do not want.
Additional Attributes
16. File
Html input file allows user to select one to multiple files from their device storage. After the file(s) is selected, is can then be uploaded to server using Form Submission.
<label for="avatar">Choose a profile picture:</label>
<input type="file"
id="profile" name="profile"
accept="image/png, image/jpeg">Additional Attributes
17. Color
Color input element type provides user with an interface to pick colors, either by visually clicking on the color, or by specifying the color using HEX, RGB or HSL values.
<p>Choose your Favorite color:</p>
<div>
<input type="color" id="head" name="head"
value="#e66465">
<label for="head">Favorite Color</label>
</div>Choose your Favorite color:
18. Tel
Tel inputs elements are used to enter / edit telephone numbers. You can provide a pattern for your telephone number, so only telephone numbers with valid pattern are allowed to submit.
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<small>Format: 123-456-7890</small>Additional Attributes
19. Optional Attributes
Minlength:
In html input minlength, we specify the minimum length of characters that should be present in the input field. Using this attribute we can be sure that our field is not empty. If minlength is not specified, then we can leave the field be empty, if we want to.
Is used in:
Maxlength:
In html input maxlength, we specify the maximum length of characters. In this way, we can be sure that our submitted information is not exceeding the characters count. If maxlength is not specified, there is no limit on how many characters one can enter.
Is used in:
Max:
The maximum value for the input field. If the value written is greater than the maximum specified, it fails the validation.
Can be used in:
Min:
The minimum value for the input field. If the value written is less than the minimum specified, it fails the validation.
Placeholder:
When we write something in the html placeholder, it is visible inside the field. But once we start writing in it, it vanishes and our text takes its place. It provides a hint as to what should be written in that field.
Required:
Required means that we need some value in it, before we can submit the form. If any input field has a required attribute, we cannot left it empty.
Size:
The size attribute is a numeric value indicating how many characters wide the input field should be. The default value of size attribute is 20.
Checked:
Checked allows you to check (tick) an option. For example, if you want to have your first checkbox checked, you can use this.
Pattern:
Pattern the value must match to be valid
Multiple:
When we specify multiple attribute in email input type or in the file input, it means the user can enter comma separated email addresses or can choose more than one file with the file upload.
20. Conclusion
In order to write information on the web, you need some sort of fields to let you enter information. The information may be in the form of Text, Email, File, etc. HTML input types allows you to cater to every kind of data format needs. Using these, you can create interactive forms, where user can enter his details to login, or to register for a music festival.
I hope you find this article interesting.