DEV Community

Cover image for HTML Input Types and Attributes You Must Know As A Beginner
Shefali
Shefali

Posted on • Edited on • Originally published at shefali.dev

HTML Input Types and Attributes You Must Know As A Beginner

#html #webdev #programming #tutorial

Introduction

In the world of web development, creating user-friendly and interactive interfaces is crucial. HTML input forms are the backbone of user interaction whether it’s a simple contact form or a complex registration process. The <input> tag empowers developers to create versatile and dynamic web forms, enabling users to input various types of data and interact with web applications. In this blog post, we will explore HTML Input Types and Attributes.

What is <input> element?

The <input> HTML element is used to display an input field where the user can enter data, such as text, numbers, dates, checkboxes, radio buttons, etc., and interact with the web applications. As an empty element, it does not have a closing tag.

The <input> element include a range of attributes that controls its behaviour and appearance.

<form>
  <label for="firstName">First name:</label><br>
  <input type="text" id="firstName" name="lastName"><br>
  <label for="lastName">Last name:</label><br>
  <input type="text" id="lastName" name="lastName">
</form>
Enter fullscreen mode Exit fullscreen mode

The <label> element is used with the <input> element to define the title for it. <label> element’s for attribute and <input> element’s id attribute links each other.

Types of input

Let’s explore the types of input element:

  • <input type="text"> defines a single-line text field and allows users to enter single-line text such as names, email addresses, etc. 
  <label for="text">Text:</label>
  <input type="text" id="text" name="text">
Enter fullscreen mode Exit fullscreen mode
  • <input type="number"> defines a numeric field and allows users to enter numeric values such as age, weight etc. It also includes up and down arrows to increase or decrease the value. 
  <label for="number">Number:</label>
  <input type="number" id="number" name="number">
Enter fullscreen mode Exit fullscreen mode
  • <input type="button" /> defines a button that can be used to trigger javascript functions or any other actions without submitting the form. 
  <input type="button" value="Click Me!">
Enter fullscreen mode Exit fullscreen mode
  • <input type="email" /> defines an input field that allows users to enter their email addresses. 
<label for="email-address">Email address:</label>
<input type="email" id="email-address" name="email-address">
Enter fullscreen mode Exit fullscreen mode
  • <input type="password" /> defines a password input field that allows users to enter the password. It hides the characters entered by the user, to protect the user’s privacy. 
<label for="password">Password:</label>
<input type="password" id="password" name="password">
Enter fullscreen mode Exit fullscreen mode
  • <input type="checkbox" /> defines a checkbox that allows users to select one or more options from a list. 
  <input type="checkbox" id="option1" name="option1">
  <label for="option1">One</label><br>
  <input type="checkbox" id="option2" name="option2">
  <label for="option2">Two</label><br>
  <input type="checkbox" id="option3" name="option3">
  <label for="option3">Three</label>
Enter fullscreen mode Exit fullscreen mode
  • <input type="radio" /> defines a radio button that allows users to select only one single option from a list. 
  <input type="radio" id="html" name="html" value="html" />
  <label for="html">HTML</label>
  <input type="radio" id="css" name="css" value="css" />
  <label for="css">CSS</label>
  <input type="radio" id="javascript" name="javascript" value="javascript" />
  <label for="javascript">JavaScript</label>
Enter fullscreen mode Exit fullscreen mode
  • <input type="tel" /> defines an input field that allows the user to enter a telephone number. 
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Enter fullscreen mode Exit fullscreen mode
  • <input type="search" /> defines a single-line text field that allows users to enter their search queries. 
<label for="search">Search</label>
<input type="search" id="search" name="search">
Enter fullscreen mode Exit fullscreen mode
  • <input type="file" /> defines an input field that allows users to select a file to upload. It can be used to upload files such as images, videos, documents, audio, etc. 
 <label for="profile"> Profile: </label>
 <input type="file" id="profile" name="profile" accept="image/png, image/jpg" />
Enter fullscreen mode Exit fullscreen mode
  • <input type="submit" />defines a button that allows the user to submit the form. 
<input type="submit" value="Submit">
Enter fullscreen mode Exit fullscreen mode
  • <input type="color" /> defines a field that allows the user to select a colour. 
  <label for="color">Select Color</label>    
  <input type="color" id="color" value="#2222eb">
Enter fullscreen mode Exit fullscreen mode
  • <input type="date" /> defines a field that allows users to select a date. 
  <label for="date">Date:</label>
  <input type="date" id="date">
Enter fullscreen mode Exit fullscreen mode
  • <input type="datetime-local" /> defines a field that allows the user to select a date and time, without time zone information. 
<label for="datetime">Datetime:</label>
<input type="datetime-local" id="datetime">
Enter fullscreen mode Exit fullscreen mode
  • <input type="hidden" /> defines an input field that is not visible to the user. It serves as a storage mechanism for sensitive information like session tokens or other data that must be included in form submissions but remain invisible and unmodifiable to the user. 
 <input type="hidden" value="5462">
Enter fullscreen mode Exit fullscreen mode
  • <input type="image" /> defines an image as a submit button. 
<input type="image" value="Click me" src="click.jpg">
Enter fullscreen mode Exit fullscreen mode
  • <input type="month" /> defines an input field that allows the user to select month and year. 
  <label for="month">Month:</label>
  <input type="month" id="month">
Enter fullscreen mode Exit fullscreen mode
  • <input type="range" /> defines a field that allows the user to select a value within a range of values using a slider. The default range is 0 to 100, but it can be changed using the min, max, and step attributes. 
  <label for="rate">Rate (between 0 and 10):</label>
  <input type="range" id="rate" name="rate" min="0" max="10">
Enter fullscreen mode Exit fullscreen mode
  • <input type="reset" /> defines a reset button that resets all form values to their default values. 
  <form>
     <label for="firstName">First name:</label><br>
     <input type="text" id="firstName" name="firstName"><br>
     <label for="lastName">Last name:</label><br>
     <input type="text" id="lastName" name="lastName"><br>
     <input type="submit" value="Submit">
     <input type="reset">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • <input type="time" /> defines a field that allows users to select the time. 
 <label for="time">Time:</label>
 <input type="time" id="time">
Enter fullscreen mode Exit fullscreen mode
  • <input type="url" /> defines a field that allows the user to enter a URL. 
<label for="url">Your website:</label>
<input type="url" id="url" placeholder="https://shefali.dev" pattern="https://.*">
Enter fullscreen mode Exit fullscreen mode
  • <input type="week" /> defines a field that allows the user to select a week and year. 
  <label for="week">Week:</label>
  <input type="week" id="week">
Enter fullscreen mode Exit fullscreen mode

Attributes for <input> element

Let’s explore the attributes of the input element:

  • accept attribute specifies a filter for what file type the user can select to upload. 
  <label for="profile"> Profile: </label>
  <input type="file" id="profile" name="profile" accept="image/*" />
Enter fullscreen mode Exit fullscreen mode
  • alt attribute specifies an alternate text for the user if for some the image is not available. 
 <input type="image" value="Click me" src="click.jpg" alt="Click">
Enter fullscreen mode Exit fullscreen mode
  • autocomplete attribute enables or disables the browser’s autocomplete feature for the input field. 
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off">
Enter fullscreen mode Exit fullscreen mode
  • autofocus attribute specifies that an element should automatically get focused when the page loads. It is a boolean attribute. 
  <form>
     <label for="firstName">First name:</label><br>
     <input type="text" id="firstName" name="firstName" autofocus> 
     <br>
     <label for="lastName">Last name:</label><br>
     <input type="text" id="lastName" name="lastName"><br>
     <input type="submit" value="Submit">
     <input type="reset">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • checked attribute specifies that an <input> element must be checked when the page loads. It is a boolean attribute. This can be used only on the <input type="checkbox" /> and <input type="radio" />. 
  <input type="checkbox" name="checkbox1" id="checkbox1" checked>     
  <label for="checkbox1">One</label><br>
  <input type="checkbox" name="checkbox2" id="checkbox2">     
  <label for="checkbox2">Two</label>
Enter fullscreen mode Exit fullscreen mode
  • dirname attribute enables the submission of the text direction of the input field. 
  <form>
    <label for="firstName">First name:</label>
    <input type="text" id="firstName" name="firstName" dirname="firstName.dir">
    <input type="submit" value="Submit">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • disabled attribute disables the input field, preventing user interaction. 
  <form>
      <label for="firstName">First name:</label><br>
      <input type="text" id="firstName" name="firstName"><br>
      <label for="lastName">Last name:</label><br>
      <input type="text" id="lastName" name="lastName" disabled> 
      <br>
      <input type="submit" value="Submit">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • formaction attribute determines the destination URL where the input control will be processed upon form submission. This attribute overrides the action attribute of the <form> element.

The formaction attribute is used with <input type="submit" /> and <input type="image" />.

  <form action="action_1.html">
      <label for="firstName">First name:</label><br>
      <input type="text" id="firstName" name="firstName"><br>
      <label for="lastName">Last name:</label><br>
      <input type="text" id="lastName" name="lastName"><br>
      <input type="submit" value="Submit" formaction="action_2.html">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • formmethod attribute defines the HTTP method for sending form-data. This attribute overrides the method attribute of the <form> element. The formmethod attribute is used with <input type="submit" /> and <input type="image" />. 
  <form action="action.html" method="get">
      <label for="firstName">First name:</label><br>
      <input type="text" id="firstName" name="firstName"><br>
      <label for="lastName">Last name:</label><br>
      <input type="text" id="lastName" name="lastName"><br>
      <input type="submit" value="Submit" formmethod="post">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • formnovalidate attribute specifies that the form is not to be validated during submission. It is a boolean attribute. The formnovalidate attribute overrides the novalidate attribute of the <form> element. The formnovalidate attribute is used with <input type="submit" />. 
  <form action="action.html">
      <label for="firstName">First name:</label><br>
      <input type="text" id="firstName" name="firstName"><br>
      <label for="lastName">Last name:</label><br>
      <input type="text" id="lastName" name="lastName"><br>
      <input type="submit" value="Submit" formnovalidate>
  </form>
Enter fullscreen mode Exit fullscreen mode
  • height attribute specifies the height of the <input> element. 
 <form action="action.html">
    <label for="firstName">First name:</label>
    <input type="text" id="firstName" name="firstName"><br>
    <label for="lastName">Last name:</label>
    <input type="text" id="lastName" name="lastName"><br>
    <input type="image" src="submit.png" width="50" height="50">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • max attribute specifies the maximum value for an <input> element. This is used with the following input types: number, range, date, datetime-local, month, time and week. 
<label for="rate">Rate (between 0 and 10):</label>
<input type="range" id="rate" name="rate" min="0" max="10">
maxlength attribute specifies the maximum number of characters to allow in the <input> element.
<label for="name">Name:</label>
<input type="text" id="name" name="name" maxlength="10">
Enter fullscreen mode Exit fullscreen mode
  • min attribute specifies the minimum value for an <input> element. This is used with the following input types: number, range, date, datetime-local, month, time and week. 
<label for="rate">Rate (between 0 and 10):</label>
<input type="range" id="rate" name="rate" min="0" max="10">
minlength attribute specifies the minimum number of characters to allow in the <input> element.
<label for="name">Name:</label>
<input type="text" id="name" name="name" minlength="5">
Enter fullscreen mode Exit fullscreen mode
  • multiple attribute is a boolean attribute and specifies that the user is allowed to enter more than one value in the <input> element. The multiple attribute is used with <input type="email" /> and <input type="file" />. 
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
name attribute specifies the name of an <input>element.
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Enter fullscreen mode Exit fullscreen mode
  • pattern attribute specifies a pattern for the input value. The pattern attribute works with the following input types: text, date, search, url, tel, email, and password. 
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
Enter fullscreen mode Exit fullscreen mode
  • placeholder attribute provides a sample value to guide users on what to input. 
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Your name">
Enter fullscreen mode Exit fullscreen mode
  • readonly attribute is a boolean attribute and specifies that an input field is read-only. 
<label for="country">Country</label>
  <input type="text" id="country" name="country" value="India" readonly>
Enter fullscreen mode Exit fullscreen mode
  • required attribute ensures that the input field must be filled out before submitting the form. 
  <form>
     <label for="firstName">First name:</label>
     <input type="text" id="firstName" name="firstName" required> 
     <br>
     <label for="lastName">Last name:</label>
     <input type="text" id="lastName" name="lastName"><br>
     <label for="email">Email:</label>
     <input type="email" id="email" name="email" required><br>
     <input type="submit" value="Submit">
  </form>
Enter fullscreen mode Exit fullscreen mode
  • size attribute specifies the visible width, in characters, of an <input> element. The size attribute works with the following input types: text, search, tel, url, email, and password. 
<form>
    <label for="firstName">First name:</label>
    <input type="text" id="firstName" name="firstName" size="25"> 
    <br>
    <label for="tel">Telephone number:</label>
    <input type="tel" id="tel" name="tel" maxlength="10" size="10"><br><br>
    <input type="submit" value="Submit">
</form>
Enter fullscreen mode Exit fullscreen mode
  • src attribute specifies the URL of the image. This is used only with <input type="image" /> . 
<input type="image" value="Click me" src="click.jpg">
Enter fullscreen mode Exit fullscreen mode
  • step attribute specifies the interval between numbers in an <input> element. This attribute works with the following input types: number, range, date, datetime-local, month, time and week. 
<label for="rate">Rate (between 0 and 10):</label>
<input type="range" id="rate" name="rate" min="0" max="10" step="2">
Enter fullscreen mode Exit fullscreen mode
  • type attribute specifies the type of an <input> element. 
<input type="number" />
<input type="button" />
<input type="email" />
<input type="password" />
<input type="checkbox" />
Enter fullscreen mode Exit fullscreen mode
  • value attribute specifies the value of an <input> element. 
<label for="country">Country</label>
<input type="text" id="country" name="country" value="India">
Enter fullscreen mode Exit fullscreen mode
  • width attribute specifies the width of the <input> element. 
 <form action="action.html">
    <label for="firstName">First name:</label>
    <input type="text" id="firstName" name="firstName"><br>
    <label for="lastName">Last name:</label>
    <input type="text" id="lastName" name="lastName"><br>
    <input type="image" src="submit.png" width="50" height="50">
 </form>
Enter fullscreen mode Exit fullscreen mode

Conclusion

HTML input elements are essential components of web forms and play a vital role in facilitating user interaction. By understanding the different input types, attributes, and styling options, you can create compelling and user-friendly forms that capture accurate and relevant data. So go ahead, experiment with HTML input elements, and unleash the power of interactive web forms in your projects.

Wrapping Up

That’s all for today!

By the way, if you ever need free HTML website templates, I recommend checking out HTMLrev, I use it all the time. And when I’m looking for web design inspiration, Websitevice is one of my go-to resources.

For paid collaboration connect with me at : connect@shefali.dev

If you enjoy my work and want to support what I do:

👉 Become a Patreon supporter
👉 Or buy me a coffee

Every small gesture keeps me going! 💛

Top comments (0)