HTML | <input> type Attribute

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.