Skip to main content

HTML inputs and UI elements

Input elements are ordinary DOM elements with attached so called native behaviors - controllers that handle their look and feel.

Inputs

tag and typebehaviorpurpose
<input type=text>behavior:editsingle line input
<input type=password>behavior:passwordsingle line password input
<input type=integer>behavior:integerinteger numeric input
<input type=decimal>behavior:decimaldecimal numeric input
<input type=number>behavior:numbereither integer or decimal input
<input type=button>behavior:buttonbutton
<input type=radio>behavior:radioradio button
<input type=checkbox>behavior:checkcheckbox button
<input type=hslider>behavior:sliderhorizontal slider
<input type=vslider>behavior:slidervertical slider
<input type=hscrollbar>behavior:scrollbarhorizontal standalone scrollbar
<input type=vscrollbar>behavior:scrollbarvertical standalone scrollbar
<input type=calendar>behavior:calendarstandalone calendar input - day selector
<input type=date>behavior:datedate input
<input type=time>behavior:timetime input
<input type=masked>behavior:masked-editmasked text input
info

All <input type=...> elements have <widget type=...> display:block counterparts.

Buttons

tag and typebehaviorpurpose
<button>behavior:buttonbutton
<button type=submit>behavior:buttonsubmit button in a form
<button type=reset>behavior:buttonreset button in a form
<button type=radio>behavior:radioradio button combined with a label
<button type=checkbox>behavior:checkcheckbox button combined with a label
<button type=menu>behavior:button popup-menubutton with child <menu> element, show the menu on click
<button type=toggle>behavior:checkcheck button styled as a toggle
note

Buttons may also appear in <toolbar> element where they have distinct toolbar look.

Selects

tag and typebehaviorpurpose
<select>behavior:select-dropdownselect with dropdown list
<select type=dropdown>behavior:select-dropdownexplicit declaration of select with dropdown list
<select type=list>behavior:selectinplace list, single select, multiple select, multiple select with checkmarks
<select type=tree>behavior:treehierarchical <option> tree selector: single and multiple options
<select type=switch>behavior:selectone-of-many selector bar

Text editors

tag and typebehaviorpurpose
<textarea>behavior:textareaMultiline text area for small texts
<htmlarea>behavior:richtextWYSIWYG HTML editor
<plaintext>behavior:plaintextMultiline plain text editor optimized for relatively large texts. Supports phrasing markup in text lines.

Output elements

tag and typebehaviorpurpose
<progress>behavior:progressprogress output
<meter>behavior:progressstatic progress output
<output>behavior:outputvalue output
<video>behavior:videovideo output
<lottie>behavior:lottielottie animations output

Container elements

tag and typebehaviorpurpose
<frame>behavior:frameframe, container of loadable documents
<frame type=pager>behavior:pagerprint preview frame
<frameset>behavior:frame-setcontainer with splitter separated sections
<form>behavior:formcontainer of input elements, multi-value aggregate
<details>behavior:detailscollapsible container
tag and typebehaviorpurpose
{ menu bar}behavior:menu-barmenu bar (no predefined element by default)
<menu.context>behavior:menucontext menu
<menu.popup>behavior:menugeneric popup menu