HTML - Input Element

1 - About

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

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

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

See:

4 - 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.

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:

  • 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

5.1.3 - Email

input/email


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

5.1.4 - Password

input/password


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

5.2 - Number

5.2.1 - Number

input/number


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

5.2.2 - Range

input/range


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

5.3 - Color

input/color


<input type="color"  placeholder="red" />

5.4 - Date

5.4.1 - Date

input/date


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

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

input/time


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

5.4.4 - Month

input/month


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

5.5 - File

input/file


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

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

6 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap