Form controls

Every control the port can actually lay out and draw, in the states that matter. Unsupported <input> types fall back to a text field — they are listed here too so the fallback is visible, not guessed at.

1. Text-like fields

typecontrolnotes
textnative
text (placeholder)native
passwordnative
searchfalls back to text
emailfalls back to text
urlfalls back to text
telfalls back to text
numberfallback: no spinner
datefallback: no picker
timefallback: no picker
colorfallback: no swatch
rangefallback: no slider
text[disabled]UA greys it
text[readonly]not editable
text[required] empty:invalid
text[size=8]width from size
text[maxlength=5]caps typing

2. Checkboxes

Drawn by html_redraw_checkbox() — a filled rect, two dark edges, two light edges, and either a tick (≥12px) or a solid blob (<12px).

     

The two disabled ones must be grey, not blue, and clicking them must do nothing at all — no toggle, no focus, and the pointer stays an arrow.

size sweep — the tick/blob threshold is 12px

9px12px13px (default)16px24px40px

author styling that reaches the widget

declarationresult
padding: 4px
padding: 6px; width: 20px
padding: 9px; width: 16px (crushed) — box-sizing leaves no content box at all; both must still be drawn, never invisible
accent-color: #c0392b
accent-color inherited from a wrapper — neither input names the property
accent-color: #ffe100 (pale) — the mark must go dark to stay visible
accent-color: auto — back to the UA accent
border: 2px solid #06c
background: #ffd
margin: 0 8px|
opacity: .4
appearance: none

the third state — input.indeterminate

Script-only; there is no attribute for it. It outranks checked visually (a bar, not a tick), a click leaves it, and :indeterminate matches while it is set.

checked and indeterminate — must show the bar, not the tick    

in a line of text

Baseline check: text before a checked box and an empty one, then text after. The boxes should sit on the text baseline, not float above or below it.

3. Radio buttons

Drawn by html_redraw_radio() — a filled disc, a ring, and a smaller filled disc when selected.

       

size sweep

9px12px13px (default)16px24px40px

non-square — width ≠ height

4. Buttons

Move the pointer over any of these: it should lighten slightly. Hold the mouse down: it should darken clearly, and come back on release — including the ones styled by the author. Dragging off before releasing must clear both. The disabled ones must not react at all.

markupcontrol
input[type=submit]
input[type=submit] (no value)
input[type=reset]
input[type=button]
input[disabled]
button
button (rich label)
button[disabled]
input[type=image]
styled button

5. Select

markupcontrol
select
select + optgroup
option[disabled]
select[disabled]
select[multiple]
select[size=3]
wide option text
styled select

6. Textarea

7. File picker

8. Hidden input

There is an <input type=hidden name=h value=secret> right here. It must produce no box at all — nothing should shift.

9. Grouping and labels

fieldset + legend
fieldset[disabled] — this one is in the first legend, so it stays live and clickable

Everything on this line must be greyed, must ignore clicks, and must match :disabled. The checkbox in the legend must not.

:disabled matching, straight from matches() — a CSS-only probe is no good here because this port never paints outline:

10. Gauges and the rest

progress and meter are replaced elements here: redraw.c paints the bar straight from the attributes, and the UA sheet gives them their size. Both must be drawn.

markupcontrol
progress
progress (no value) — :indeterminate
meter
output42
datalist

11. Layout interactions

flex row

float + inline

Text wrapping beside a floated checkbox. It should flow around the widget, and the widget should keep its drawn size rather than collapsing.

inside a table cell with vertical-align

12. Live state

Reads back from the DOM on every change — proves clicks reach the gadget and the DOM property follows.

(no events yet)