[whatwg] Suggestion: Implementation of Tabbed Forms

[Matthew Raymond]

Ian Hickson wrote:
> At the moment the spec says it would be:
> 
>    <switch>
>      <section>
>        <h1>Exclusive Section 1</h1>
>      </section>
>      <section>
>        <h1>Exclusive Section 2</h1>
>      </section>
>    </switch>

    I presume there is a mechanism for selecting a specific section. If
so, would there be markup that would serve a function similar to a VB
tabstrip? Will there be a markup solution to selecting a section?
Perhaps something like this:

<tabstrip>
   <tabs>
     <tab for="section1"><a href="#section1">Section 1</a></tab>
     <tab for="section2"><a href="#section1">Section 2</a></tab>
     <tab for="section3"><a href="#section1">Section 3</a></tab>
   </tabs>
   <switch>
     <section id="section1">
       ...Stuff for Section 1...
     </section>
     <section id="section2">
       ...Stuff for Section 2...
     </section>
     <section id="section3">
       ...Stuff for Section 3...
     </section>
   </switch>
</tabstrip>

    Note that <a> elements will be ignored in the <tab> elements, and 
are there solely for graceful degradation.

> I don't really like the name "switch", but it is what SVG and XForms have 
> and it seems better than the alternatives I've considered (thanks to 
> everyone who suggested these, by the way):
> 
>    <blockgroup>

    Not bad, but it fails to communicate the fact that only one block is
visible at a time.

>    <card>
>    <cardLayout>

    What's a card? I get the deck metaphor, but only because I've seen
the XUL element <deck>, which I think is the closest thing XUL has to
your <switch> example.

>    <exblock>
>    <exgroup>

    Not clear enough.

>    <flip>
>    <mebc>

    I don't even know what these are supposed to mean.

    MEBC = Mutually Exclusive Block Container???

>    <mutex>

    Programmers would probably like this one, but others wouldn't 
understand.

>    <mutexgroup>

    Suffers from the same problem as above, plus it's longer.

>    <mutgroup>

    Not as long, but most people don't know what a mutex is, let alone 
an abbreviation of it.

>    <mutuallyExclusiveblockContainer>

    Ah, that answers that question.

>    <mxsection>
>    <mxsections>

    Cool names, but people won't know what they are.

>    <page>
>    <pages>

    I actually kinda like the page metaphor. I presume there is a reason 
you rejected this? (Other than the obvious fact that the idea of pages 
within pages of an HTML document is a little strange.)

>    <stack>

    XUL has a <stack> element, while the function of what we're trying 
to create here is much more like XUL's <deck>.

>    <stateset>

    Just because you only see one section at a time doesn't mean they're 
states, so this name strikes me as slightly misleading.

>    <tab>
>    <tabs>

    I'm thinking that there should be separate markup for the mutually 
exclusive sections and the means of accessing the pages. That said, I do 
think there should be markup for the means of accessing pages, like my 
<tabstrip> example.

>    <widget>

    ???

>    <wizard>

    See comments on <tabs>.

> The second choice after <switch> is currently <stateset>, but both
> seem a bit geeky.

    Perhaps we should use <deck> and <card> together, like this:

<tabstrip>
   <tabs>
     <tab for="section1"><a href="#section1">Section 1</a></tab>
     <tab for="section2"><a href="#section1">Section 2</a></tab>
     <tab for="section3"><a href="#section1">Section 3</a></tab>
   </tabs>
   <deck>
     <card id="section1"> ...Stuff for Section 1... </card>
     <card id="section2"> ...Stuff for Section 2... </card>
     <card id="section3"> ...Stuff for Section 3... </card>
   </deck>
</tabstrip>

    Any link (within the deck?) that references a card's |id| will bring 
that card to the front when clicked, allowing easy creation of wizards:

<form>
   <deck>
     <card id="section1">
       ...Stuff for Section 1...
       <a href="#section2">Next</a>
     </card>
     <card id="section2">
       ...Stuff for Section 2...
       <a href="#section1">Previous</a>
       <a href="#section3">Next</a>
     </card>
     <card id="section3">
       ...Stuff for Section 3...
       <a href="#section2">Previous</a>
       <button type="submit">Finish</button>
     </card>
   </deck>
</form>