My work was based on the Twitter Bootstrap's fluid layout example.
First, I try to create the following form layout based on my requirements:
 |
| fluid-layout.html |
Then, I fill-in the layout columns with form elements/components. Two most common form layouts created for the Person Form: standard form and horizontal form.
 |
| fluid-person-form.html (Standard Form) |
 |
| fluid-person-horizontal-form.html (Horizontal Form) |
You can download the source code of the examples above at bootstrap-2.1.0-examples.zip.
I hope my sharing is useful to you.
22 comments:
I was looking for such an form as yet working on the same thing. Hope with the help of your source code will be able to deal with these forms successfully.
Sure, do let's me know if you have any problem using it.
thank you this helped me :)
Thanks for posting, this has been quite helpful. I am working on some project management stuff with my company and I have been researching it to see what I can find. Thanks again!
Thanks for share, it will help me alot.
there is a reason to avoid multi column forms. Users forget or skip fields sooner, get confused. see http://baymard.com/blog/avoid-multi-column-forms
Perfect. just waht i was looking for. Thanks
Thank you. You saved my time.
You sir are awesome, this just saved me. Thanks so much
This is awesome. It helped me a lot. Thank you for posting.
Thanks! This is exactly what I was looking for.
Thanks for sharing, this has been quite helpful. I will like to use it. In web based project management software, all the errors can be removed easily and apart from that you can track and record all of your jobs. Even companies can customize project management software as per their requirements.
Thanks. In the fluid-person-horizontal-form.html, the labels overlap the inputs at certain screen sizes. In particular, the Last Name label overlaps the First Name input.
genius, thks!!!
Very clever!
Thanks for sharing!
Hi, I implemented also this way in my forms, but I was trying to check for a solution as described previous for the problem of "fluid-person-horizontal-form.html, the labels overlap the inputs at certain screen sizes. In particular, the Last Name label overlaps the First Name input.". Unfortunately this example has the same problem that I have, and I'ven't found any solutions yet. If someone have please provide some. Tks anyway.
Thanks for sharing!! ;)
thnak you !
Thanks for share, it will help me alot.
awesome. you saved my time
Very nice. Thank you for taking the time to put this together!
Nice post thanks for sharing with us
Thanks for share. it will help me alot .
Salesforce Support Service
Microsoft Dynamics CRM Support
Sharepoint Managed
Post a Comment