Looking for ways to display forms within HTML elements |
[eluser]Xeoncross[/eluser]
I am looking for recommendations on how best to place HTML form elements like inputs and textareas inside of CSS customizable HTML element lists. Standard form: Code: <lable for="username">Username</label> The way I want to do it: Code: <dl> Or even like this to show help with each item: Code: <dl> Does anyone have any better ways of doing this? (Don't even recommend Tables - I want full CSS customization)
[eluser]ReGeDa[/eluser]
CSS: Code: div.formed { Code: <form>
[eluser]Xeoncross[/eluser]
[quote author="ReGeDa" date="1218332939"] Code: <form> Yes, there is always the ol' <UL>. ![]() That doesn't provide support for a description though. Also, why even add the div class? Just ul.formed or form ul.
[eluser]Xeoncross[/eluser]
I want more input - therefore I am forced to drastic measures. How about this: Code: <table> I know, I know, I am placing my life on the line with this code...
[eluser]ReGeDa[/eluser]
why not? Code: <ul>
[eluser]erik.brannstrom[/eluser]
What was so wrong with the UL-version that you decided to table up? If you need descriptions, add a span and style ul li span to your hearts' content.
[eluser]Xeoncross[/eluser]
[quote author="erik.brannstrom" date="1219371201"]What was so wrong with the UL-version that you decided to table up?[/quote] This is about finding new ideas and arrangements of HTML items to form complex forms. Shoot, if I just wanted a single thing I would just stick with DL lists which offer WAY more semantic control than a UL. Also, you can rest assured that I would never use a table in any of my forms - I just wanted to bump this thread and needed something to put there.
[eluser]beemr[/eluser]
I've used <dl> for forms, and I definitely prefer it, but it can be too finicky if you need to automate parts of your form. Checkboxes and radio buttons were kinda dicey, semantics-wise. That being said, I still prefer to use <dl>s in a number of situation, so I thought I'd build an extension to the HTML_helper. It works with the ol() and ul() functions so you could make an ordered list of definition lists should you so desire You can find it in the wiki, titled "definition list helper". Hope you find it useful.
[eluser]xwero[/eluser]
I think it's a misuse of the dl tag looking at the examples in the starter topic. If you want a jumped in input field you can make them display:block and add padding to the input tag. If you want a hint text use the title attribute of the label. semantically those options are more correct. Css is meant to place your page element upside down if you want so take advantage of it and use the tags for their appropriate purpose. |
Welcome Guest, Not a member yet? Register Sign In |