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="Nico" 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

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.

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

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

Valid form controls are those:

• with a name,
• not disabled
• checked for radio buttons and checkboxes)
• or selected one or more options within a select.

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.

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

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

input/time

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

input/month

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

input/file

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

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

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

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