The input Element

<input>

The HTML input element

Description

The <input> element is a garbage pile with all kinds of input types. Where almost every input type is its own element. As most notably the <textarea>, <select> and <button> elements suggest, which in many ways behave just like <input> elements.

Note: More information can be found in the howto folder in the main repo.

Attributes

type

An enumerated attribute and the most important attribute from which everything else depends on

Values

text: Just a regular text input for anything password: Password inputs look a lot like regular text inputs but the input is veiled, only the number of characters can be seen.

Usage

This input will be a rather small box, that users can insert text into

<input>

Default Style

"input": {
    "border-style": "solid",
    "border-radius": "3px",
    "outline-offset": "1px",
    "padding": "3px",
}

input:focus {
    outline: solid rgb(45, 140, 180) medium;
}

Events

beforeinput: Is fired before input. Cancellation will cancel any edit. input: The input event is fired after the <input> element is edited.

Default Event handlers

wheel: The type=number input can be changed by scrolling with the wheel.

def on_wheel(self, event):
    if self.type == "number":
        self.value += event.delta[1]

Further Development

Most types and attributes are not yet implemented

It's just a lot of "hard" work to implement them all.

beforeinput event

The beforeinput event can be listened to, to intercept inputs before they actually happen.

Forms and labels

<input> elements are a bit lacking without forms and labels.

Text Cursor

A real text cursor is also still missing. Right now, the cursor is always at the end of the input.

disabled

The <input> is greyed out, the input element will not receive any browser events.
Most importantly, this rule should technically also apply to all descendant elements.

More info

readonly

The <input> is greyed out, the input element's value can not be changed. However, you can still focus the element

More info