CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Accessible Wizard  (Read 440 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Accessible Wizard
« on: 1 Jun 2021, 12:52:13 pm »
What is the best way to create a step-by-step wizard in html and css?

I've laid out the form with each step being in its own fieldset.  I've then taken a tabs css only demo and used that for each section (so far so good).  However, how would I get any "next" and "back" buttons to work without javascript.

Also, is this even the best approach or should I have each step on its own html page, posting to the server, and then moving to the next html page (or back) rather than all on one page?

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Accessible Wizard
« Reply #1 on: 1 Jun 2021, 10:19:44 pm »
Generally I'd have to see what it's doing, but as a USER I know that these "one or two question per page" setups often just piss me off. Generally I prefer when there's a bunch of options to have them all on one page.

What tabs CSS demo are you using? Generally if I were to implement such a thing I'd have it be hash link driven, in which case forward/back buttons would just be anchors href="#section1" and href="#section3" (if on #section2). See my x86 reference which is actually one giant page of markup despite looking like a SPA.

For example if you look at the page for the MUL instruction:

https://x86.cutcodedown.com/#opcode_MUL

You can see it has forward and back buttons to MOVZX and NEG respectively. In the code MOVZX is:

<div id="opcode_MOVZX">

And any link to that section would be:

<a href="#opcode_MOVZX">

No JavaScript needed, relatively easy to implement since it's all driven by CSS' :target psuedo-state.

That said, making it a single page with tabs is bad UX, and would make section validation a pain in the ass. I'd either make it one tall form so client-side validation is easier to handle. Playing around with fancy tricks is just going to harm the experience, not help it.

I don't know about anyone else, but when I'm 8 or 9 pages deep in some goofy form trickery, I have the habit of saying "screw this" and going to use something else.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Re: Accessible Wizard
« Reply #2 on: 2 Jun 2021, 05:03:03 pm »
Thanks for the input.  It's a three step wizard.  The reason I decided to use a wizard was to make the process seem quicker but I take your point and will consider just one form.

 

SMF spam blocked by CleanTalk

Advertisement