HTML - Input Element
Table of Contents
1 - About
An input element of a form that permits to define a scalar value
2 - Articles Related
3 - Attributes
3.1 - Type
The type attribute defined:
- the default behavior
- the design of the element.
- and the type of data expected
See the list below
3.2 - 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);
3.3 - 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);
3.4 - 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="Nico" form="form_id"/>
<form id="form_id">
</form>
let form = document.querySelector("form");
console.log("User: "+form.user.value);
3.5 - 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.
3.6 - Value
The value attribute:
- set the default value
- and holds the current value
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>
3.7 - list
The list attributes refers to a datalist that defines a list of expected values.
3.8 - autocomplete
The autocomplete attribute describes the semantic of the value in order to auto-fill the form.
Example:
Your phone number: <input type=tel name=custtel autocomplete="billing tel">
Recipient's phone number: <input type=tel name=shiptel autocomplete="shipping tel">
Romanized name: <input name="e" type="text" autocomplete="section-en name">
Japanese name: <input name="j" type="text" autocomplete="section-jp name">
Credit card number:<input name="cc" type="text" inputmode="numeric" pattern="[0-9]{8,19}" autocomplete="cc-number">
See all possible value called autofill-field such as:
- name
- honorific-prefix
- given-name
- additional-name
- family-name
- honorific-suffix
- nickname
- username
- new-password
- current-password
- one-time-code
- organization-title
- organization
- street-address
- address-line1
- address-line2
- address-line3
See all possible values at the specification
3.9 - Multiple
The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.
3.10 - Others
4 - Valid
Valid form controls are those:
5 - Input Type by Data type
5.1 - Text
5.1.1 - 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:
5.1.2 - 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
5.1.3 - Email
5.1.4 - Password
5.2 - Number
5.2.1 - Number
5.2.2 - Range
5.3 - Color
5.4 - Date
5.4.1 - Date
5.4.2 - Datetime-local
input/datetime-local datetime-local: HTML5 A control for entering a date and time, with no time zone.
<input type="datetime-local" placeholder="date input" />
5.4.3 - Time
5.4.4 - Month
5.5 - File
5.6 - 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" />
5.7 - Boolean
5.7.1 - Checkbox
5.7.2 - Radio
5.8 - Submit
5.8.1 - Image
input/image is a graphical submit button.
5.8.2 - Submit
input/submit is a submit element that will submit the form.
5.8.3 - 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