I have large number of form elements (80+) to design on the html page. Is there nice way to organize and design those elements ?
While I agree with #Pranay Rana about the pattern of breaking the fields up in sections, make it more semantic and give your AT (assistive technololgy) users a break and organize your forms and section related items off in <fieldset> elements.
put you control in Sections of Div and than minimize/maximize the dive
example : http://dyndiv.markusbordihn.de/example/moveable-min-max/
when you click cross sign it minimize and maixmize div....same thing you can do it by using +/- sign something like expading control. but this do involve javascript.
or
Make use of Tabs to organize control. : http://jqueryui.com/demos/tabs/
Related
I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
I'm renovating a legacy Java based web site. I've already greatly reduced the number of tags used on the front end by using CSS to do the graphic lay out of the "screens". Is there a CSS tag that will replace HTML tables that makes a good grid for HTML forms? Does it significantly reduce the number of tags? Is it reliable in most of the main browsers?
Tables are actually prevalently used to align forms. You take out the borders with <table borders='0'>. They are pretty reliable for aligning because the table cells in different rows line up.
You'll still probably want to use <table> tags for actual grid/table elements. But, you could consider using something like Javascript grid/table plugins for tables... for styling, and functionality.
I would suggest using <ul> and <li> elements (and then setting CSS rules for those elements,) when formatting <form> elements, though. If it doesn't seem to be working out... you can still leave the <form> in a table; over the past decade, however, browser support for CSS has made it a lot easier to use HTML lists instead of tables for formatting things like forms.
At work we had a situation in which a client required a web front for one of our products. None of use are web developers but since I was finishing up on my previous project I volunteered to give it a base.
I have spent the last week or so reading up on best practices and asp.net web forms. Based on requirements we settled on HTML 4 / ASP.NET / CSS 2.1. The customer is going to use the latest browsers so I got to concentrate on nice clean layout.
I have been working on samples using the 960.gs system and I am finding it pretty handy to lay out content without too much trouble, but, I have a major issue.
With all of the tutorials I have seen, they tend to stop or become quite vague as soon the inner most content layout is reached.
Is there any best practices here? or is there any tutorials regarding laying out the inner most content.
What I am talking about for instance is laying out the following:
<div id="question_1" >
<asp:Label runat="server">Question 1</asp:Label>
<asp:Label runat="server" >What is the name of the guy from the other thing?</asp:Label>
<asp:RadioButton runat="server" Text="Yes"></asp:RadioButton>
<asp:RadioButton runat="server" Text="No"></asp:RadioButton>
<asp:DropDownList runat="server"></asp:DropDownList>
</div>
The above html represents a fictional question object. This would be on a list of questions page, much like a survey. Currently, because I can't find the info I am pretty much using css to absolutely position the elements since, because I am using a grid system, I know the width of the box that this div is contained in.
EDIT: By absolutely positioned I mean within the containing element not the page as a whole... Just to clear that up.
From a form layout perspective there are two things to consider: usability and accessibility. Usability defines things like labels going on the left, fields on the right. The exception in this case being with radio buttons and check boxes when the label goes on the right.
Accessibility, defines that each field should have a label tag; fields should be logically grouped etc.
The RNIB have a collection of articles on web design which touch on accessibility and usability. Personally I think they are a great place to start.
EDIT:
Meat & veg answer: The ideal coders (should) try and achieve to style the form but maintain the flow, i.e. ensure that labels for text fields are styled to appear to the left but appear before the field in the HTML.
So, yes it is good practice to:
Wrap each label/field pair in a div, allowing you to clear/position this separate to other pairings.
Make the label display:block with a fixed width and float:left
Don't forget to add required * - I usually use a span within the label so I can control the style of the required * separately.
Use <fieldset> tags to group and style sets of label/field pairings
Unless you are trying to create a highly stylized form, avoid absolutely positioning anything you don't have to. I find that as soon as I absolutely position one thing, I have to absolutely position others for consistency so you should always first try and find a solution which allows elements to control the position of subsequent elements
I know developers who still use tables to arrange their forms. Is this bad? Yes, but it works and for a temporary solution or small, rarely used form this might be an appropriate trade-off.
Scott on Writing has a nice article on basic form styling. This guys is awesome and knows what he is talking about.
And also there are jQuery tools for creating nicer more responsive controls:
jQuery UI
Multi select
I've want to know what is the best practice or approach in dealing with multiple and complex columns with a form inside.
here's an example of the form I'm dealing with
How to properly write a HTML markup for this? If I wrap every form element with a 'DIV' for every column it would take a lot 'DIVs' and styles; and the width for every column that is not repeating.
So what I did is, I put all form element in the table. And I think that is not the standard way to do it.
If your in my shoes,
How would you deal with the columns with non-repeating width?
There is no standard for complex forms, but there are plenty of blog posts claiming to have figured out the perfect way to approach this problem. Most of them are well thought out, but ultimately you have to pick the one you're most comfortable with. I have some suggestions though:
Check out the US postal service change of address form. It's surprisingly well done
If you have lots of forms, using a grid system like 960.gs, blueprint.css, or YUI grids (shudder) is an easy way to implement a form. However grid systems are definitely considered bloat if that's the only place you'll use them.
Do a search for "tableless forms" on Google. You will see a lot of different implementations. Choose the one you like.
I would probably put each form element in a list item within an unordered list (I think semantically, it is a list of input elements that need to be filled in.)
I would then add classes to them for positioning and width etc - the columned ones would need to be given a width and floated left...
so:
<ul>
<li class="iName"><label for="name">Full name:</label><input name="name"/></li>
<li class="iEmail"><label for="email">Email:</label><input name="email"/></li>
etc etc...
</ul>
I believe this would be semantically correct and the most accessible way to do it.
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.