HTML - Input Element

An input element of a form control that permits to define a scalar value

Full list Ref Doc

The type attribute defined:

• the default behavior
• the design of the element.
• and the type of data expected

See the list below

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);

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);

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=“[a-z]{4,8}” pattern - a regular expression that the input's value must match in order for the value to pass constraint validation.

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>

The list attributes refers to a datalist that defines a set of permitted values.

The autocomplete attribute describes the semantic of the value in order to auto-fill the form.

The multiple attribute is a boolean attribute that indicates whether the user is to be allowed to specify more than one value.

• required
• size=10 input value length (in em for a text, otherwise pixel)

See:

• Full list Ref Doc

If the input controls are not valid (successful), they are not added to the data of the form when submitted.

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:

• size is the length in em (1 unit = 1 character). CSS width takes precedence over size attribute.
• autocomplete is also on by default.

input/search is a search box Identical to text inputs, but may be styled differently by the user agent. More … see HTML - Input Search

input/email

<input type="email"  placeholder="[email protected]" />

input/password

<input type="password"  placeholder="password input" />

input/number

<input 
    type="number"  
    placeholder="0" 
    step="0.01"/>

input/range

<input type="range"  placeholder="range input" />

color can be asked via the input/color

• Example:

<input type="color"  name="color" value="#00FFFF" />

• Output:

input/date

<input type="date"  placeholder="date input" />

The datetime-local ¹⁾: HTML5 A control for entering a date and time, without any time zone information.

<input type="datetime-local"  value="0170-07-31T22:00:00" />

input/time

<input type="time"  placeholder="time input" />

input/month

<input type="month"  placeholder="month input" />

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

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" />

How to create and use a HTML checkbox ?

HTML - Radio

input/image is a graphical submit button.

input/submit is a submit element that will submit the form.

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

When the value changes, it fires an input event.

• Element/Input
• input
• https://html.spec.whatwg.org/multipage/input.html#the-input-element