Open In App
Related Articles

HTML | <input> type Attribute

Improve Article
Improve
Save Article
Save
Like Article
Like

The HTML <input> type Attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text.

Syntax:

<input type="value">

Attribute Values:

  • button: It is used to define a clickable Button in a Document. It is mostly used with the JavaScript to activate the script.
  • checkbox: It is used to define a checkbox field. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more option among all the limited choices.
  • color: It is used to define a color picker. The value should be a seven-character hexadecimal notation. Its default value is #000000(black).
  • date: It is used to define a date picker or control field. The value will be the year, month and day.
  • email: It is used to define a field for email address. The input email id is automatically validated to check the format of the email id is correct or not.
  • file: It is used to specify the file select field and add a button to choose a file for upload to the form.
  • hidden: It is used to define an input hidden field. A hidden field also includes those data that could not be seen or modified by the users when submitted the form. A hidden field only stores those database records that need to be updated when submitting the form.
  • image: It is used to define an image as the submit button.
  • month: It is used to specify the control of month and year field. The value must be in the format of “YYYY-MM”.
  • number: It is used to specify an input field for entering a number.
  • password: It is used to specify the password field of input tag. Password should be served over the HTTPS pages because it include the sensitive information of the user.
  • radio: It is used to define a Radio Button. Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created by using the “input” element with a type attribute having value as “radio”.
  • range: It is used to define control for a number entered by the user. It can set restrictions on unimportant number or value which will be entered by the user. Its default range from 0 to 100.
  • reset: It is used to defines a reset button. The reset button is used to reset all the form values to its initial values.
  • search: It is used to define a text field that entered a search string.
  • submit: It is used to define a submit button. It is used to submit all the user value to the form handler. The Form Handler is a server page that activates a script for processing all the input values.
  • tel: It is used to define a field that entering a user telephone Number.
  • text: It is used to define a single-line text field . The default width of the text field is 20 characters.
  • time: It is used to specify the entering time control field.
  • url: It is used to define a field that entered a URL. This input value is automatically validated before submitted the form.
  • week: It is used to define a week and a year control field.

Example:




<!DOCTYPE html> 
<html
  
<head
    <title
        HTML input type Attribute 
    </title
</head
      
<body style="text-align:center;"
  
    <h1 style="color:green;">GeeksforGeeks</h1
          
    <h3>HTML <input> type Attribute</h3
          
    <form action="#" method="get"
        Username: <input type="text" name="uname"
              
        <br><br
              
        Password: <input type="password" name="pwd"
              
        <br><br
              
        <button type="submit" value="submit"
            Submit 
        </button
              
        <button type="reset" value="reset"
            Reset 
        </button
    </form
</body
  
</html>


Output:

Supported Browsers: The browsers supported by HTML <input> type attribute are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 13 Jul, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials