HTML - Input Element
Table of Contents
About
An input element of a form control that permits to define a scalar value
Attributes
Type
The type attribute defined:
- the default behavior
- the design of the element.
- and the type of data expected
See the list below
Id
If an input element has an id, it can be selected directly
<form>
<input id="user" type="text" value="Nico" />
<input id="age" type="number" value="10" />
</form>
let form = document.querySelector("form");
console.log("User: "+form.user.value);
console.log("Age: "+form.age.value);
Name
The name attribute:
- set a name to the value defined
- groups input that defines the same value such as radio input.
- if present, the input element can be accessed by name.
<form>
<input name="user" type="text" value="Nico" />
<input name="age" type="number" value="10" />
</form>
let form = document.querySelector("form");
console.log("User: "+form.elements.user.value);
console.log("Age: "+form.elements['age'].value);
Form
The form attribute is the id of a element element in the same document.
- [Optional] Default to the nearest containing form, if any.
- Used when the input element is not a child element of the form.
<input id="user" type="text" value="foo" form="form_id"/>
<form id="form_id">
</form>
let form = document.querySelector("form");
console.log("User: "+form.user.value);
Pattern
- pattern=“[a-z]{4,8}” pattern - a regular expression that the input's value must match in order for the value to pass constraint validation.
Value
The value attribute:
- set the default value
- and holds the current value
Default to:
- the empty string for a text
When the value changes, it fires an input event.
handleSubmit = () => {
let form = document.querySelector("form");
alert("Field value: "+form.elements.field.value);
};
<form onSubmit="handleSubmit()">
<input name="field" type="text" value="Change Me and Submit"/>
<input type="submit"/>
</form>
list
The list attributes refers to a datalist that defines a set of permitted values.
Unfortunately, the list behavior is not specified and it filters by default leaving out the other values once a value was selected.
autocomplete
The autocomplete attribute describes the semantic of the value in order to auto-fill the form.
Multiple
The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.
Others
Valid
If the input controls are not valid (successful), they are not added to the data of the form when submitted.
Input Type by Data type
Text
Text
input/text: a basic text input
<!-- Label is coupled to input via the for attributes that define the input id -->
<label for="textId">Choose a username: </label>
<input id="textId" name="textName" type="text" placeholder="text input" />
Attribute:
- autocomplete is also on by default.
Search
input/search is a search box Identical to text inputs, but may be styled differently by the user agent. More … see HTML - Input Search
Password
Number
Number
Range
Color
color can be asked via the input/color
- Example:
<input type="color" name="color" value="#00FFFF" />
- Output:
Date
Date
Datetime-local
The datetime-local 1): HTML5 A control for entering a date and time, without any time zone information.
<input type="datetime-local" value="0170-07-31T22:00:00" />
Time
Month
File
The file input permits to choose files from the local file system.
Example: To pick one file:
<input type="file" webkitdirectory />
For more example, see the dedicated page: HTML - Input File
Telephone
input/tel. One of the main advantages of is that it causes mobile browsers to display a special keyboard for entering phone numbers.
<input type="tel" placeholder="+31600000" />
Boolean
Checkbox
Radio
Submit
Image
input/image is a graphical submit button.
Submit
input/submit is a submit element that will submit the form.
Button
In html, there is two kind of button:
- the input/button - no default behavior expected that the text of the button is given by the value property
- the button elements:
- much easier to style than <input> elements.
- You can add inner HTML content (think <i>, <br>, or even <img>),
- and use ::after and ::before pseudo-elements for complex rendering.
- and where you can add a submit behavior
Event
When the value changes, it fires an input event.