What markup should I use for a form confirmation page / last step in wizard?



  • We have several multistep forms (wizards?), and in the last step it summarizes what you have filled out so you can read through it once more before you actually submit/confirm.

    For styling, these were reusing a label-komponent for the "key", while the "value" was just dumped out as text. This seems very wrong, since a label should be connected to an input. So as an easy solution, I've started to display the value instead as a readonly input-field connected to that label. But, now I've come to areas where that doesn't work anymore. Places where for example the dumped out text is a list of selected text, or a long text description of what has been selected.

    For example, one question could be:

    Do you have children under the age of 18?
    [ ] Yes
    [x] No

    While on the confirm page, this is listed as:

    Children
    No, I do not have any children under the age of 18

    This doesn't really fit in a single line readonly text input. Thought of replacing it with a readonly textarea, but then you get the issue of wrapping text, having to figure out how large it should be, and potentially an awkward scrollbar if it's slightly off.

    Either way, is this even a good way to markup a confirmation page to begin with? What really is the correct, or best, way to markup this kind of summary/confirmation page for accessibility? I assume it should not simply be paragraphs of text, but not sure what it then actually should be?



  • Apparently https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl might be the markup that fits best for this.

    I tried to avoid it, because styling it tends to be a pain, but today I learned https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#wrapping_name-value_groups_in_div_elements , which will make styling it much easier.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2