HTML code question
- Started
- Last post
- 12 Responses
- ukit
OK front end dev experts out there, how would you best structure the following...
Let's say I have a series of form fields in an application, each consisting of a text label and an input field. Each pair of items needs to have a way to identify it so it can be shown or hidden with JS.
I saw one of the devs was coding it up with a <dl>, <dt>, <dd> type approach, and then wrapping a <div> around each <dl> <dt> pair, but I think that is bad HTML. Now obviously this is easy to accomplish in a bunch of ways, but any thoughts on the best way to do it?
- bigtrickagain0
i do this:
<label id="nameLabel" class="nameFormRow" for="nameField">Name:</label><input id="nameField" class="nameFormRow" type="text" />
and then i use jquery and do an ol $(".nameFormRow") whenever i need to reference that set o things.
- airey0
my cat's breath smells like cat food.
- Hall0
What is this 'HTML code' that you speak of?
If 'front end' involves dancing girls then i want in!
- ukit0
Cool, 33% helpful responses. I'll take it.
- i thought airey's response was a bit helpfulbigtrickagain
- thank-you sir. not everybody gets the symbolism.airey
- there was symbolism?bigtrickagain
- well, when i say 'not everybody' i include myself. i still believe there's some in there, i just don't see it.airey
- you know, it'll be some impressive metaphoric statement that humankind will point out in future years.airey
- wondering how i was so misjudged and misunderstood. no doubt this led to my suicide.airey
- uh huh.bigtrickagain
- No, not helpful at all actually, if we're being honestukit
- isn't light relief a kind of help. when you think of it.airey
- I was just thinking, "I wonder what airey's cat's breath smells like."fugged
- o rly? me too!bigtrickagain
- I suppose it made bigtrick's response seem more credible in comparison, helping me arrive at a decision quickerukit
- i am the 'Comparison Man'. a d-list unsuperhero.airey
- BettyBotox0
Mmmm, something like
<div id="somethingunique"><label>field title</label><input name="" id=""/></div>
will do the job. Use JQuery or some simple JavaScript to hide the div...
- ukit0
I'd rather use something that is intended as a list or set of items than div. I'm leaning towards a <ul>, <li> format and then <label> <input> as bigtrick suggests above.
- fugged0
use label god damn it!
no seriously. that's what's it's intended for. Also, it allows the user to click on the text to give the field focus. This is super nice, especially with checkboxes and radios.
You can still wrap your form rows inside of a list.
<ul>
<li><label/><input/></li>
</ul>- Yup, that's what I just said damn it!ukit
- ah fuck. if i actually read what you said, i would have seen that you are going to do that.fugged
- I guess the <dl> element is also intended for this sort of thing, but it doesn't give you control at a row level, which is kind of annoyingukit
- nothing to see here. move along...fugged
- annoyingukit
- hahaukit
- :)fugged
- Mojo0
Technically it's not code, but I'll let you off ;)
Rather than use lists for forms (its not right, is it), I prefer to simply list label, input, use a unique class applied to both, float both left, clear the inputs. Give the labels a width and they'll line up that way.
- ukit0
Point taken but you know what fuck it, seems right enough doesn't it?;) I'd rather not have to add class names to both subitems, that adds to the size of the page and makes the JQuery less clean to execute.
If Tim Berners-Lee has a problem he should have created a structure that allows for this sort of thing in the first damn place.
- Also there may be additional items, help tips etc, nested in each rowukit
- spraycan0
the best way to align a row col field input is using a table then set name="" for each one
- bigtrickagain0
STOP POSTING ANSWERS
I ALREADY WON
NEENER NEENER.- oh wait i lostbigtrickagain
- maybe i should leave my cubicle for the day now anywaybigtrickagain