<input> tag

HTML <input> tag

The <input> tag is an input field where user can give their details in the given form.

<input type=”value”>


  First Name: <input type="text" name="firstname"/>
  Last Name: <input type="text" name="lastname"/> 

CSS Default Value


How Browser will display


Difference between HTML4.01, XHTML and HTML5

<input> tag does not have an End tag <input> tag should have an End tag as - <input ... /> The align attribute is deprecated in HTML5. HTML5 also contains new attributes

Attributes used with <input> tag

Attribute Description
accept Using this attribute, the server will decide what type of input files to accept from the user. The values can be file_extension, media_type, image, audio and video.
alt To set an alternative text to the user when the browser is not able to load the input image.
autofocus This automatically focuses an input field when the browser loads.To define this, code "autofocus" along with the <input> tag.
autocomplete This attribute assignes a boolean value of either on or off. The 'On' will enable the autocomplete feature on the input element while the value of 'off' will disable this feature. To enable this, simply code autocomplete="on".
checked It describes an element oor menuitem like Checkbox or radio button to be pre selected once the page loads. To define this, simply code "checked" along with the <input> tag.
dirname To submit the text direction of the input field when the user submits the form. This takes the value as inputname.dir.
disabled To disable an input field so that the user cannot edit it. This takes a value of disabled.
form The form attribute defines one or more forms for the elements belong to using a form_id.
formaction For input type="submit" or input type="image", this sets a path/URL which links another page for th form. One the user subist the form, this formaction attribute sends the user data to this URL to process the input.
formenctype For the Input type="submit" or Input type="image" ,this attribute defines how to encode the form data before sending it to the server. The method="post" uses this. It can accept these values -

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
  • .
    formmethod For the Input type="submit" or Input type="image" ,this attribute defines whether to use the HTTP get method or the HTTP post method while sending the data from the form.
    formnovalidate It tells the browser not to validate the form when the user sbmits it. It is added in HTML5.
    formtarget For the Input type="submit" or Input type="image" ,this attribute decides where the user will see the response or message once he/she submits the form. It can take any one ot these values -

  • _blank - This opens the response in a new window/tab

  • _self- The shows the response in the same window/session

  • _parent - Opens the response in the parent tab

  • _top - Display the response in the full screen.
  • height Describes the height of the input element in pixels.
    list Shows a datalist element where a pre-defined option is specified in <input> element. This is done using "datalist_id".
    max Represents the maximum value for the input field. The maximum value can be a number or date.
    maxlength To define the maximum number of characters an input field is alllowted to take.
    minlength Describes the minimum number of text to be given in element.
    min Represents the minimum value for the input field. The minimum value can be a number or date.
    multiple It informs the user that they can enter multiple values for that input field. You need to simply code the attribute multiple along wth the <input> tag.
    name To give a name for an input element.
    patteren This describes a regular expression. This regular expression checks/validates the input data which the user has entered from the <input> element. It accepts a value for a regular expression typically called as regexp.
    placeholder This gives a small hint to the user using which the user can understand what type of value to enter in the input field.
    readonly It marks an input field element as readonly so that the user cannot edit it.
    required If you code this attribute on an input attribute, then it marks that input element as a mandatory field and the user must enter value in that field.
    size It sets the width area for an input element that is visible to the user. You can define this width using a numeric value such as 10, 12,15,30 etc.
    src Defines the address of the source file using a URL.
    step To define the list of legal numbers for the input element. The form will accept any one of these legal numbers.

    For Example -
    If you code step="2" on the <input> tag, then the user can enter a value which must be multiple of 2 such as 0, 2, 4, 6, 8 etc. It will also accept a negative number such as -2, -4, -6 etc.
    type To define the type of input element.

    The most comoom input types are -
  • button
  • checkbox
  • email
  • image
  • number
  • password
  • radio
  • search
  • submit
  • tel
  • text

  • The other less used input types are -
  • color
  • date
  • datetime-local
  • file
  • hidden
  • month
  • range
  • reset
  • time
  • url
  • week
  • usemap It describes that image have a client-side image-map.
    value Describes the value of the input element in form of text.
    width Describes the width of the input element in pixels.
    align To align the input image to top, right, bottom, left or center.
    (HTML5 does not support this attribute when it is used with the <input> tag).

    Global Attributes

    The <input> tag supports Global attributes.

    Event Attributes

    The <input> tag supports Event attributes.

    Supporting Browsers

    supporting-browsers for tags

    Related Tags

    <label>, <form>, <fieldset>, <legend>, <textarea>, <select>, <option>, <optgroup>, <button>, <datalist>  and <keygen> tags.

    Tutorials for all brains!