What are HTML Input Elements?

About

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

Attributes

Full list Ref Doc

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

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>

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.

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

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

Input Type by Data type

Text

Text

text represents a couple of words or a line of text. For multiple lines, you would use the textarea HTML element

Example:

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

Email

en-US/docs/Web/HTML/Element/input/email

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

Password

The input type password 1) represents a password.

Example:

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

Number

Number

en-US/docs/Web/HTML/Element/input/number

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

Range

en-US/docs/Web/HTML/Element/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 type="date"  placeholder="date input" />

Datetime-local

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

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

Time

en-US/docs/Web/HTML/Element/input/time

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

Month

en-US/docs/Web/HTML/Element/input/month

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

File

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: How to work with an Input File in an HTML form?

Telephone

en-US/docs/Web/HTML/Element/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

How to create and use a HTML checkbox ?

Radio

HTML - 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 en-US/docs/Web/HTML/Element/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

Event

When the value changes, it fires an input event.

3) 4)





Discover More
Boxdim
CSS - Emphemeral unit (em | equal M)

The emphemeral unit (em) is a relative size to the default font-size set in a browser (=16px on windows) A font-size of 0.875em translates to 87.5% of the default fontsize of the browser. To simplify:...
Devtool Chrome Event Listener
Change event (DOM, Javascript)

A page and example about the change event
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...
Devtool Chrome Event Listener
DOM - Input Event

The input event fires when the value has changed of one of this input element: a input, a select, or textarea With an input The HTML The javascript Result: Type a text in the input...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
HTML - How to retrieve the data of a form with Javascript

This article shows you how to retrieve the data of a form with Javascript succesful controls You don't need to submit a form to get the values Every form object has a elements property that stores...
HTML - Input Search

A input search is a html input element with a search type that represents a search box. It's identical to text inputs, but may be styled differently by the user agent. size is the length in em...
HTML - Interactive Content (User Interaction) (Element)

Interactive element are interactive elements that are specifically intended for user interaction. (if the controls attribute is present) (if the usemap attribute is present) (if...
HTML - Label

The label html element represents a caption for a control item in a form (user interface). idfor A click on the label: will bring focus on the control element. propagates to the control element....



Share this page:
Follow us:
Task Runner