View video tutorial

HTML <input> Tag

HTML

The <input> tag specifies an input field.

HTML <input> Tag


The <input> element is used to create interactive controls to set user information.

The functions and view of the <input> element vary significantly depending on the value of its type attribute.

The <input> element is the most important element for storing data and submitting data to the server using the form component.

The different types of inputs are as follows

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel"><
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Note: Use the <label> tag to define labels for input types. The value of the 'for' attribute of the label element must be the same as the value of the corresponding input id.

Example

<form action="actionpage_name">
    <table>
      <tr>
        <td><label for="fname">First name:</label></td>
        <td><input type="text" id="fname" name="fname"></td>
      </tr>
      <tr>
        <td><label for="lname">Last name:</label></td>
        <td><input type="text" id="lname" name="lname"></td>
      </tr>
      <tr>
        <td><label for="email">Email:</label></td>
        <td><input type="email" id="email" name="email"></td>
      </tr>
      <tr>
        <td><label for="dob">Date of Birth:</label></td>
        <td><input type="date" id="dob" name="dob"></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit"></td>
      </tr>        
    </table>
  </form>
Try it Now »

Click on the "Try it Now" button to see how it works.


Element Attributes

Attribute Value Description
accept file_extension
audio/*
video/*
image/*
media_type
This indicates for the expected file type in the file upload control (only for type="file").
alt text This specifies an alternate text for images (only for type="image").
autocomplete on
off
Specifies whether a input element should have autocomplete enabled.
autofocus autofocus Specifies that a input element should get focus automatically when the page is loaded.
checked checked It specifies whether the command or control is checked.
dirname inputname.dir It specifies the text direction will be submitted
disabled disabled Specifies that a input element should be disabled.
form form_id It specifies the form the input element belongs to.
formaction url It specifies URL to use for form submission.
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how form-data should be encoded when submitted to server (type = "submit" and type = "image").
formmethod get
post
This Defines HTTP method for sending data to action URL (type = "submit" and type = "image").
formnovalidate formnovalidate This specifies that form elements should not be validated at the time of submission.
formtarget _blank
_self
_parent
_top
filename
This specifies where to display the response after submitting the form (for type="submit" and type="image").
height pixels This specifies the height of an input element.
list datalist_id This refers to a datalist element to use in input element.
max number
date
This specifies the maximum value for the input element.
maxlength number This specifies the maximum number of characters allowed in the input element.
min number
date
This specifies the minimum value for the input element.
minlength number This specifies the maximum number of characters allowed in the input element.
multiple multiple This specifies that a user can enter multiple values ​​in a input element.
name text This specifies the name of an element.
pattern regexp This specifies a regular expression against which the value of a input element is checked.
placeholder text This specifies a short hint that describes the expected value.
readonly readonly This specifies that an input field is read-only.
required required This specifies that an input field must be filled in before submitting the form.
size number This specifies the size of the control in characters.
src url This specifies the URL of the image to use as a submission button (for type = "image only").
step number
any
This specifies the incremental values which are valid.
type button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
This specifies the type of the input element.
value text This specifies the value of the input element.
width pixels This specifies the width of an input element (only for type="image").

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<input type="checkbox" name="html" value="HTML">
<label for="html"> I am interested in HTML</label><br>
<input type="checkbox" name="css" value="CSS">
<label for="css"> I am interested in CSS</label><br>
<input type="checkbox" name="js" value="JavaScript">
<label for="js"> I am interested in JavaScript</label><br>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<input type="radio" id="html" name="runningsubject" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="runningsubject" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="js" name="runningsubject" value="JavaScript">
<label for="js">JavaScript</label><br>
Try it Now »

Click on the "Try it Now" button to see how it works.


Example

<form action="tryithtml_elements_input_tag04_action01.jsp" method="GET">
    <fieldset>
        <legend>I am learning:</legend>
        <input type="radio" id="html" name="runningsubject" value="HTML">
        <label for="html">HTML</label><br>
        <input type="radio" id="css" name="runningsubject" value="CSS">
        <label for="css">CSS</label><br>
        <input type="radio" id="js" name="runningsubject" value="JavaScript">
        <label for="js">JavaScript</label><br>
    </fieldset>
    <fieldset>
        <legend>Interested subject:</legend>
        <input type="checkbox" name="html" value="HTML">
        <label for="html"> I am interested in HTML</label><br>
        <input type="checkbox" name="css" value="CSS">
        <label for="css"> I am interested in CSS</label><br>
        <input type="checkbox" name="js" value="JavaScript">
        <label for="js"> I am interested in JavaScript</label><br>
    </fieldset>
    <input type="submit" value="Submit">
</form>
Try it Now »

Click on the "Try it Now" button to see how it works.