<input>

Introduction

The input field element represents a typed data field, usually with a form control to allow the user to edit the data. The <input> and </input> tags define an input box, whether a text box, password box, check box, radio button, submit button or reset button. Forms consist of text and form controls. Form controls allow the input of user data and the recognition of specific user events. Controls include text boxes, checkboxes, radio buttons, submit and reset controls, buttons, selection boxes and text areas. A control possesses a name and a value.

Attributes

Attributes are dependant upon input type.

accept

The accept attribute specified to provide user agents with a hint of what file types the server will be able to accept.

alt

The alt attribute provides the textual label for the alternative button for users and user agents who cannot use the image.

autocomplete

The autocomplete attribute determines if the data is considered sensitive and if autocomplete will be used. The following attribute values are supported.

  • on
  • off
  • default

Example

The following code shows the HTML for a text box, with an autocomplete attribute.

<input type="text" autocomplete="off" value="Hello Everyone!"> </input>

autofocus

The autofocus attribute determines if the input will get focus when a page loads. The following attribute values are supported.

  • autofocus

checked

The checked attribute determines if the input will be checked by default. The following attribute values are supported.

  • checked

disabled

The disabled attribute prevents the input from being pressed. The following attribute values are supported.

  • disabled

Example

The following code shows the HTML for a disabled text box.

<input type="text" disabled="true" value="Hello Everyone!"> </input>

form

The form attribute used to explicitly associate the button element with its form owner form.

action

The action attribute URL that specifies a form processing agent formenctype element represents specifies the content type used to submit the form to the server. The following attribute values are supported.

  • application/x-wwwform-urlencoded
  • multipart/form-data
  • text/plain

formmethod

The formmethod attribute which HTTP method will be used to submit the forms data. The following attribute values are supported.

  • get
  • post
  • put
  • delete

formnovalidate

The formnovalidate attribute indicate whether the form is to be validated during submission. The following attribute values are supported.

  • formnovalidate

formtarget

The formtarget attribute gives the target when the form is submitted. The following attribute values are supported.

  • _blank
  • _parent
  • _self
  • _top

height

The height attribute height of the input in pixels.

list

The list attribute used to identify an element represents that lists predefined options suggested to the user.

Example

The following code shows the HTML for an input element.

<input list="trees" name="tree" /> <datalist id="trees"> <option value="Ash"> <option value="Beech"> <option value="Elm"> <option value="Dogwood"> <option value="Elm"> </datalist>

max

The max attribute indicate the maximum value.

min

The min attribute indicate the minimum value.

maxlength

The maxlength attribute controls the maxlength of the input to a control.

multiple

The multiple attribute indicates whether the user is to be allowed to specify more than one value. The following attribute values are supported.

  • multiple

name

The name attribute elements name.

pattern

The pattern attribute specifies a regular expression against which the control's value is to be checked.

placeholder

The placeholder attribute a short hint intended to aid the user with data entry.

Example

The following code shows the HTML for a text box.

<input type="text" placeholder="Please enter some text."> </input>

range

The range attribute determines if the control is range. The following attribute values are supported.

  • min
  • max

Example

The following code shows the HTML for a range text box.

<input type="range" min="1" max="10"></input>

readonly

The readonly attribute determines if the control is readonly. The following attribute values are supported.

  • readonly

Example

The following code shows the HTML for a read only text box.

<input type="text" readonly="true" value="Hello Everyone!"></input>

required

The required attribute determines if the input is required before the form submits. The following attribute values are supported.

  • required

size

The size attribute gives the number of characters that, in a visual rendering, the user agent is to allow the user to see while editing.

src

The src attribute URL to an image (image button.

step

The step attribute indicates the granularity that is expected (and required) of the value.

Meter

The meter control can indicate a numeric value.

Example

The following code shows the HTML for a meter control.

<meter min=0 max=20 value=12>12cm</meter>
12cm

Example

The following code shows the HTML for a meter control.

<input type="range">