HTML - <input> Tag

---

---

HTML <input> tag is used to spcify the input field. Input elements are an essential part of web development because they facilitate the collection and submission of user data when contained within a <form> element.

Syntax

<input type = ".."/>

Attribute

HTML input tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.

Attribute	Value	Description
accept	file_extension audio/* video/* image/* media_type	Defines a filter for what file types the user can pick from the file input dialog box (only for type="file").
alt	text	Defines an alternate text for images (only for type="image").
autocomplete	on off	Defines whether an <input> element should have autocomplete enabled.
autofocus	autofocus	Defines that an <input> element should automatically get focus when the page loads.
checked	checked	Defines that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio").
dirname	inputname.dir	Defines that the text direction will be submitted.
disabled	disabled	Defines that an <input> element should be disabled.
form	form_id	Defines the form the <input> element belongs to.
formaction	URL	Defines 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	Defines how the form-data should be encoded when submitting it to the server (for type="submit" and type="image").
formmethod	get post	Defines the HTTP method for sending data to the action URL (for type="submit" and type="image").
formnovalidate	formnovalidate	Defines that form elements should not be validated when submitted.
formtarget	_blank _self _parent _top framename	Defines where to display the response that is received after submitting the form (for type="submit" and type="image").
height	pixels	Defines the height of an <input> element (only for type="image").
list	datalist_id	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	Defines the maximum number of characters allowed in an <input> element.
min	number date	Defines a minimum value for an <input> element.
minlength	number	Defines the minimum number of characters required in an <input> element.
multiple	multiple	Defines that a user can enter more than one value in an <input> element.
name	text	Defines the name of an <input> element.
pattern	regexp	Defines a regular expression that an <input> element's value is checked against.
placeholder	text	Defines a short hint that describes the expected value of an <input> element.
popovertarget	element_id	Defines which popover element to invoke (only for type="button").
popovertargetaction	hide show toggle	Defines what happens to the popover element when you click the button (only for type="button").
readonly	readonly	Defines that an input field is read-only.
required	required	Defines that an input field must be filled out before submitting the form.
size	number	Defines the width, in characters, of an <input> element.
src	URL	Defines the URL of the image to use as a submit button (only for type="image") .
step	number any	Defines 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	Defines the width of an <input> element (only for type="image").

Examples of HTML input Tag

Bellow examples will illustrate the usage of input tag, where, when and how to use it to on a form. HTML <input> tag creates input field but the type attribute playes the main role in an input filed.

Creating Input field

In the following program, we are using HTML <input> tag to create an input field to take input from users. We are using the type="text" attribute to accept input. Bellow code 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>

Value range on input field

Considering the another scenario, where we are going to use the min and max attributes. If you put the value manualy then the define rang will not work.

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

Radio and Checkbox button using input Tag

In this program, we are creating input fields type = "checkbox" and "radio" using the <input> tag within the form to allow users to select the value 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:</lable>
        <br> 
        HTML <input type="checkbox"> 
        CSS <input type="checkbox"> 
        JavaScript <input type="checkbox"> 
        ReactJS <input type="checkbox">
        <br> 
        <label>Rating:</lable>
        <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>

Disabled input field

Let's look at the following example, where we are going to 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>

Date input field

Following is the example, where we are going to use the input type="date" along with a 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