CSS grid for forms (multi-column)

Question

For further use, I will give the final result accurate to a pixel:

CSS code:

._25 { width: 21%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._50 { width: 46%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._75 { width: 71%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } ._100 { width: 96%; display: inline; float: left; margin-left: 2%; margin-right: 2%; } label { width: 100%; } input { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } textarea { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } select { border: 1px solid #B3B3B3; width: 100%; -moz-border-radius: 3px; } 

And an example HTML code:

 <div class="_50"> <p><label for="in_user">Username</label><input id="in_user" type="text" value=""/></p> </div> <div class="_50"> <p><label for="in_pass">Password</label><input id="in_pass" type="text" value=""/></p> </div> 

---

I recently started using CSS grid systems and I think that the whole process of creating a web page is much easier. Now I am trying to stylize form elements, but it is very difficult for me to create forms with columns , take the following example:

• div (width = 400 pixels)
  • the form
    • ul
      • most of
        • label
        • input (should be 200 pixels wide)
      • most of
        • another label
        • another input (should also be 200 pixels wide)

I mainly use a class with an attribute of width of 50%, but the location of both inputs side by side makes the line more than 100% (400 pixels) - I think this is because of borders, margins and indents .

Is there any CSS grid system that I can use to create multi-column forms, while all form elements are the same size (input, selectors, and text areas); eg. 1 entry in 1 column should have 400 pixels, while 2 columns should have 200 pixels each.

EDIT: Wufoo has some examples of what I'm trying to do, but I'm too clueless in CSS to understand all this code, and I would appreciate if anyone would give me some tips.

Answer 1

check this out: http://www.noupe.com/design/ultimate-guide-to-grid-based-web-design.html

there is everything you need to know, including css api and templates

EDIT: here is my final solution with css299 template

And here is a graphic example . Of course, you can easily change colors by editing css.

Answer 2

First of all, do not use the table. Placing form elements in a table does not solve your problem and complicates your maintenance. Using tables in addition to presenting a form is a sign of incompetence and complexity. It is also completely meaningless. Instead, you really need to write some CSS. Honestly, if you are going to use tables for non-tabular data, then do not even try to use CSS, as this increases the complexity of maintenance.

Here are some things to keep in mind:

1) Define all units in units of "em". Most form elements are designed to accommodate text. These elements, such as text fields and text field blocks, can be increased and decreased as a function of accessibility. This means that your ideal CSS mesh for the pixel will break the moment the user resizes the text on the page.

2) Do not wrap the form element in a div. Like a div, your form is a block level element. If the form does not have node nodes under the parent div, just point any view directly to the form element, and not to the parent element, which exists only to contain the form.

3) Group the elements of the form. If you are floating text fields, all things can be ruined if the forms move independently of the corresponding label elements. It will be easier to place an ordered list inside your form, and then wrap each form element in a list element. Thus, you only need to worry about defining the layout of the label element relative to the form control, and then arranging them together, defining the presentation of the list item. This method is also semantic and informs text readers about the order on your form elements.

4) Do not use an important announcement. This makes a quick fix in your CSS, but completely suppresses inheritance and completely complicates maintenance. Instead, take the extra time to write your code correctly the first time, so subsequent maintenance will be a quick and insignificant event.

5) Do not use an absolute position if you really do not know what you are doing, even if your form is set to a relative position. In most cases, absolute results with unexpected behavior and unexpected problems.

6) To make sure your CSS code actually defines the true mesh, use the Firefox MeasureIt plug-in. This will help you achieve amazing accuracy and save you incredible time when creating a mesh.

7) Do it right the first time, using as little code as possible to get the job and submit your form. Only then check your form for cross-browser accuracy. Make one correction for cross-browser accuracy at a time to limit unnecessary bloating of your CSS code.

Answer 3

Something like this might help. So I did it on the form. However, a little tweaking is required to make it work with the right width. This can help you get started.

CSS:

 .contact ul {margin:0; padding:0; list-style:none;} .contact li {margin-bottom:10px; overflow:hidden;} .contact label {display:block; margin-bottom:2px;} .contact label span {color:#999;} .contact .input {width:592px; border:1px solid #E0E0E0; background:#F6F6F6;} .contact select.input {border:1px solid #E0E0E0; background:#F6F6F6;} .contact .third {float:left; width:193px; margin-right:10px;} .contact .third .input {width:185px;} .contact .half {float:left; width:294px; margin-right:10px;} .contact .half .input {width:286px;} .contact .half select.input {width:294px;} .contact .omega {margin-right:0;} 

HTML:

 <form action="/contact-us" method="post" class="contact"> <ul> <li> <div class="half"> <label for="name">Name:</label> <input type="text" id="name" name="name" class="input" /> </div> </li> <li> <label for="address">Address:</label> <input type="text" id="address" name="address" class="input" /> </li> <li> <div class="third"> <label for="city">City:</label> <input type="text" id="city" name="city" class="input" /> </div> <div class="third"> <label for="state">State:</label> <input type="text" id="state" name="state" class="input" /> </div> <div class="third omega"> <label for="zip">Zip:</label> <input type="text" id="zip" name="zip" class="input" /> </div> </li> </ul> </form> 

Answer 4

Here is an example of a basic launch that might be useful:

 <!doctype html> <html lang="en"> <head> <style> fieldset { width: 400px; padding: 1%; } input[type=text], select, textarea { width: 98%; } .half { float: left; width: 48%; padding: 1%; } .full { clear: both; width: 98%; padding: 1%; } .right { text-align: right; } </style> </head> <body> <fieldset> <legend>Contact form</legend> <form> <div class="half"> <label for="name">Name</label> <input type="text" id="name" name="name"> </div> <div class="half"> <label for="email">Email</label> <input type="text" id="email" name="email"> </div> <div class="half"> <label for="zip">Zip / Postal code</label> <input type="text" id="zip" name="zip"> </div> <div class="half"> <label for="country">Country</label> <select id="country" name="country"><option></option></select> </div> <div class="full"> <label for="message">Message</label> <textarea id="message" name="message"></textarea> </div> <div class="half"> <input type="checkbox" id="copy" name="copy"> <label for="copy">Send me a copy</label> </div> <div class="half right"> <input type="submit" value="send"> </div> </form> </fieldset> </body> </html> 

Note that I am using a left-floating half-width div instead of unordered list items.

As you insist on using percentages, don't expect it to be a pixel in any browser. If you want the whole pixel to be better, you really need to use pixels.

Answer 5

This creates a CSS form structure that does what you requested:

https://web.archive.org/web/20120503010054/http://formee.org/demo/index.htm

Answer 6

I think this is what you are looking for:

http://www.alistapart.com/articles/prettyaccessibleforms/

This will help simplify the structure a bit. It doesn’t explicitly describe how to create multiple column shapes, but this method can probably expand to the point where with some of your creativity.

Answer 7

There is no need for a 960 fluid system here if you do not want the form to expand and fit in with the browser.

I would recommend the plain old 960 grid system for this. Width 960 is great for meshes because it evenly separates 12 and 16, which allows you to customize the perfect three and four column layouts.

The best way to get to know the 960 grid is to look at css cce and the html demo source

 <div class="grid_6"> <p> contact form </p> </div> <div class="grid_3"> <p> name </p> </div> 

Answer 8

I needed to do something similar, and in the end I set half the columns to 46%. It leaves an extra bit of space to fill and gets all your input fields in sequence.

Answer 9

One answer Blueprint . I read where you don’t think this is the answer, but it’s the same as I did. All the ease of tables with all the power of CSS.

The math is pretty simple with the plan. Let's say your form spans 10 columns.

 <div id="contact-form" class="span-10"> <h3>Contact Form</h3> <form action="contact"> <div id="form-sec-1" class="span-5"> <label>Name</label> <br/> <input type="text" name="name" /> <br/> <label>ZIP code</label> <br/> <input type="text" name="zipcode" /> </div> <div id="form-sec-2" class="span-5 last"> <label>Email</label> <br/> <input type="text" name="email" /> <br/> <label>Country</label> <br/> <input type="text" name="country" /> </div> <div id="form-sec-3" class="span-10 last"> <label>Message</label> <br/> <textarea name="message" /> </div> <div id="form-sec-4" class="span-8"> <input type="checkbox" name="copy"/> <label>Send me a copy</label> </div> <div id="form-sec-5" class="span-2"> <input type="submit"/> </div> </form> </div> 

Answer 10

Oh wow, I just thought there was a question with the css world in the world, then I saw this CSS grid layout editor project, http://dev.w3.org/csswg/css3-grid-align/

I still can’t explain why the css world really didn’t think about it so what explanation could be due to the lack of such a function in css.