Advanced Forms
Build complex, accessible forms with Axiom01's semantic form components.
Form Philosophy
Axiom01 forms follow the same semantic-first approach as all our components. Instead of utility classes on every input, we style forms using logical semantic structure and descendant selectors.
Key Principles
- Semantic HTML: Use proper form elements with meaningful labels
- Accessibility First: Built-in ARIA support and keyboard navigation
- Progressive Enhancement: Works without JavaScript, enhanced with it
- Minimal Markup: Clean HTML without excessive wrapper divs
Basic Form Structure
Every Axiom01 form follows this semantic pattern:
HTML Structure
<form>
<div class="form-group">
<label for="input-id">Label Text</label>
<input type="text" id="input-id" placeholder="Placeholder">
<small class="form-help">Help text</small>
</div>
<div class="form-actions">
<button type="submit" class="primary">Submit</button>
</div>
</form>
Input Types
Axiom01 styles all HTML5 input types consistently:
Form Validation
Axiom01 includes built-in styling for form validation states:
Validation Classes
.valid
- Green border and success feedback.invalid
- Red border and error feedback.warning
- Orange border and warning feedback
Complex Form Layouts
For more complex forms, use grid layouts while maintaining semantic structure:
Accessibility Features
Screen Readers
- Proper label associations
- ARIA attributes for complex controls
- Fieldset and legend for grouping
- Error announcements
Keyboard Navigation
- Tab order follows logical flow
- Focus indicators on all controls
- Enter submits forms
- Escape cancels modal forms
Visual Design
- High contrast focus states
- Clear error messaging
- Consistent spacing and alignment
- Readable font sizes
Form Best Practices
✅ Do
- Use semantic HTML5 input types
- Provide clear, descriptive labels
- Group related fields with fieldset
- Include helpful placeholder text
- Validate on both client and server
- Test with keyboard navigation
- Test with screen readers
❌ Don't
- Use placeholder text as labels
- Create forms without proper validation
- Ignore accessibility requirements
- Use generic error messages
- Make forms unnecessarily complex
- Forget to test on mobile devices