HTML input - how to use <input> tag

The HTML <input> tag is used to allow users to input form data. The input tag is used with a <form> tag. The <input> tag can be rendered in many ways depending the type attribute.

The <label> tag can be used to define names for the input tags.

Attributes

The input tag supports the global and event attributes.

accept
Defines the file type that the server accept. This is used only for input type file.
alt
Defines an alternate content if the image cannot be displayed. This is used only for input type image.
autocomplete
Defines whether autocomplete feature should be turned on or off. Acceptable values are
  • on
  • off
autofocus
Defines that the input ag will automatically get focus when the page loads. This may not be a good if the page contains a lot of text and the user will get lost while tabbing.
checked
Defines that the input tag will be automatically checked when the page loads. This works when input type is radio or checkbox.
dirname
Defines the direction of text for form submission
disabled
Defines whether the input tag should be disabled
form
Defines the id of the form the input tag belongs to. The input tag can belong to multiple form tags.
formaction
Defines the URL for form submission. This works when input type is submit or image.
formenctype
Defines how to encode the form data for submitting to the server.
The form data can be encoded in
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
formmethod
Defines the HTTP method to use for submitting the form data.
The form methods can be GET, POST, PUT, DELETE, etc. This works when input type is submit or image.
formnovalidate
Defines that the form should not be validated when submitted. This works when input type is submit or image.
formtarget
Defines where to display the response from the server after submitting the form. The response can be displayed in a new window or current window. This works when input type is submit or image.
height
Defines the height of element. This works when input type is image.
list
Defines to a datalist tag that contains predefined options used for suggestions.
max
Defines the maximum value for the input tag. This is used when input type is date or number.
maxlength
Defines the maximum number of characters for an input tag
min
Defines the minimum value for the input tag. This is used when input type is date or number.
multiple
Allows user to enter multiple values for the tag
name
Defines a name for the input tag
pattern
Defines a pattern / regular expression that is used to validate the input tag's user's input against
placeholder
Defines a hint for the input tag. The hint usually appears as text within the input control and gets hidden when the user starts typing on the control
readonly
Defines that the input field is readonly
required
Defines that the input field needs to be filled in before submitting the form.
size
Defines the width of the input control in terms of number of characters
src
Defines the URL of the submit button when an image is used for the submit button
step
Defines the interval in integers for the input control
type
Defines the type of the input field
value
Defines the value of the input control
width
Defines the width of the input control for image types

Examples:

<form> Single Line Text: <input type="text" id="t1" /><br /> Multiple Line Text: <textarea id="t2" rows="4" cols="20"></textarea><br /> Dropdown: <select id="t3"> <optgroup label="Countries"> <option value="India">India</option> <option value="China">China</option> </optgroup> </select><br /> <input type="submit" value="Submit" /> </form>

Related HTML tags

The form tag is usually used with the following tags. The various tags basically allows users to submit form data using different fields

Useful Links