pierrelf.com
Summary#
Paint native-style form controls into the rendering pipeline. Each form control type needs a visual representation.
Controls to render#
- Text input / password: Bordered rectangle with inset appearance, text content rendered inside, password dots for type=password
- Textarea: Multi-line bordered rectangle with text content
- Button / submit / reset: Raised/bordered rectangle with centered label text
- Checkbox: Small square, filled or checked mark when checked
- Radio button: Small circle, filled dot when selected
- Select dropdown: Bordered rectangle showing selected option text, with dropdown arrow indicator
- Fieldset: Bordered group box with legend text interrupting the top border
Acceptance criteria#
- All form control types render with distinguishable native-style appearance
- Controls respond to state: checked/unchecked, enabled/disabled, focused (rendered in focus management issue)
- Text content (input value, button labels, selected option) renders correctly using the text crate
- Password inputs mask text with bullet characters
- Disabled controls render with dimmed/grayed appearance
- Tests verify rendering output for each control type
Dependencies#
- Form element parsing and DOM interfaces
- Form control layout and intrinsic sizing