Question

In my web application I have a user profile page. That page has these elements on it:

Connect with Twitter
Connect with Facebook
Timezone Select
Language Select

The first two things pop up an OAuth window allowing the user to connect. The last two things are saved with AJAX.

When I’m doing up the page, how should I do the HTML? I think that all of the items should probably be <li> elements in a ‘ul’ element, opposed to separate ‘div’ or ‘p’ elements for each.

But what container element should I use? I am debating between just using a ‘div’ and using a ‘form’ that has no action.

I am collecting some data, that’s the argument for a ‘form’ element, but the form is not actually going to be used – there will be no submit button. So that is the argument against it.

What would be the best practice for doing this? If you can provide a link to some supporting documentation that would be helpful, too.

Thanks!

Answer 1

Best practice is making the site work without Javascript, then adding Javascript / AJAX to it incrementally, as enhancements.

Progressive Enhancement (Wikipedia)

Progressive enhancement is a strategy
for web design that emphasizes
accessibility, semantic HTML markup,
and external stylesheet and scripting
technologies. Progressive enhancement
uses web technologies in a layered
fashion that allows everyone to access
the basic content and functionality of
a web page, using any browser or
Internet connection, while also
providing those with better bandwidth,
more advanced browser software or more
experience an enhanced version of the
page.

So yes, you should use a form.**

** if you care about progressive enhancement. As discussed in the comments for this answer, in your case, where you don’t / can’t care, it doesn’t matter. Use whatever element you like best.