HTML <input> Tag
Today we learn the most important Input Tags. We will see in the input tag how many properties are used and how many types are there. Let’s see some examples.
Table of Contents
HTML Input All Type here
input varieties
How an input
works vary significantly betting on the worth of its kind attribute, thus the various varieties square measure coated in their own separate reference pages. If this attribute isn’t specific, the default kind adopted is text.
The obtainable varieties square measure as follows:
| Type | Description | Basic Examples with output |
|---|---|---|
| button | A push-button with no default behavior displaying the worth of the worth attribute, empty by default. |
< input type=”button” name=”button” /> |
| checkbox | A check box permitting single values to be selected/deselected. |
< input type=”checkbox” name=”checkbox”/> |
| color | A control for specifying a color; gap a color picker once active in supporting browsers. |
< input type=”color” name=”color”/> |
| date | A control for getting into a date (year, month, and day, with no time). Opens a date picker or numeric wheels for a year, month, the day once active in supporting browsers. |
< input type=”date” name=”date”/> |
| datetime-local | A control for getting into a date and time, with no zone. Opens a date picker or numeric wheels for date- and time components once active in supporting browsers. |
< input type=”datetime-local” name=”datetime-local”/> |
| A field for redaction Associate in Nursing email address. appears like text input, however, has validation parameters and a relevant keyboard in supporting browsers and devices with dynamic keyboards. |
< input type=”email” name=”email”/> |
|
| file | A control that lets the user choose a file. Use the settle for attribute to outline the categories of files that the management will choose. |
< input type=”file” accept=”image/*, text/*” name=”file”/> |
| hidden | A control that’s not displayed however whose price is submitted to the server. there’s AN example within the next column, however, it’s hidden! |
< input id=”userId” name=”userId” type=”hidden” value=”abc123″> |
| image | A graphical submit button. Displays a picture outlined by the src attribute. The angular position attribute displays if the image src is missing. |
< input type=”image” name=”image” src=”” alt=”image input”/> |
| month | A control for getting into a month and year, with no zone. |
< input type=”month” name=”month”/> |
| number | A control for getting into the variety. Displays a spinner and adds default validation once supported. Displays a numeric keyboard in some devices with dynamic keypads. |
< input type=”number” name=”number”/> |
| password | A single-line text field whose price is obscured. can alert users if the website isn’t secure. |
< input type=”password” name=”password”/> |
| radio | A radio button, permitting one price to be designated out of multiple decisions with identical name price. |
< input type=”radio” name=”radio”/> |
| range | A control for coming into variety whose precise worth isn’t vital. Displays as a spread contraption defaulting to the center worth. employed in conjunction with min and soap to outline the variety of acceptable values. |
< input type=”range” name=”range” min=”0″ max=”25″/> |
| reset | A button that resets the contents of the shape to default values. Not counseled. |
< input type=”reset” name=”reset”/> |
| search | A single-line text field for coming into search strings. Line-breaks square measure mechanically far away from the input worth. could embody a delete icon in supporting browsers which will be accustomed clear the sector. Displays a hunting icon rather than enter key on some devices with dynamic keypads. |
< input type=”search” name=”search”/> |
| submit | A button that submits the shape. |
< input type=”submit” name=”submit”/> |
| tel | A control for coming into a sign. Displays a phone input device in some devices with dynamic keypads. |
< input type=”tel” name=”tel”/> |
| text | The default worth. A single-line text field. Line-breaks area unit mechanically far from the input worth. |
< input type=”text” name=”text”/> |
| time | A control for coming into a continuance with no geographical zone. |
< input type=”time” name=”time”/> |
| url | A field for coming into an address. seems like text input, however, has validation parameters and a relevant keyboard in supporting browsers and devices with dynamic keyboards. |
< input type=”url” name=”url”/> |
| week | A control for coming into a date consisting of per week-year range and a week range with no geographical zone. |
< input type=”week” name=”week”/> |
| Obsolete values | ||
| datetime | an effect for coming into a date and time (hour, minute, second, and fraction of a second) supported UT1 geographical zone. |
< input type=”datetime” name=”datetime”/> |
Attributes
The input tag part is therefore powerful as a result of its attributes; the sort attribute delineated with examples higher than, being the foremost vital. Since each input part, notwithstanding sort, is predicated on the HTMLInputElement interface, they technically share the precise same set of attributes. However, in reality, most attributes have a bearing on solely a selected set of input sorts. additionally, the method some attributes impact Associate in Nursing input depends on the input sort, impacting totally different input sorts in several ways in which.
This section provides a table listing all the attributes with a quick description. This table is followed by an inventory describing every attribute in larger detail, alongside the input sorts they’re related to. people who area unit common to most or all input sorts area unit outlined in larger detail below. Attributes that area unit distinctive to explicit input sorts—or attributes that area unit common to all or any input types, however, have special behaviors once used on a given input type—are instead documented on those types’ pages. This part includes the world attributes. Those with further importance because it relates to the input area unit highlighted.
Attributes with Description
- Attributes with Description
- type: the kind attribute is employed to specify the kind of the input part. Its default price is text.
- value: the worth attribute is employed to specify the worth of the input part.
- placeholder: Placeholder attribute is employed to specify a hint that describes the expectation of associate input field.
- name: The name attribute is employed to specify the name of the input part.
- alt: The EL attribute is employed to produce alternate text for the user if they can not read the image.
- autofocus: optical device attribute specifies that a component ought to mechanically get focus once the page hundreds.
- checked: The checked attribute specifies that a component ought to be pre-selected (checked) once the page hundreds. The checked attribute is used with < input type=”checkbox” > and < input type=”radio” >.
- disabled: The disabled attribute specifies that the part ought to be disabled. The disabled attribute is set to stay a user from mistreatment the < input > part till another condition has been met.
- form: the shape attribute is employed to specify one or a lot of forms to that the input part belongs.
- max : The gamma-hydroxybutyrate attribute is employed to specify {the gamma hydroxybutyrateimum|the utmost|the most} price for associate < input > part.
- required: the specified attribute specifies that the associate input field should be stuffed out before submitting the shape.
- readonly: The read-only attribute specifies that the associate input field is read-only. A read-only input field can’t be changed. A kind can still submit associate input field that’s read-only, however won’t submit associate input field that’s disabled.
- accept: This property is employed to specifies the kinds of files that the server accepts.
- align: This property is employed to specifies the alignment of a picture input.
- autocomplete: This property is employed to specifies whether or not the associate input part ought to have to autocomplete enabled.
- dirname: This property is employed to specifies that the text direction is submitted.
- formation: This property is employed to specifies the computer address of the file which will method the input management once the shape is submitted (for type=” submit” and type=” image”).
- former type: This property is employed to specifies however the form-data ought to be encoded once submitting it to the server (for type=” submit” and type=” image”)
- form method: This property is employed to defines the HTTP methodology for causing knowledge to the action computer address (for type=” submit” and type=” image”)
- form validate: This property is employed to defines that kind of parts shouldn’t be valid once submitted
- form target: This property is employed to specifies wherever to show the response that’s received once submitting the shape (for type=” submit” and type=” image”)
- height: This property is employed to specifies the peak of the input associate part (only for type=” image”)
- list: This property is utilized to alludes to an input component that contains pre-characterized choices for an input component.
- max length: This property is utilized to indicates the greatest number of characters permitted in an input component
- min: This property is utilized to indicates a base incentive for an input component.
- numerous: This property is utilized to indicates that a client can enter more than one worth in an input component
- design: This property is utilized to indicates an ordinary articulation that an input component’s worth is checked against
- size: This property is utilized to indicates the width, in characters, of an input component
- src: This property is utilized to indicates the URL of the picture to use as a submit button (just for type=”image”)
- Step: This property is utilized to indicates the lawful number spans for an info field.
Attributes with Example and Output
Type Attribute
The HTML <input> type Attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>type attribute</title>
</head>
<body>
<h1>Myprograming.com</h1>
<form>
<label>Username :-</label>
<input type="text" name="name">
<br><br>
<label>Password :-</label>
<input type="text" name="pass">
<br><br>
<input type="submit" name="submit">
</form>
</body>
</html>Output:-
Myprograming.com
Value Attribute
The worth quality in HTML is utilized to indicate the worth of the component with which it is utilized. It has diverse importance for various HTML components.
Use: It can be utilized with the accompanying components: <input>,<meter> ,<li> ,<option> ,<progress> and <param> .
<input> : When the worth quality is available, it indicates the underlying worth of the information component.
- It has alternate importance for various info type:
- At the point when present in “button”, “reset” and “submit” it indicates the content on the catch.
- At the point when present in “text”, “secret phrase” and “covered up” it indicates the underlying worth of the info field.
- At the point when present in “checkbox”, “radio” and “picture” it indicates the worth related with the information.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>value attribute</title>
</head>
<body>
<h1>Myprograming.com</h1>
<form>
<label>Username :-</label>
<input type="text" name="name" value="Myprograming">
<br><br>
<label>Password :-</label>
<input type="text" name="pass" value="123456">
<br><br>
<input type="submit" name="submit" value="submit form">
</form>
</body>
</html>Output:-
Myprograming.com
Placeholder Attribute
The placeholder attribute specifies a brief hint that describes the arithmetic mean of AN input field/text space. The short hint is displayed within the field before the user enters a worth.
Example:-
<!DOCTYPE html>
<html>
<head>
<title>placeholder attribute</title>
</head>
<body>
<h1>Myprograming.com</h1>
<form>
<label>Username :-</label>
<input type="text" name="name" placeholder="Enter your Username">
<br><br>
<label>Password :-</label>
<input type="text" name="pass" placeholder="Enter your Password">
<br><br>
<input type="submit" name="submit">
</form>
</body>
</html>Output:-
