Replicate Form's HTML Structure?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a form (just an example) as follows:

<form method="post" action="#">
    <legend>Personal Data</legend>
    <label for="name">Name:</label>
    <input type="text" value="name"/>  
    <label for="cv">Curriculum Vitae:</label>
    <input type="text" value="cv"/>
    <label for="email">Email:</label>
    <input type="text> value="email"/>
    <input type="submit" value="Submit"/>

I need to create a page to display the user's info.
On the bottom I need an anchor "Delete" to delete that user.

The structure of the data display is similar to the form's.
However in complex cases is not exactly the same ...

<h1>John Information</h1>

Personal Data   >> Should this be an H2?

  >> Should the data use an UL?

  Name: John    >> Should I use an UL?
  Curriculum Vitae: Some long text

Contact  >> Should this be an H2?

  Email: john@d omain .com

Action  >> Should this be an H2?

<a href="user/1/delete">Delete User</a>

How should I markup this to kind of "replicate" the form's structure?

Thank You,

Re: Replicate Form's HTML Structure?

On Thu, 03 Nov 2011 07:58:46 -0700, Shapper wrote:

Quoted text here. Click to load it

You could use something like the following, but it's really up to you.

    <li>Personal Data<br />
    <li>Contact<br />
    <li>Action<br />
    <li><a href="__url_for_delete_action__">Delete</a></li>

It might be easier to clone the original form, giving all data fields the
disabled="disabled" attribute, and replacing the submit element with a

<input type="button" value="Delete"
onclick="window.location='__url_for_delete_action__'" />


Denis McMahon

Re: Replicate Form's HTML Structure?

11/3/2011 4:58 PM, Shapper wrote:

Quoted text here. Click to load it

If your questions do not reflect the real problems you have, don't
expect even the besy answers to address you real problems. If you really
_have_ a form (a fully functional <form> element), you should be able to
post and you should post a URL, if your question relates to HTML
authoring for the WWW, as it should, in this group.

Quoted text here. Click to load it

How is the user supposed to write the course of his life (curriculum
vitae) in about 20 characters?

Quoted text here. Click to load it

I can see a field, but where is the set?

Quoted text here. Click to load it

Is that legend supposed to actually help someone?

Quoted text here. Click to load it

What "user's info"? From what?

Quoted text here. Click to load it

Bottom of what? An _anchor_? Are you serious?

Quoted text here. Click to load it

You're not telling us any relevant facts, are you?

Quoted text here. Click to load it

If you wish to replicate the form's structure, why don't you just do that?

Yucca, /

Re: Replicate Form's HTML Structure?


Yucca, you are right.
CV should be a textarea and last one is not a set.

It was just a simple form example.
On the application I have many forms.
In all of them a fieldset will have more than one field.

I was just trying to figure a "standard" way to display data.

"Transform" Legends in Fieldsets to Headers didn't seem right.

So maybe just a spam or even the list structure suggested by Dennis.

I am not using a form with Disabled items because in some cases the view and
form will display the data in a different way even if with a similar structure.

Thank You,

Re: Replicate Form's HTML Structure?

11/3/2011 8:17 PM, Shapper wrote:

Quoted text here. Click to load it

Everything in an HTML document is data, though part of it is special
kind of data called "metadata" or "markup", not meant to be displayed
under normal conditions. So the question is, well, _broad_.

If it's data consisting of data item names (like "name" and "phone") and
data item values (like a specific name and a phone number), then it's
normally best to put them in a table. It's a matter of style then
whether you default the columns to left-aligned or right-align the first
column, so this issue is best delegated to CSS.

People have also used <dl> markup for such purposes. Though semantically
questionable by definitions in current HTML specs, it corresponds to the
common idea of <dl> as a list of name/value pairs, rather than a
definition list, and this common idea is going to be made official in
HTML5 (allow 10 years for finalizing the standard).

If the data is more structured, so that the name/value pairs belong to
groups, then there's the possibility of still putting them all in one
table but using interspersed grouping rows, like

<tr><td colspan=2><strong>Contact information</strong>

Alternatively, you could put each group in table of its own and use
either an <h2> element before each table (or some other <h?> element -
use heading elements according to structure, and set their font size in
CSS) or a <caption> element inside each table.

The main problem with the latter approach is that it makes it difficult
to achieve stylistic uniformity, like making the tables equally wide and
their first columns equally wide. Setting an explicit width, using any
unit, is far from ideal.

Yucca, /

Re: Replicate Form's HTML Structure?

Quoted text here. Click to load it

I've been using DL like this for a long time, styled accordingly.  The
W3C's Semantic Data Extractor
< does very nicely
with it.

Adrienne Boswell
Arbpen Web Site Design Services - /
The Good Plate - Fresh Gourmet Recipes - /
Please respond to the group so others can share

Re: Replicate Form's HTML Structure?

11/6/2011 5:57 AM, Adrienne Boswell wrote:

Quoted text here. Click to load it

I wonder what the Semantic Data Extractor is supposed to be used for.
The page claims:

"The aim is to show that providing a semantically rich HTML gives much
more value to your code: using a semantically rich HTML code allows a
better use of CSS, makes your HTML intelligible to a wider range of user
agents (especially search engines bots)."

I don't see how "semantically rich HTML code" improves CSS usage. I do
understand the idea that robots _could_ make use of semantically rich
HTML, but I have seen very few signs of such things actually happening.
In particular, is there any evidence or even hint of any robot paying
any attention to <dl> markup?

Anyway, I threw a part of the HTML 4.01 spec at it, namely
and it analyzed it saying, among other things, that some terms "are
defined in the given HTML page". The terms include for example "Notes:".

I think "note" is a common English word, though as capitalized it could
be part of some trademark (I'm thinking of "Lotus Notes" now). But I
cannot see anywhere on the analyzed page that word used as a _term_,
still less _defined_ as a term.

Of course, the Semantic Data Extractor couldn't tell whether something
is actually used as a term, or defined as a term, no matter how some
markup is interpreted. It can, at most, analyze what the markup on the
page _claims_ about semantic relationships.

Yucca, /

Re: Replicate Form's HTML Structure?

Quoted text here. Click to load it

I could see a good use for it, for example, a recipe could be marked up

<dt>Flour</dt><dd>1 1/2 cup</dd>
<dt>Sugar</dt><dd>2 tablespoons</dd>
<dt>Baking Powder</dt><dd>1 1/2 teaspoons</dd>
<dt>Salt</dt><dd>1/2 teaspoon</dd>
<dt>Eggs, Separated</dt><dd>2</dd>
<dt>Milk</dt><dd>1 cup</dd>
<dt>Vanilla Extract</dt><dd>1 teaspoon</dd>
<dt>Melted Butter</dt><dd>4 tablespoons</dd>
<li>Preheat the waffle iron to the desired setting.</li>
<li>Sift the flour, sugar, baking powder and salt together into a deep
<li>Beat the egg whites until they come to stiff peaks.  Set aside.</li>
<li>Add the egg yolks to the flour mixture.</li>
<li>Add the milk and vanilla to the flour mixture, and stir to combine.
<li>Add the melted butter, and stir to combine.</li>
<li>Carefully fold the egg whites into the batter.  It is okay to have
small specks of white. Set aside until the waffle iron is ready.</li>
<li>Lightly oil the waffle iron with a flavorless oil or cooking spray.
<li>Pour batter on the waffle iron, not all the way to the rim.  Use the
back of a large spoon to distribute the batter almost to the edge.  Close
the waffle iron.</li>
<li>The waffle will be ready either when the light goes off, or the
waffle stops steaming.</li>
<li>Remove the waffle from the waffle iron and keep warm while the rest
of the waffles are prepared.  A Mexican torilla keeper is a good
candidate for this job.</li>
<li>Serve with melted butter, and a variety of warmed syrups.</li>

Adrienne Boswell
Arbpen Web Site Design Services - /
The Good Plate - Fresh Gourmet Recipes - /
Please respond to the group so others can share

Re: Replicate Form's HTML Structure?

11/6/2011 5:53 PM, Adrienne Boswell wrote:

Quoted text here. Click to load it

Your example illustrates one common use of <dl>, but I don't see how it
relates to anything in my text quoted above. You are not referring to
any robot behavior (even hypothetically), and your sample has no CSS.

Regarding recipes, markup, and search engines, the most important
practical side of the matter nowadays might be the use of microdata as
per (since that's what three major search engines have
announced to support). However, Google seems to be mainly interested in
large sites in this respect, so it's more a matter of the logic of
automatic conversion of bulks of recipe data to HTML format rather than
hand-coding all the itemscope=... and other attributes.

In any case, such metadata deals with fairly specific semantics,
concepts like "recipe" and "ingredient" and "amount", rather than the
very abstract (if any) semantics of <dl>. And you can use microdata (or
other low-level metadata) rather independently of your choice of HTML
meta tags. It's the attributes that count then, not element names.

In CSS styling, <dl> tends to be a problem rather than a solution.

Quoted text here. Click to load it

I cannot imagine a world where the term "flour" would be defined by the
expression "1 1/2 cup". Rather, an understanding of the meaning of the
common word (not term) "flour" is implied here.

By the way, you can write 1½ or, equivalently in HTML, 1&frac12; instead
of the somewhat clumsy expression 1 1/2.

And I don't quite see why you would use <dl> for recipe ingredients even
for the presentational effect. Normally a table is more readable and
more compact (and more logical) for such purposes.

Yucca, /

Site Timeline