HTML Input Types and Attributes You Must Know As A Beginner

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>

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">

• <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">

• <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!">

• <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">

• <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">

• <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>

• <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>

• <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}">

• <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">

• <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" />

• <input type="submit" /> defines a button that allows the user to submit the form.

  <input type="submit" value="Submit">

• <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">

• <input type="date" /> defines a field that allows users to select a date.

  <label for="date">Date:</label>
  <input type="date" id="date">

• <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">

• <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">

• <input type="image" /> defines an image as a submit button.

  <input type="image" value="Click me" src="click.jpg">

• <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">

• <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">

• <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>

• <input type="time" /> defines a field that allows users to select the time.

  <label for="time">Time:</label>
  <input type="time" id="time">

• <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://.*">

• <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">

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/*" />

• 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">

• 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">

• autofocus attribute specifies that an <input> 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>

• 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>

• 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>

• 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>

• 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>

• 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>

• 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>

• 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>

• 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">

• 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">

• 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">

• 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}">

• 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">

• 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>

• 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>

• 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>

• 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">

• 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">

• type attribute specifies the type of an <input> element.

  <input type="number" />
  <input type="button" />
  <input type="email" />
  <input type="password" />
  <input type="checkbox" />

• value attribute specifies the value of an <input> element.

  <label for="country">Country</label>
  <input type="text" id="country" name="country" value="India">

• 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>

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.

Keep coding!

Click here to get a comprehensive introduction to CSS flexbox!