https://github.com/fatumaa/mulit-step-form
This project demonstrates a multi-step form using semantic HTML, vanilla JavaScript and CSS. It focusses UX and accessibility standards. JSFiddle link - https://jsfiddle.net/appel/15pn4b0j/
https://github.com/fatumaa/mulit-step-form
a11y form multistep-form multistep-forms ux vanilla-javascript
Last synced: 13 days ago
JSON representation
This project demonstrates a multi-step form using semantic HTML, vanilla JavaScript and CSS. It focusses UX and accessibility standards. JSFiddle link - https://jsfiddle.net/appel/15pn4b0j/
- Host: GitHub
- URL: https://github.com/fatumaa/mulit-step-form
- Owner: FatumaA
- License: mit
- Created: 2024-12-03T09:19:01.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-12-19T09:22:16.000Z (4 months ago)
- Last Synced: 2025-01-31T04:33:05.538Z (3 months ago)
- Topics: a11y, form, multistep-form, multistep-forms, ux, vanilla-javascript
- Language: HTML
- Homepage: https://css-tricks.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/
- Size: 19.5 KB
- Stars: 33
- Watchers: 1
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Multi-Step Form Example
A simple and intuitive multi-step form implementation focused on user experience and accessibility.
## Overview
This project demonstrates a multi-step form using semantic HTML, vanilla JavaScript and CSS. It focusses UX and accessibility standards.
## Features
- Clean step-by-step form progression
- Accessible form controls and navigation
- Visual progress indicators
- Form validation
- Responsive design
- Keyboard navigation support
## Technologies
- HTML
- CSS
- JavaScript
- ARIA attributes for accessibility
## JSFiddle
Here is a [link to a JSFiddle](https://jsfiddle.net/appel/15pn4b0j/) of the project you can start playing with. Contributed by GitHub user [@appel](https://github.com/appel).
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/yourusername/multi-step-form.git
```
2. Open `index.html` in your browser
## Usage
- Navigate through form steps using 'Next' and 'Previous' buttons
- Required fields are clearly marked
- Progress bar shows current position in the form flow
- Form data is validated before proceeding to next step
## Accessibility Features
- ARIA labels and roles
- Keyboard navigation
- Clear focus states
- Error messaging
- Screen reader friendly
## License
MIT License