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="">
The different input types are as follows:
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 Elements :
Input Type Button
The HTML <input type=”button”> is used to provide a button to the input field. It always comes with the value attribute. We use the value attribute to give the name to the button.
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Click Me!">
</body>
</html>
Input Type Checkbox
The HTML <input type=”checkbox”> is used to provide a checkbox to the input field.
<!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>
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>
Input Type Date
The HTML <input type=”date”> is used for input fields that contain a date.
<form action="">
<label for="work-meeting">Work meeting:</label>
<input type="date" id="work-meeting" name="work-meeting">
</form>
Input Type Email
The HTML <input type=”email”> is used for input fields that contain an email address.
<form action="">
<label for="email">Type an email:</label>
<input type="email" id="email" name="email">
</form>
Input Type Image
The HTML <input type=”image”> specifies an image as a submit button.
<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>
Input Type Password
The HTML <input type=”password”> specifies a password field.
<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>
Input Type Search
The HTML <input type=”search”> is used for search fields.
<form action="">
<label for="gsearch">Search:</label>
<input type="search" id="search" name="search">
</form>
Input Type Number
The HTML <input type=”number”> specifies a numeric input field.
<form action="">
<label for="quantity">Amount (select between 1 and 10):</label>
<input type="number" id="amount" name="amount" min="1" max="10">
</form>
Input Type Radio
The HTML <input type=”radio”> is used to provide a radio button to the input field.
<!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>
Input Type Submit
The HTML <input type=”submit”> specifies a button for submitting.
<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>
Input Type Tel
The HTML <input type=”tel”> is used for input fields that contain a telephone number.
<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>
Input Type Text
The HTML <input type=”text”> specifies a line text input field.
<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>
Input Type Time
The HTML <input type=”time”> allows the user to select a time (no the time zone).
<form action="">
<label for="select-time">Select a time:</label>
<input type="time" id="select-time" name="select-time">
</form>
Input Type URL
The HTML <input type=”url”> is used for input fields that contain a URL address
<form action="">
<label for="homepage">Add your web page :</label>
<input type="url" id="webPage" name="webPage">
</form>
Input Type Week
The HTML <input type=”week”> allows the user to select a week and year.
<form action="">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
