About
An input element of a form control that permits to define a scalar value (single 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
- required
- size=10 input value length (in em for a text, otherwise pixel)
See:
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
text represents a couple of words or a line of text. For multiple lines, you would use the textarea HTML element
Example:
<!-- 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
See the page: How to get and validate an email address with an HTML form?
Password
The input type password 1) represents a password.
Example:
<input type="password" placeholder="password input" />
Number
Number
en-US/docs/Web/HTML/Element/input/number
<input
type="number"
placeholder="0"
step="0.01"/>
Range
en-US/docs/Web/HTML/Element/input/range
<input type="range" placeholder="range input" />
Color
color can be asked via the input/color
- Example:
<input type="color" name="color" value="#00FFFF" />
- Output:
Date (Day, Time, month)
See Date
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: How to work with an Input File in an HTML form?
Telephone
en-US/docs/Web/HTML/Element/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 en-US/docs/Web/HTML/Element/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.