RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input below:

<input>: The HTML Input element - HTML: HyperText Markup Language

<input>: The HTML Input element

Baseline Widely available *

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

Try it

<label for="name">Name (4 to 8 characters):</label>

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

<input> types

How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is text.

The available types are as follows:

Type Description Basic Examples button A push button with no default behavior displaying the value of the value attribute, empty by default.

<input type="button" name="button" value="Button" />

checkbox A check box allowing single values to be selected/deselected.

<input type="checkbox" name="checkbox"/>

color A control for specifying a color; opening a color picker when active in supporting browsers.

<input type="color" name="color"/>

date A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

<input type="date" name="date"/>

datetime-local A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.

<input type="datetime-local" name="datetime-local"/>

email A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

<input type="email" name="email"/>

file A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

<input type="file" accept="image/*, text/*" name="file"/>

hidden A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden!

<input id="userId" name="userId" type="hidden" value="abc123">

image A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing.

<input type="image" name="image" src="" alt="image input"/>

month A control for entering a month and year, with no time zone.

<input type="month" name="month"/>

number A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.

<input type="number" name="number"/>

password A single-line text field whose value is obscured. Will alert user if site is not secure.

<input type="password" name="password"/>

radio A radio button, allowing a single value to be selected out of multiple choices with the same name value.

<input type="radio" name="radio"/>

range A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.

<input type="range" name="range" min="0" max="25"/>

reset A button that resets the contents of the form to default values. Not recommended.

<input type="reset" name="reset"/>

search A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.

<input type="search" name="search"/>

submit A button that submits the form.

<input type="submit" name="submit"/>

tel A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.

<input type="tel" name="tel"/>

text The default value. A single-line text field. Line-breaks are automatically removed from the input value.

<input type="text" name="text"/>

time A control for entering a time value with no time zone.

<input type="time" name="time"/>

url A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

<input type="url" name="url"/>

week A control for entering a date consisting of a week-year number and a week number with no time zone.

<input type="week" name="week"/>

Obsolete values datetime Deprecated A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.

<input type="datetime" name="datetime"/>

Attributes

The <input> element is so powerful because of its attributes; the type attribute, described with examples above, being the most important. Since every <input> element, regardless of type, is based on the HTMLInputElement interface, they technically share the exact same set of attributes. However, in reality, most attributes have an effect on only a specific subset of input types. In addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways.

This section provides a table listing all the attributes with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below. Attributes that are unique to particular input typesâor attributes which are common to all input types but have special behaviors when used on a given input typeâare instead documented on those types' pages.

Attributes for the <input> element include the global HTML attributes and additionally:

Attribute Type(s) Description accept file Hint for expected file type in file upload controls alt image alt attribute for the image type. Required for accessibility autocapitalize all except url, email, and password Controls automatic capitalization in inputted text. autocomplete all except checkbox, radio, and buttons Hint for form autofill feature capture file Media capture input method in file upload controls checked checkbox, radio Whether the command or control is checked dirname hidden, text, search, url, tel, email Name of form field to use for sending the element's directionality in form submission disabled all Whether the form control is disabled form all Associates the control with a form element formaction image, submit URL to use for form submission formenctype image, submit Form data set encoding type to use for form submission formmethod image, submit HTTP method to use for form submission formnovalidate image, submit Bypass form control validation for form submission formtarget image, submit Browsing context for form submission height image Same as height attribute for <img>; vertical dimension list all except hidden, password, checkbox, radio, and buttons Value of the id attribute of the <datalist> of autocomplete options max date, month, week, time, datetime-local, number, range Maximum value maxlength text, search, url, tel, email, password Maximum length (number of characters) of value min date, month, week, time, datetime-local, number, range Minimum value minlength text, search, url, tel, email, password Minimum length (number of characters) of value multiple email, file Boolean. Whether to allow multiple values name all Name of the form control. Submitted with the form as part of a name/value pair pattern text, search, url, tel, email, password Pattern the value must match to be valid placeholder text, search, url, tel, email, password, number Text that appears in the form control when it has no value set popovertarget button Designates an <input type="button"> as a control for a popover element popovertargetaction button Specifies the action that a popover control should perform readonly all except hidden, range, color, checkbox, radio, and buttons Boolean. The value is not editable required all except hidden, range, color, and buttons Boolean. A value is required or must be checked for the form to be submittable size text, search, url, tel, email, password Size of the control src image Same as src attribute for <img>; address of image resource step date, month, week, time, datetime-local, number, range Incremental values that are valid type all Type of form control value all except image The value of the control. When specified in the HTML, corresponds to the initial value width image Same as width attribute for <img>

A few additional non-standard attributes are listed following the descriptions of the standard attributes.

Individual attributes

accept

Valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control. See the file input type.

alt

Valid for the image button only, the alt attribute provides alternative text for the image, displaying the value of the attribute if the image src is missing or otherwise fails to load. See the image input type.

autocapitalize

Controls whether inputted text is automatically capitalized and, if so, in what manner. See the autocapitalize global attribute page for more information.

autocomplete

(Not a Boolean attribute!) The autocomplete attribute takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. A typical implementation of autocomplete recalls previous values entered in the same input field, but more complex forms of autocomplete can exist. For instance, a browser could integrate with a device's contacts list to autocomplete email addresses in an email input field. See autocomplete for permitted values.

The autocomplete attribute is valid on hidden, text, search, url, tel, email, date, month, week, time, datetime-local, number, range, color, and password. This attribute has no effect on input types that do not return numeric or text data, being valid for all input types except checkbox, radio, file, or any of the button types.

See the autocomplete attribute for additional information, including information on password security and how autocomplete is slightly different for hidden than for other input types.

autofocus

A Boolean attribute which, if present, indicates that the input should automatically have focus when the page has finished loading (or when the <dialog> containing the element has been displayed).

Note: An element with the autofocus attribute may gain focus before the DOMContentLoaded event is fired.

No more than one element in the document may have the autofocus attribute. If put on more than one element, the first one with the attribute receives focus.

The autofocus attribute cannot be used on inputs of type hidden, since hidden inputs cannot be focused.

Warning: Automatically focusing a form control can confuse visually-impaired people using screen-reading technology and people with cognitive impairments. When autofocus is assigned, screen-readers "teleport" their user to the form control without warning them beforehand.

Use careful consideration for accessibility when applying the autofocus attribute. Automatically focusing on a control can cause the page to scroll on load. The focus can also cause dynamic keyboards to display on some touch devices. While a screen reader will announce the label of the form control receiving focus, the screen reader will not announce anything before the label, and the sighted user on a small device will equally miss the context created by the preceding content.

capture

Introduced in the HTML Media Capture specification and valid for the file input type only, the capture attribute defines which mediaâmicrophone, video, or cameraâshould be used to capture a new file for upload with file upload control in supporting scenarios. See the file input type.

checked

Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates that the radio button is the currently selected one in the group of same-named radio buttons. If present on a checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)

Note: Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.

For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The default value for checkboxes and radio buttons is on.

dirname

Valid for hidden, text, search, url, tel, and email input types, the dirname attribute enables the submission of the directionality of the element. When included, the form control will submit with two name/value pairs: the first being the name and value, and the second being the value of the dirname attribute as the name, with a value of ltr or rtl as set by the browser.

<form action="page.html" method="post">
  <label>
    Fruit:
    <input type="text" name="fruit" dirname="fruit-dir" value="cherry" />
  </label>
  <input type="submit" />
</form>
<!-- page.html?fruit=cherry&fruit-dir=ltr -->

When the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit-dir=ltr to be sent. For more information, see the dirname attribute.

disabled

A Boolean attribute which, if present, indicates that the user should not be able to interact with the input. Disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use.

Specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted with the form.

Note: Although not required by the specification, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the autocomplete attribute to control this feature.

form

A string specifying the <form> element with which the input is associated (that is, its form owner). This string's value, if present, must match the id of a <form> element in the same document. If this attribute isn't specified, the <input> element is associated with the nearest containing form, if any.

The form attribute lets you place an input anywhere in the document but have it included with a form elsewhere in the document.

Note: An input can only be associated with one form.

formaction