Forums

grahamcrackers

Hi,

I have an online form that I've designed and now need to build... (design attached) Regarding the actual fields and the help bubbles to their right, I'm not sure what the best approach would be (I'm super-new to the development side of web design). If anyone has any good suggestion on how to approach those, that would be great.

I wanted to have fairly precise control over some of the formating, including the position of the help bubbles/hints. I don't want to go div crazy if there's a more correct way to do it. I thought about maybe using a definition list (for field labels & fields) but wasn't sure how I'd handle the hints... Anyway, just looking for some suggestions!

thank you!

chazzwick

I think this is the best markup for the form:

<form>
    <dl>
        <dt><label for=\"firstname\">Name:</label></dt>
        <dd><input type=\"text\" name=\"firstname\" id=\"firstname\" /></dd>
        <div class=\"bubblehint\">Bubble text</div>

        <dt><label for=\"lastname\">Last Name:</label></dt>
        <dd><input type=\"text\" name=\"lastname\" id=\"lastname\" /></dd>

        etc. etc.

    </dl>
</form>

then you can target the <dt> and <dd> separately, and style it however you want.

treehouse : what would you like to learn today?

Forums

Positioning Elements of an Online Form