HTML - <input> Tag

An essential form control for gathering user input on web sites is the HTML <input> tag. It can have different types and attributes, like text, passwords, checkboxes, and radio buttons. When a form is submitted, the name attribute identifies the input, while the id attribute enables CSS and JavaScript manipulation.

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

Following is the syntax for HTML <input> tag −

<input type = ".."/>

Specific Attributes

The HTML <select > tag also supports the following additional attributes −

S.No.	Attribute & Description
1	accept Specifies a comma-separated list of content types that the server accepts.
2	alt This specifies text to be used in case the browser/user agent can't render the input control.
3	autocomplete Specifies for enabling or disabling of autocomplete in <input> element
4	autofocus Specifies that <input> element should automatically get focus when the page loads
5	checked If type = "radio" or type = "checkbox" it will already be selected when the page loads.
6	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.
7	form Specifies one or more forms
8	formaction Specifies the URL of the file that will process the input control when the form is submitted

Example

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 text input.

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

When we run the above code, it will generate an output consisting of the input field displayed on the webpage.

Example

Considering the another scenario, where we are going to use the min and max attributes.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML input tag</title>
</head>
<body>
   <!--create input tag-->
   <form> Enter number: <input type="number" min="1" max="50" placeholder="Number between 1 to 50">
   </form>
</body>
</html>

On running the above code, the output window wil pop up displaying the input field used with min and max attribute on the webpage.

Example

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>
   <!--create input tag-->
   <form> Choose you know: <br> HTML <input type="checkbox"> CSS <input type="checkbox"> JavaScript <input type="checkbox"> Angular <input type="checkbox">
      <br> Gender: <br> Male <input type="radio" name='gender' value='male'> Female <input type="radio" name='gender' value='femlae'>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the checkboxes and radio buttons on the webpage.

Example

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 tag</title>
   <style>
      input {
         width: 300px;
         height: 30px;
         background-color: rgb(123, 7, 146);
         color: rgb(227, 210, 210)
      }
   </style>
</head>
<body>
   <!--create input tag-->
   <form> Disabled field: <input type="text" value="Disabled" disabled>
   </form>
</body>
</html>

On running the above code, the output window will pop up displaying the input field that is used with the disabled attribute on the webpage.

Example

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 tag</title>
   <style>
      input {
         width: 300px;
         height: 30px;
         background-color: rgb(100, 99, 103);
         color: rgb(245, 241, 241)
      }
   </style>
</head>
<body>
   <!--create input tag-->
   <form> Select date: <input type="date" value="Disabled" required>
      <button>Submit</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the inputfield used with required attribute. when the user tries to submit the form it throws an error.

html_tags_reference.htm