HTML - Input Element

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

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

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

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 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:

  • 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

Email

input/email

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

Password

input/password

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

Number

Number

input/number

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

Range

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

Date

input/date

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

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

Time

input/time

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

Month

input/month

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

File

input/file

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

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

Documentation / Reference


Powered by ComboStrap