
The HTML <input> tag is used within a form where the user can enter data.
The way how to the HTML <input> tag displays depend on the type of attribute that is paired with:
Syntax:
<input type="">
- Input Type Button <input type=”button”>
- Input Type Checkbox <input type=”checkbox”>
- Input Type Color <input type=”color”>
- Input Type Date <input type=”date”>
- Input Type Datetime-local <input type=”datetime-local”>
- Input Type Email <input type=”email”>
- Input Type File <input type=”file”>
- Input Type Hidden <input type=”hidden”>
- Input Type Image <input type=”image”>
- Input Type Month <input type=”month”>
- Input Type Number <input type=”number”>
- Input Type Password <input type=”password”>
- Input Type Radio <input type=”radio”>
- Input Type Range <input type=”range”>
- Input Type Reset <input type=”reset”>
- Input Type Search <input type=”search”>
- Input Type Submit <input type=”submit”>
- Input Type Tel <input type=”tel”>
- Input Type Text <input type=”text”>
- Input Type Time <input type=”time”>
- Input Type URL <input type=”url”>
- Input Type Week <input type=”week”>
Input Type Button
The HTML <input type=”button”> specifies a button:
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Thanks!')" value="Click Me!">
</body>
</html>
Output:
Input Type Checkbox
The HTML <input type=”checkbox”> specifies a checkbox:
<!DOCTYPE html>
<html>
<body>
<p>What is your favourite colour?</p>
<form action="">
<input type="checkbox" id="red" name="red" value="red">
<label for="red">Red</label><br>
<input type="checkbox" id="blue" name="blue" value="Blue">
<label for="blue">Blue</label><br>
<input type="checkbox" id="green" name="green" value="green">
<label for="green">Green</label><br><br>
</form>
</body>
</html>
Output:
What is your favourite colour?
Input Type Color
The HTML <input type=”color”> is used for input fields that contain color:
<!DOCTYPE html>
<html>
<body>
<h4>Show a Color Picker:</h4>
<form action="">
<label for="color">Select a color:</label>
<input type="color" id="color" name="color" value="#00bfff">
</form>
</body>
</html>
Output:
Show a Color Picker:
Input Type Date
The HTML <input type=”date”> is used for input fields that contain a date:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="work-meeting">Work meeting:</label>
<input type="date" id="work-meeting" name="work-meeting">
</form>
</body>
</html>
Output:
To add the date limitation use the min and max attributes:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="datemin">Type a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2020-07-12"><br><br>
<label for="datemax">Type a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1988-11-01"><br><br>
</form>
</body>
</html>
Output:
Input Type Datetime-local
The HTML <input type=”datetime-local”> defines a date and time input field, without a time zone:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="work-meeting">Work meeting (date/ time):</label>
<input type="datetime-local" id="work-meeting" name="work-meeting">
</form>
</body>
</html>
Output:
Input Type Email
The HTML <input type=”email”> is used for input fields that contain an email address:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="email">Type an email:</label>
<input type="email" id="email" name="email">
</form>
</body>
</html>
Output:
Input Type File
The HTML <input type=”file”> specifies a file-select field and a “Browse/ Choose File” button (for upload):
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="file">Select a file:</label>
<input type="file" id="file" name="file"><br><br>
</form>
</body>
</html>
Output:
Input Type Hidden
The HTML <input type=”hidden”> specifies a hidden input field (that is not visible to a user):
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="name">Name and surname:</label>
<input type="text" id="name" name="name"><br>
<input type="hidden" id="customerId" name="customerId" value="3007">
</form>
</body>
</html>
Output:
Note: While the value is not displayed to the user in the page’s content, it is visible in the “View Source” functionality!
Input Type Image
The HTML <input type=”image”> specifies an image as a submit button:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name: </label>
<input type="text" id="lname" name="lname"><br>
<input type="image" src="https://lenadesign.org/wp-content/uploads/2021/06/submit-button.png" alt="Submit" width="100" height="100">
</form>
</body>
</html>
Output:
Input Type Month
The HTML <input type=”month”> selects a month and year:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="work-meeting">Work meeting (month/ year):</label>
<input type="month" id="work-meeting" name="work-meeting">
</form>
</body>
</html>
Output:
Input Type Number
The HTML <input type=”number”> specifies a numeric input field:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="quantity">Amount (select between 1 and 10):</label>
<input type="number" id="amount" name="amount" min="1" max="10">
</form>
</body>
</html>
Output:
Input Type Password
The HTML <input type=”password”> specifies a password field:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br>
</form>
</body>
</html>
Output:
Input Type Radio
The HTML <input type=”radio”> specifies a radio button:
<!DOCTYPE html>
<html>
<body>
<p>What is your favourite colour?</p>
<form action="">
<input type="radio" id="blue" name="colour" value="blue">
<label for="blue">Blue</label><br>
<input type="radio" id="yellow" name="colour" value="yellow">
<label for="yellow">Yellow</label><br>
<input type="radio" id="other" name="colour" value="other">
<label for="other">Other</label><br><br>
</form>
</body>
</html>
Output:
What is your favourite colour?
Input Type Range
The HTML <input type=”range”> specifies a control for entering a number whose exact value is not important (the default range is 0 to 100) You can set limits on numbers that are accepted with the min, max, and step attributes:
<!DOCTYPE html>
<html>
<body>
<form action="" method="get">
<label for="vol">Volume (between 0 and 100):</label>
<input type="range" id="vol" name="vol" min="0" max="100">
</form>
</body>
</html>
Output:
Input Type Reset
The HTML <input type=”reset”> specifies a reset button that will reset all form values to the default values:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="reset">
</form>
</body>
</html>
Output:
If you change the input values and then click the “Reset” button, the form-data will be reset to the default values.
Input Type Search
The HTML <input type=”search”> is used for search fields:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="gsearch">Search:</label>
<input type="search" id="search" name="search">
</form>
</body>
</html>
Output:
Input Type Submit
The HTML <input type=”submit”> specifies a button for submitting:
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
</body>
Output:
If you click “Submit”, you will open the page called “/page not found”.
Input Type Tel
The HTML <input type=”tel”> is used for input fields that contain a telephone number:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="phone">Type a telephone number:</label><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br>
<small>Format: 123-45-678</small><br>
</form>
</body>
</html>
Output:
Input Type Text (default)
The HTML <input type=”text”> specifies a line text input field:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
</form>
</body>
</html>
Output:
Input Type Time
The HTML <input type=”time”> allows the user to select a time (no the time zone):
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="select-time">Select a time:</label>
<input type="time" id="select-time" name="select-time">
</form>
</body>
</html>
Output:
Input Type URL
The HTML <input type=”url”> is used for input fields that contain a URL address:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="homepage">Add your web page :</label>
<input type="url" id="webPage" name="webPage">
</form>
</body>
</html>
Output:
Input Type Week
The HTML <input type=”week”> allows the user to select a week and year:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
</body>
</html>
Output:
Enjoy coding!
Read also: