HTML <input> Tag

Description

The <input> HTML element is one of the versatile elements of the form and allows you to create different parts of the interface and provide user interaction. Mainly <input> is intended for creating text fields, various buttons, radio buttons and check boxes.
The main <input> attribute that defines the type of element is type. It allows you to specify the following form elements: text field ( text ), password field ( password ), radio button, checkbox , hidden field, button, button for submitting a form, submit button to clear the form ( reset ), a field for sending a file ( file ), a button with an image ( image ), etc. For each element there is a list of attributes that determine its type and characteristics. In addition, more than a dozen new elements have been added to HTML5.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: None. It is an empty element.
Start/End Tags: Start tag: required, End tag: forbidden

Example

HTML

<form action="" method="post">

  First name: <input type="text" name="first_name">

  Last name: <input type="text" name="last_name">

  <input type="submit" value="Submit">

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

</form>

Result

Attributes

Attribute	Definition
type	Specifies the type of control. Possible values: text password checkbox radio submit reset file hidden image button
name	Assigns a name to the input control.
value	Specifies the value of an input element
size	Specifies the width of an input field
maxlength	Specifies the maximum length (in characters) of an input field (for type="text" or type="password")
checked	If type="radio" or type="checkbox" it will already be selected when the page loads.
src	If type="image", this attribute specifies the location of the image.
align	For alignment (left, center, right, justify).
alt	Alternate text. This specifies text to be used in case the browser/user agent can't render the input control.
accept	Specifies a comma-separated list of content types that the server accepts.
readonly	Sets the input control to read-only - it won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls.
disabled	Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

Global Attributes

The <input> tag also supports the Global Attributes in HTML5

Event Attributes

The <input> tag also supports the Event Attributes in HTML5

Browser Support

Desktop

?	?	?	?	?	?

Tablets / Mobile

?	?	?	?	?	?

Last updated by CSSPortal on: 6th December 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu