HTML - <input> Tag

Quiz

HTML <input> Tag

The HTML <input> tag is used to specify input field. Input elements are essential in web development as they facilitate the collection and submission of user data within a <form> element.

Syntax

Following is the syntax of <input> tag −

<input type = ".."/>

Attributes

The HTML input tag supports Global and Event attributes of HTML. It also accepts specific attributes, which are listed bellow.

Attribute	Value	Description
accept	file_extension audio/* video/* image/* media_type	Defines a filter for the file types the user can select from the file input dialog box (only for type="file").
alt	text	Defines alternative text for images (only for type="image").
autocomplete	on off	Specifies whether an <input> element should have auto complete enabled.
autofocus	autofocus	Specifies whether that an <input> element should automatically receive focus when the page loads.
checked	checked	Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio").
dirname	inputname.dir	Specifies that the text direction will be submitted.
disabled	disabled	Specifies that an <input> element should be disabled.
form	form_id	Specifies the form to which the <input> element belongs.
formaction	URL	Specifies the URL of the file that will process the input control when the form is submitted (for type="submit" and type="image").
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image").
formmethod	get post	Specifies the HTTP method for sending data to the action URL (for type="submit" and type="image").
formnovalidate	formnovalidate	Specifies that form elements should not be validated when submitted.
formtarget	_blank _self _parent _top framename	Specifies where to display the response received after submitting the form (for type="submit" and type="image").
height	pixels	Specifies the height of an <input> element (only for type="image").
list	datalist_id	The element refers to a <datalist> element that contains pre-defined options for an <input> element.
max	number date	Defines the maximum value for an <input> element.
maxlength	number	Specifies the maximum number of characters allowed in an <input> element.
min	number date	Defines a minimum value for an <input> element.
minlength	number	Specifies the minimum number of characters required in an <input> element.
multiple	multiple	Specifies that a user can enter multiple values in an <input> element.
name	text	Defines the name of an <input> element.
pattern	regexp	Specifies a regular expression against which an <input> element's value is validated.
placeholder	text	Specifies a short hint that describes the expected value of an <input> element.
popovertarget	element_id	Specifies which popover element to invoke (only for type="button").
popovertargetaction	hide show toggle	Specifies what happens to the popover element when button is clicked (only for type="button").
readonly	readonly	Defines that an input field is read-only.
required	required	Specifies that an input field must be filled out before submitting the form.
size	number	Specifies the width, in characters, of an <input> element.
src	URL	Specifies the URL of the image to use as a submit button (only for type="image") .
step	number any	Specifies the interval between legal numbers in an input field.
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Defines the type <input> element to display.
value	text	Defines the value of an <input> element.
width	pixels	Specifies the width of an <input> element (only for type="image").

Example: Creating Input Field

In the following program, we use the HTML <input> tag to create an input field for user input. We use the type="text" attribute to accept input. The code below will generate an output consisting of the input field.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!--create input tag-->
   <form> Enter name: <input type="text" placeholder="Name">
   </form>
</body>
</html>

Example: Input Field Value Range

In another scenario, where we use the min and max attributes, manually entering a value outside the defines range will no be restricted.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Input</title>
</head>
<body>
   <!-- Numeric input field with min and max value-->
   <form> 
   <label>Enter number:</label>
   <input type="number" min="1" max="50" 
          placeholder="Number between 1 to 50">
   </form>
</body>
</html>

Example: Radio and Checkbox Buttons

In this program, we create input fields of type = "checkbox" and "radio" using the <input> tag within a form, allowing users to select values by checking the fields.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML input tag</title>
</head>

<body>
    <!-- Input type Checkbox and Radio Button -->
    <form>
        <label>Language:</label>
        <br> 
        HTML <input type="checkbox"> 
        CSS <input type="checkbox"> 
        JavaScript <input type="checkbox"> 
        ReactJS <input type="checkbox">
        <br> 
        <label>Rating:</label>
        <br> 
        Expert <input type="radio" name='rating' value='exoert'> 
        Intermediate <input type="radio" name='rating' value='intermediate'>
        Beginner <input type="radio" name='rating' value='beginner'>
   </form>
</body>
</html>

Example: Disabled Input Field

Let's consider the following example, where we are use the input tag with the disabled attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form> 
        Disabled field: <input type="text" value="Enter Your Name" disabled>
   </form>
</body>
</html>

Example: Date Input Field

Here is an example, where we use the input type="date" along with the required attribute.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input</title>
</head>
<body>
   <!--create input tag-->
   <form>
      <label>Select date:</label>
      <input type="date" value="Disabled" required>
      <button>Submit</button>
   </form>
</body>
</html>

Supported Browsers

Tag
input	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page