HTML Input Types

    Here in this article, we will discuss the <input> element type values.

    HTML <input> type attribute

    The type attribute of < input> element decides which input field should be displayed on the page.  It could be a text, date, time, URL, or submit button. The type value we pass in the <input> element the web page will display the corresponding input block.

    • type="button"
    • type="checkbox"
    • type="color"
    • type="date"
    • type="datetime-local"
    • type="email"
    • type="file"
    • type="hidden"
    • type="image"
    • type="month"
    • type="number"
    • type="password"
    • type="radio"
    • type="range"
    • type="reset"
    • type="search"
    • type="submit"
    • type="tel"
    • type="text"
    • type="time"
    • type="url"
    • type="week"

    Text

    To define an input block for the single-line text we can use the text value for the type attribute. Example

    <form>
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name">
    </form>

    Preview

      Name:
      

    Password

    The password value is used when we want the user to enter a password in the input block. Example

    <form>
      <label for="pass">Password:</label><br>
      <input type="password" id="pass" name="pass">
    </form>

    Preview

      Password:
      

    Submit

    Every <form> element contains a submit button, this submits button is used to submit the form data. Example

    <form action="/login.php">
       
      <label for="username">Username:</label><br>
      <input type="text" id="username" name="username"><br>
      <label for="pass">Password:</label><br>
      <input type="password" id="pass" name="pass">
      <input type="submit" value="Login">
    
    </form>

    Output

    Username:
    
    Password:
       
    

    The value specified in the value attribute will be displayed on the submit button.

    Reset

    The reset value reset all the filled data. If the input has default values than the data would be reset to their default values. Example

    <form action="/signup.php">
      
      <label for="name">Name</label><br>
      <input type="text" id="name" name="name"><br>
      
      <label for="mail">Email </label><br>
      <input type="email" id="mail" name="mail"><br>
    
      <label for="pwd">Password</label><br>
      <input type="password" id="pwd" name="pwd"><br>
      
      <input type="submit" value="Sign Up">
      <input type="reset">
    
    </form>

    Preview

    Name
    
    Email 
    
    Password
    
      

    Radio

    Radio attribute is used to define a number of options from which the user can select only one. Example

    <form>
      Select Programming Language:<br>
      <input type="radio" id="python" name="code">
      <label for="python">Python</label><br>
      <input type="radio" id="java" name="code" >
      <label for="java">Java</label><br>
      <input type="radio" id="c" name="code">
      <label for="c">C</label>
    </form>

    Preview

    Select Programming Language:
     Python
     Java
     C

    Checkbox

    The checkbox value allow the user to select more than one option. Example

    <form>
      Select the Programming Language:<br>
      <input type="checkbox" id="python" name="code">
      <label for="python">Python</label><br>
      <input type="checkbox" id="java" name="code" >
      <label for="java">Java</label><br>
      <input type="checkbox" id="c" name="code">
      <label for="c">C</label>
    </form>

    Preview

    Select the Programming Language:
     Python
     Java
     C

    Button

    The button type create a clickable button on the web page. Example

     <input type="button" value="Click">

    Preview

    Color

    The color type allows the user to select the colour data. It depends on the browser whether it supports the color value or not. Example

    <form>
      <label for="colour">Select the Colour</label>
      <input type="color" id="colour" name="colour">
    </form>

    Preview

    Select the Colour:

    Date

    The date value is used when we want the user to enter a specific date. Example

    <form>
      <label for="dob">Select Date:</label>
      <input type="date" id="dob" name="dob">
    </form>

    Preview

    Birthday:
    
    

    Datetime-local

    Datetime-local value defines a date and time input block. Example

    <form>
      <label for="book">Select the Checkout Date and Time:</label>
      <input type="datetime-local" id="book" name="book">
    </form>

    Preview

    Select the Checkout Date and Time:

    Email

    email value is used when we want the user to enter the email address. It also provides a form validation if the user entered an invalid email address. Example

    <form>
      <label for="mail">Email:</label>
      <input type="email" id="mail" name="mail">
    </form>

    Preview

    Email:  

    File

    The file value is used when we want the user to upload a file from the system. Example

    <form>
      <label for="doc">Upload File:</label>
      <input type="file" id="doc" >
    </form>

    Preview

    Upload File:
    
    

    Month

    The month value defines an input block for month and year data. Example

    <form>
      <label for="month">Select Month:</label>
      <input type="month" id="month" name="month">
    </form>

    Preview

    Select Month:  

    Number

    The number value specifies an input block which accepts only numbers. Example

    <form>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
    </form>

    Ouptut

    Age:  

    Range

    The range value create a slider that signifies a range of number. By default, the range is 0 to 100, but it can be altered using min and max attributes. Example

    <form>
      <label for="vol">Between 0 to 500:</label>
      <input type="range" id="vol" name="vol" min="0" max="500">
    </form>

    Preview

    Between 0 to 500:

    Tel

    The tel value specifies an input block for phone and telephone number. Example

    <form>
       <label for="num">Phone Number:</label>
       <input type="tel" id="num" name="num"
       pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}">
    </form>

    Preview

    Phone Number:

    Time

    time value is used for time-related input. Example

    <form> 
     <label for="show">Select Time:</label>
     <input type="time" id="show" name="show" >
    </form>

    Preview

    Select Time: 

    URL

    url value specifies an input field that only accepts appropriate URL address. Example

    <form>
      <label for="web">Your Website: </label>
      <input type="url" id="web" name="web">
    </form>
    

    Preview

    Your Website: 

    Week

    The week value is used to select the week number from a year. Example

    <form>
      <label for="week">Select Week: </label>
      <input type="week" id="week" name="week">
    </form>

    Preview

    Select week: 

    Summary

    • The type attribute defines the input block type for form.
    • The text value specifies single-line text input.
    • The password value is used for password inputs.
    • radio value is used to select one option from multiple choices.
    • reset value can reset the form data.
    • date, week, and datetime-local values deal with date-related data.

    People are also reading: