Struct Input 

pub struct Input;

The <input> element - represents a typed data field for user input.

Purpose

The <input> element is a versatile form control for collecting user input. Its behavior and appearance vary dramatically based on the type attribute, ranging from text fields to buttons, checkboxes, date pickers, and more. The most commonly used form element.

Content Categories

• Flow Content
• Phrasing Content
• If type is not “hidden”: Interactive Content
• Palpable Content

Permitted Content Model

• None (void element)

Common Use Cases

• Text and password input fields
• Checkboxes and radio buttons for selections
• File uploads
• Date, time, and color pickers
• Number and range sliders

Key Attributes

• type: Input type (text, password, email, number, checkbox, radio, file, date, etc.)
• name: Name for form submission
• value: Current value of the control
• placeholder: Hint text displayed when empty
• required: Makes the field mandatory
• disabled: Disables the control
• readonly: Makes the field read-only
• min, max: Minimum and maximum values (for numeric/date types)
• step: Increment step (for numeric types)
• pattern: Regular expression for validation
• autocomplete: Autocomplete hint
• multiple: Allow multiple values (file, email)
• accept: File types to accept (for file inputs)
• checked: Pre-checked state (checkbox, radio)

Example

<!-- Text input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>

<!-- Email with validation -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="user@example.com" required>

<!-- Password field -->
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" minlength="8" required>

<!-- Number with range -->
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="18" max="120" step="1">

<!-- Checkbox -->
<input type="checkbox" id="subscribe" name="subscribe" value="yes" checked>
<label for="subscribe">Subscribe to newsletter</label>

<!-- Radio buttons -->
<input type="radio" id="color-red" name="color" value="red">
<label for="color-red">Red</label>
<input type="radio" id="color-blue" name="color" value="blue">
<label for="color-blue">Blue</label>

<!-- File upload -->
<label for="avatar">Profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

<!-- Date picker -->
<label for="dob">Date of birth:</label>
<input type="date" id="dob" name="dob" min="1900-01-01" max="2024-12-31">

<!-- Range slider -->
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<!-- Search field -->
<input type="search" name="q" placeholder="Search..." autocomplete="off">

<!-- Color picker -->
<label for="color">Choose color:</label>
<input type="color" id="color" name="color" value="#ff0000">

Accessibility

• Always provide associated <label> elements
• Use appropriate type attribute for semantic meaning
• Provide helpful placeholder text (but don’t rely on it alone)
• Use aria-describedby for additional instructions
• Ensure sufficient color contrast for visible inputs
• Make error messages clear and associated with inputs
• Use autocomplete for common fields

WHATWG Specification

• 4.10.5 The input element

Trait Implementations

impl HtmlElement for Input

const TAG: &'static str = "input"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = true

Whether this is a void element (self-closing, no children allowed).

impl FlowContent for Input

impl InteractiveContent for Input

impl PalpableContent for Input

impl PhrasingContent for Input