<input>

HTML <input> Tag

The <input> tag is used within the <form> element and defines fields for user input. The type of the field (text, checkbox, radio button, password field, etc.) is determined by the value of the type attribute. The tag doesn’t have a text content, it contains only attributes.

It belongs to a tag group called form elements.

To associate text with a specific element, we use the <label> tag which sets a text label for it.

Syntax

Syntax

The <input> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<input>) tag must be closed (<input/>).

Example of the HTML <input> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="get">
      <input type="email" name="user_email" placeholder="Enter your email" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Example of the HTML <input> tag with the HTML <label> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit" method="get">
      <label>Your Name:</label>
      <input type="text" name="first_name" />
      <br/>
      <br/>
      <label>Your Surname:</label>
      <input type="text" name="last_name" />
      <br/>
      <br/>
      <label>Enter Your E-Mail:</label>
      <input type="email" name="user_email" />
      <br/>
      <br/>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Result

Attributes

Attributes

The main attribute that determines the type of input field is type. If the attribute is missing, the default value is “text”.

AttributeValueDescription
acceptaudio/*video/*image/*MIME_typeSpecifies the types of files you can send via the file upload field.
(Used with the type=“file”).
alignleft righttopmiddlebottomDefines the alignment type of the image.
(Used only with images).
Not supported in HTML5.
alttextDefines the alternate text for the image.
(Used only with images).
autocompleteon offEnables/disables autocomplete.
New attribute in HTML5.
autofocusautofocusIndicates that the form field should receive focus after the page loads.
New attribute in HTML5.
checkedcheckedIndicates that the element should be preselected when the page loads.
(Used only for <input type = “checkbox”> and <input type = “radio”>).
disableddisabledIndicates that the element must be not available for user interaction.
formform_idIndicates the form (specified by the <form> element) of the control element. The value is the form identifier (id) in the same document.
New attribute in HTML5.
formactionURLSpecifies the address where the form data will be sent when clicking on the button.
(Used only for <input type = “image”> and <input type = “submit”>).
formenctypeapplication/x-www-form-urlencoded multipart/form-datatext/plainDetermines how to encode the form data before sending it to the server. (Used only for <input type = “image”> and <input type = “submit”>)
All symbols are encoded before being sent (default value).
Symbols aren’t being encoded.
Spaces are replaced with the “+” sign, but symbols aren’t encoded.
formmethodIndicates HTTP Request Method, which will be used when sending the form data. (Used only for <input type = “image”> and <input type = “submit”>)
getIt sends form data in the address bar (“name = value”), which is added to the page URL after the question mark and are separated by an ampersand (&).
(http://example.ru/doc/?name=Ivan&password=vanya)
postThe browser connects to the server and sends the data for processing.
formnovalidateformnovalidateIndicates, that it is not necessary to check the data for correctness. (Used only for <input type = “submit”>).
formtargetSpecifies, where to display the response after submitting the form. (Used only for <input type = “image”> and <input type = “submit”>).
-blankOpens the response in a new window.
_selfOpens the response in the current window.
_parentOpens the response in the parent frame.
_topOpens the response to the full width of the window.
heightpixelsDefines the height of the element (Used only for <input type = “image”>).
inputmodeverbatimlatinlatin-namelatin-prosefull-width-latinkanakatakananumerictelemailurlDefines the keyboard layout.
listdatalist_idDefines a list of options from which the user can choose. The value for the attribute is the id of the <datalist> element.
maxnumberdateSets the upper value for entering a number or a date.
maxlengthnumberDefines the maximal number of symbols, that the user can input.
minnumberdateSets the minimal value for entering a number or a date.
multiplemultipleIndicates that the user can input more than one value in the element (only for <input type = “file”> and <input type = “email”>).
nametextDefines the name of the element. (Used for form identification).
patternregexpSpecifies a regular expression,
according to which you need to enter and verify data in the form field.
(Only for control elements text, search, tel, url, email and password).
placeholdertextDefines a short prompt that describes the expected value for the input field. The user sees a hint in the input field. It disappears when the user starts entering data or when the field receives focus.
readonlyreadonlyDefines that the input field is enabled only for reading. The user cannot make changes.
requiredrequiredIndicates that the input field must be completed before submitting the form.
selectionDirectionforwardbackwardnoneDefines the direction of the selection.
sizenumberDefines the size of the text field. (Only for text, search, tel, url, email and password).
Default number of symbols in 20.
srcURLIndicates the path to the image that is used as the “send” button. (Only used for <input type = “image”>).
stepnumberSets the increment step (increment value) for numeric fields.
Used with the min and max attributes which define the minimal and maximal values.
typebutton
        checkbox
        
        color
        
        date
        
        datetime
        
        datetime-local
        
        email
        
        file
        
        hidden
        
        image
        
        month
        
        number
        
        password
        
        radio
        
        range
        
        reset
        
        search
        
        submit
        
        tel
        
        text
        
        time
        
        url
        
        week|Defines the type of the input field.|

|value|text|Defines the value of the element.| |width|width|Defines the width of the element (only for <input type = “image”>).|

The <input> tag also supports the Global attributes and the Event Attributes.

Values of the type attribute

Values of the type attribute

ValueDescription
buttonDefines the active button.
checkboxCheck the boxes (the user can select more than one of the options).
colorSpecifies a color palette (user can select color values in hexadecimal).
dateDefines the input field for calendar date.
datetimeDefines the input field for date and time.
datetime-localDefines the input field for date and time without a time zone.
e-mailDefines the input field for e-mail.
fileSets the control with the Browse button, clicking on which you can select and load the file.
hiddenDefines a hidden input field. It is not visible to the user.
imageIndicates that an image is used instead of a button to send data to the server. The path to the image is indicated by the src attribute. The alt attribute can also be used to specify alternative text, the height and width attributes to specify the height and width of the image.
monthDefines the field of selecting a month, after which the data will be displayed as year-month (for example: 2018-07).
numberDefines the input field for numbers.
passwordDefines a field for entering a password (the entered characters are displayed as asterisks, dots or other characters).
radioCreates radio button (when choosing one radio button all others will be disabled).
rangeCreates a slider to select numbers in the specified range. The default range is from 0 to 100. The range of numbers is specified by the min and max attributes.
resetDefines a button for resetting information.
searchCreates a text field for search.
submitCreates a button of submitting the form data (“submit” button).
textCreates a single line text field.
timeSpecifies a numeric field for entering time in a 24-hour format (for example, 13:45).
urlCreates an input field for URL.
weekCreates a field for selecting the week, after which the data will be displayed as year-week (for example: 2018-W25).

How to style <input> tag? Common properties to alter the visual weight/emphasis/size of text in <input> tag:

CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit. CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element. CSS font-size property sets the size of the font. CSS font-weight property defines whether the font should be bold or thick. CSS text-transform property controls text case and capitalization. CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.

Coloring text in <input> tag:

CSS color property describes the color of the text content and text decorations. CSS background-color property sets the background color of an element.

Text layout styles for <input> tag:

CSS text-indent property specifies the indentation of the first line in a text block. CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user. CSS white-space property specifies how white-space inside an element is handled. CSS word-break property specifies where the lines should be broken.

Other properties worth looking at for <input> tag:

CSS text-shadow property adds shadow to text. CSS text-align-last property sets the alignment of the last line of the text. CSS line-height property specifies the height of a line. CSS letter-spacing property defines the spaces between letters/characters in a text. CSS word-spacing property sets the spacing between words.



请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部