Categories
HTML Web development

HTML input tag

HTML input tag

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="">
  1. Input Type Button <input type=”button”>
  2. Input Type Checkbox <input type=”checkbox”>
  3. Input Type Color <input type=”color”>
  4. Input Type Date <input type=”date”>
  5. Input Type Datetime-local <input type=”datetime-local”>
  6. Input Type Email <input type=”email”>
  7. Input Type File <input type=”file”>
  8. Input Type Hidden <input type=”hidden”>
  9. Input Type Image <input type=”image”>
  10. Input Type Month <input type=”month”>
  11. Input Type Number <input type=”number”>
  12. Input Type Password <input type=”password”>
  13. Input Type Radio <input type=”radio”>
  14. Input Type Range <input type=”range”>
  15. Input Type Reset <input type=”reset”>
  16. Input Type Search <input type=”search”>
  17. Input Type Submit <input type=”submit”>
  18. Input Type Tel <input type=”tel”>
  19. Input Type Text <input type=”text”>
  20. Input Type Time <input type=”time”>
  21. Input Type URL <input type=”url”>
  22. 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:



Format: 123-45-678

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!