Inhalt

16.04.2007  ·  Dirk Schürjohann zu den Themen CSS, Formulare und HTML. Kommentare 23

Approach to flexible multi-column forms

(Dieser Artikel wurde auf Deutsch im SELFHTML aktuell Weblog veröffentlicht: »Ansatz für flexible, mehrspaltige Formulare«)

Fluid web forms?

When it comes to fit a web form into a fluid layout we usually point out several reasons why form elements should be pixel based. That is because we are totally aware of web forms being part of the browser/system and therefore do not give authority to the web designer. Sort of fundamental perception. Actually, styling web forms is hard work, even pixel sized, and could turn out into the hell of a job if specification says: make it fluid.

So, here we are and asking: why should a web form be fluid? Why go to the time and effort of develop a form that is based on input fields with flexible widths? Doesn’t make sense.
Sure it may come to make sense when the form has multiple columns and a scaling form would allow input fields to grab content that otherwise would have been cut off in a fixed pixel based form. Single-column input fields are hopefully long enough at any time, but a multi-column form may benefit from flexible widths.

One last thought: why do we go for multi-column forms instead of simple single-column ones? It’s all about conformity with user expectation (buzzword) and the use for suggestive input fields which comply with the content they may receive. For instance a submission of the user’s last name requires a longer input field than a field for the few chars of his street number. According to this idea a discrepancy between (the length of) input fields and its estimated amount of data may distract the user. As multi-column forms allow input fields with different sizes — at least our form does — they may correspond to the user’s expectation.

Approach to a flexible multi-column web form (HTML/CSS)

HTML structure

This is what we need:

  1. a wrapper that uses negative margins for left and right and therefore gets wider than the form itself. The purpose is to compensate the margins of inner elements and align them with the form.
    
    <form class="dm_form" ..>
       <div class="form_wrapper">
       ..
       </div>
    </form>
    
  2. embracing labels in order to get around supplemental div containers.
    
    <label ..>
       (text)
       (input)
    </label>
    
  3. a bunch of spans used for titles and stuff and being abused as block elements.
    
    <label ..>
       <span class="wrapper">
          <span class="title">First name *</span>
          <input class="field" id="firstname" type="text" />
       </span>
    </label>
    

CSS, code and example

See an example of the flexible form and find further information – mainly the CSS part – in the source.
Last update: August 6, 2008

Browser compatibility

The form seems to work smoothly in common browsers like Firefox, Opera (a wee bit unsteady) and Safari. IEs 6+7 need a little help from javascript in order to reduce the width of input fields by a few pixels. IE8 is fine now.

License

This approach to flexible multi-column forms is released under a Whatever-you-like-to-do license and can therefore be used for whatever you like to do.

Discussion

We are aware of the form not winning an award for its semantic markup. That is why we call it an »approach«. In fact it is not evil and we consider it to be a gentle way of getting a flexible and scalable form that is valid, well structured, tableless and works in common browsers.
As usual: feedback is welcome!

Updates

  • November 20, 2007
    Picked up some positioning problems in Apples new Safari 3 browser. Will fix it later – or even better will come up with a new approach to flexible forms.
  • November 22, 2007
    Up for Safari 3 now. However, a new approach definitely to come.
  • July 12, 2008
    Adjusted box sizing in Opera 9.
  • August 6, 2008
    Works fine in IE 8 now.
  • March 20, 2009
    Works fine in IE 8 final now again: doesn’t need any specific styles, just clear out the IE 8 beta stuff now.

Related articles and yet another web forms

  1. The Subtraction Good Form 0.1 (Khoi Vinh)
  2. The Subtraction Good Form 0.2 (Thomas Maas)
  3. A form with style (Stu Nicholls)
  4. CSS-Only, Table-less Forms (Jeff Howden)
  5. Web Application Form Design (Luke Wroblewski)
  6. Accessible HTML/XHTML Forms: Beginner Level (WaSP)
  7. Accessible HTML/XHTML Forms: Intermediate Level (WaSP)
  8. Accessible HTML/XHTML Forms: Advanced Level (WaSP)
  9. CSS-Based Forms: Modern Solutions (Smashing Magazine)

Kommentar hinterlassen  //  RSS-Feed mit Kommentaren zu diesem Beitrag Feed

23 Kommentare

  • 1

    luison 

    Great job. One the best CSS form solutions I’ve seen arround. I tried to remove the need of a class for span ‘wrapper’ and ‘title’ as they are label span:first-child and span span:first-child, but the title block seems to blow in various lines and I am completely unsure why.
    If I do get arround I’ll send it.

  • 2

    Dirk Schürjohann (Autor)

    Thank you, luison. Looking forward to your way of handling flexible forms!

    IE6 won’t get along with the first-child thing, that’s why I used for the classes. But your idea is good, one could handle the first child with Javascript.

  • 3

    pan 

    Excellent technique.
    Thank you for making the effort.

  • 4

    Dirk Schürjohann (Autor)

    Picked up some positioning problems in Apples new Safari 3 browser. Will fix it later – or even better will come up with a new approach to flexible forms.

  • 5

    Dirk Schürjohann (Autor)

    Up for Safari 3 now.

  • 6

    Ivan 

    Have you taken a look at this form with the new IE8 beta?
    IE totally destroys it! :(

  • 7

    Dirk Schürjohann (Autor)

    Ivan, I will take a look at IE8 soon. Shouldn’t be a problem to make it work with it.
    Thanks for your feedback!

  • 8

    Dirk Schürjohann (Autor)

    Ivan, in case you subscribed to new comments in this post: Works fine in IE8 (beta) now. Cheers!

  • 9

    Kierrok 

    Major mess in IE8 Final :|

  • 10

    Dirk Schürjohann (Autor)

    Kierrok, works fine now. Or better: again. With IE 8 final we don’t need the specific IE 8 beta styles any more.

  • 11

    Kierrok 

    Nice work Dirk! Let’s see if I can fix my own forms now… :)

    If not, I might adopt yours.

  • 12

    Norbert D'Souza 

    Hi Dirk,

    Why would you want to align your send form button to the right?

    The reason I am asking is that I think there is still a bug in IE8. I am trying to create a multi column form layout with the respective labels ABOVE the fields and this is the sequence:
    Row1: Title Firstname Lastname
    Row2: Company Name
    Row3: Address
    Row4: City, State, Postcode
    Row5: Country, Telephone
    Row6: Submit

    I have used pure CSS & html and while evrything works just fine in all other browsers, in IE8 Pfffft!

    Hoping someone can help!

    Regards
    Norbert

  • 13

    Dirk Schürjohann (Autor)

    Norbert, is your site with the bugs you mentioned online? I’ll have a look then..

  • 14

    battisti 

    Man its exactly what i was looking for! thx a lot!

  • 15

    Leona 

    Thank you Dirk!!
    You saved me lots work. You are appreciated.

  • 16

    Patricio Vidal 

    This is the best form solution i’ve seen. Thanks a lot Dirk.

  • 17

    john 

    hi and thank you

    i am new to the css form game, so i may be missing something obvious

    i am trying to get the form labels to align to the left of the field

    i tried float left and clear and display inline, but no love

    can you assist please?

    thanks

  • 18

    Dirk Schürjohann (Autor)

    John
    the form won’t deal with left aligned labels very well. You’re better off looking for another solution.

  • 19

    Gianpaulo 

    Hi

    I liked very much this form and I’d like to contribute, is this project in github or someting like this to I clone and push updates?

    tks

  • 20

    Sankar 

    Hi,

    Is there any possibility of the labels on left and the inputs on right with fluid/flexible width for both. This way, the labels column width is based on the largest label and the remaining width is shared with the inputs column.. Any thoughts?

  • 21

    Christoph 

    really nice guidline to style forms. i think i will take this CSS form solution in a future project when i need to build an advanced form. thanks for sharing.

  • 22

    Manuel Alzola Würth 

    Great help. Nicest layout solution i’ve seen so far. Thank you very much
    Manuel
    Madrid, Spain

  • 23

    Johannes 

    Thank you, very helpful.

(Kommentare geschlossen.)

banner