How to Display Form Data?

HTML & CSS
1

This is going to sound silly, but how do I display my Form Data after a User submits the Form??

I have a Q&A Form with this format…

[INDENT]Change Profile Answers

1.) Why did you decide to start your own business?
<answer here>

2.) What advice would you share with others on what NOT to do?
<answer here>

3.) What advice would you share with others on what TO do?
<answer here>

4.) How do you compete against large corporations?
<answer here>

5.) What Business Structure do you have?
<answer here>
[/INDENT]

After a User completes the Form, I want to display the Questions and Answers in the same format in the User’s Profile. However, I don’t want the User or anyone viewing the User’s Profile to be able to edit things! (Any changes need to be made in the “change_answers.php” script/form.)

Do I display the information using a Form but change something so it is read-only?

Or do I display the data using things like <p>, <div>, etc??

Hope that makes sense?!

Thanks,

Debbie

2

Presumably the info will all be saved to a database, so I would suggest you “display the data using things like <p>, <div>, etc”.

3

So in other words I hear you saying, “Ditch using a Form for display purposes, and just use HTML elements that you would normally use if the data was pure text.”

Sound about right?

Thanks,

Debbie

4

Absolutely. :slight_smile: Let’s see what others say, but using a form for this purpose sounds totally wrong to me. Could have all kinds of consequences, including confusing users.

5

ditto

6

I wouldn’t even bother with P, you have a list of questions and their responses – those are LI inside a OL, WITHOUT anything more complex than line-breaks inside them.

The question mark and normal text is all the semantics you need apart from that, unless you feel the need to style the answer different from the question, and that’s not semantics, that’s presentation, so that’s SPAN’s job.

Unless of course the answer is actually more than a paragraph, but since that’s user input that’s nitpicking; normally I rag on double breaks, but in this case I’d be tempted to say “Oh well”

Remember, semantics is NOT about slapping P around anything that happens to be text…slapping definition lists on anything that happens to be multi-column, or making sure every little bit of text has that ‘perfect’ tag around it.

Another concept lost on the “let’s have a tag for EVERYTHING” folks… to the point where by the time of HTML 7 we’ll literally end up with one tag per word of CDATA with five attributes on it.

7

You lost me.

Are you saying…


<li>1.) Why did you decide to start your own business?</li>

<li>Because I wanted to be my own boss!!</li>

Or do you mean…


<li>1.) Why did you decide to start your own business?<br />

Because I wanted to be my own boss!!</li>

Or something else…

Interesting point.

What do I need to do in my Form on the front end and on the display on the rear-end so a User can type an Answer like this and it is output as such…

Astronomers have found four nearby white dwarf stars surrounded by disks of material that could be the remains of rocky planets much like Earth and one star in particular appears to be in the act of swallowing up what’s left of an Earthlike planet’s core.

The research, announced on Thursday by the Royal Astronomical Society, gives a chilling look at the eventual fate that may await our own planet. Astronomers from the University of Warwick used Hubble to identify the composition of four white dwarfs’ atmospheres, found during a survey of more than 80 such stars located within 100 light-years of the sun. What they found was a majority of the material was composed of elements found in our own solar system: oxygen, magnesium, silicon and iron. Together these elements make up 93 percent of our planet.

In addition, a curiously low ratio of carbon was identified, indicating that rocky planets were at one time in orbit around the stars.

Since white dwarfs are the leftover cores of stellar-mass stars that have burnt through all their fuel, the material in their atmosphere is likely the leftover bits of planets. These worlds may have once been held in safe, stable orbits. But when their stars neared the ends of their lives, the stars may have expanded, possibly engulfing the innermost planets and disrupting the orbits of others. This could have triggering a runaway collision effect that eventually shattered all the planets, forming an orbiting cloud of debris.

All very good reminders, DeathShadow. Thanks!!

Debbie

8

That one. Though I’d probably have the block level tags on their own lines making it easier to read and let the OL do the work of numbering them :smiley:


<li>
  Why did you decide to start your own business?<br />
  Because I wanted to be my own boss!!!
</li>

It is slightly conceivable I’d consider putting the answer in a shortquote (Q) tag.

9

ha ha, I use definition lists.
http://stommepoes.nl/Scooterverzekeren/scooter2/afsluitenresultaat.html (there’s an error message but only there for the backender… and yes, it’s not friendly!)

10

Since yours are fields and data, NOT questions and answers, that makes a bit more sense.

For me that distinction would hinge on the data; though really in your case a table may in fact have been the more semantic answer; those are not terms or definitions, they are fieldnames and values; TH scope=“row” and TD.

11

Agreed. But here is where I go along with the suggestions in the spec (where often I don’t, such as p’s in a form) and believe it was wrongfully called “terms and definitions” when what we needed was “name-value pairs”. A hash. A dictionary. An associative array. Whatever your programming language of choice calls it. Definition list was probably a very poor name since the spec then immediately mentions non-terms and non-definition uses, which I believe are more needed than a narrow “dictionary definitions” element.

Similarly while everyone seems to agree that p’s should be used for interviews/dialogue, we also seem to mostly agree these do not show the structure we need to show. They dropped <dialog> tho. :frowning:

12

I’m increasingly disagreeing with that for a variety of reasons; not the least of which being that’s what tables are for; the orderly arrangement of data and rows and columns… otherwise, there’d be no reason to have <th scope=“row”>

More so though on things like dialogues… since language has this amazing thing called PUNCTUATION. A book gets along just fine without needing any extra tags, which is why the whole ‘dialog’ tag nonsense getting the axe got a slow clap out of me.

Of course, which spec – is that something new in 5, since I don’t seem to remember the possibility of them being anything else in 4/earlier… or am i thinking 3/earlier. What the? dug into the 4 spec again on that… what’s with the new RE-RE examples? when were those added because… 1) Those weren’t there last time i looked at 4… 2) none of them make any sense. Out of order DT+DT+DD+DD?!? Advocating using it for discussions? Where the blazes did that bit of idiocy come from?

Or is this another of those changes that I keep coming across that have to be recent (like the h1/small example having gone awol) without them increasing the revision date? I’m really starting to think they’ve been making changes to 4 and not documenting them.

I just read it beginning to end like four years ago… and now it’s NOT the document I read… not even close. Again, wondering if senility is setting in or something.

Either way, I’m really starting to think it might not be a bad idea to dial HTML all the way back to HTML 2 in terms of the intent of the tags. It seems like where before we had people just slapping endless presentation and to blazes with semantics, the pendulum has swung so far the other direction everyone’s obsessed with putting meanings around every last word…

Something that normal text has done just fine without for centuries. Dialogues are a great example of that – we have colons for a reason, to divide a label from it’s value… that way you don’t have to crap all over the page with pointless extra tags, unless of course you want to style it differently… which sounds like span’s or B’s job since there’s no legitimate reason to apply extra meaning atop what the text and punctuation already provides.

Wait, a colon isn’t for crapping on things?

13

It’s gotten to the point where I’d rather hear an interview than read one. The written version has no structure, except newlines and quote characters. The audio version actually lets me know who said what much easier… but then, so do magazines. They bold and often enlarge the question and preface all text by the name of who said it. I feel HTML is incapable of properly displaying the structure (it displays the text just fine) of plays, musicals, interviews, lyrics and FAQs (none of which I believe belong in data tables). Since structure is an essential part of navigation for many of us, it matters there as well. You don’t navigate (much) through a book, and when you do, you use its structure (toc, chapters, prologues, epilogues, asides and addendums, titles…).

Re dialog, it was a briefly-lived proposal of HTML5, though it had been discussed in backrooms ever since DL was definitively removed as a possibility for marking up interviews and FAQs.

It’s for making ascii bunnies! =:3

14

I’m not, but then I hate podcasts, video tutorials and the like as well because they’re snooze-fests for me. It’s always “anybody got a transcript”?

That’s often the fault of the writer or transcriber… as you actually go on to say in a way…

BINGO.


<p>
  Robin: I'm trying to be nonchalant here.
</p><p>
  Zatanna: Why? Be as chalant as you like.
</p>

Does that really need more markup? I think not.

Or maybe I’m just used to reading stageplays WITHOUT any extra bold, italic, whatever… Since in 1776 I’ve been Adams twice, Franklin once and Dickinson once… much less my playing Max Bialistock once in The Producers and Vernon Hines in The Pajama Game.

Though it seems to me some people are punctuation blind – hence the ‘need’ for illegible nonsense like color syntax highlighting, throwing extra spaces around mathematical operators for Christmas only knows what reason, bolding text who’s meaning is already clear, etc, etc…

But what does one expect when the literacy rate is at a all time high, but literacy level is at a all time low; it’s like education is going for quantity, not quality.

15

It does if I want to extract information from it.

Let’s say you decide that indeed this does belong in a table. Now the speaker’s name is in a separate tag from the text which they speak. I should also be able to call up all the questions, or all the answers, with my interface, similar to how in a screen reader I can call up all headers, or all lists, or all anchors… I believe a dialogue is something to be skimmed as well as something to be consumed like a book (read straight through).

You also don’t get any benefit from syntax highlighting. Most of the rest of us do. I’m thinking of adding HTML syntax highlighting to my mutt mail so I can actually read those obnoxious HTML emails I get from the government and whatnot, instead of trying to find > characters and hoping there’s plain text following.

This is usually true for me as well, though the good transcripts at least bold the names of the speakers (and shorten them to initials usually as well). People speak too slow compared to reading.

But it would be nicer for me if the HTML itself let me grab what I wanted, by selecting what something is (by speaker, by text, by time, by topic) rather than grepping through plaintext.

One thing I like about using dl’s to show back stuff like form info, I can add heading tags and other things in the dd. The dd itself can have a lot of structure (also in a li).

16

I agree with Mallory, dl’s are a good choice for you. I wouldn’t use ol/ul because a li question next to a li answer means nothing to their relation, and a question and an answer together in a li makes no sense at all.

No more than a question paragraph next to an answer paragraph. A belletristic dialog is fundamentally different from a Q&A. Fundamentally different.

A few lines of dialog one after another, in prose, can implicate persons who aren’t even talking one with another, from different discussions, from different groups, and it doesn’t have to involve any questioning and answering.

But a Q&A is always binary in nature: a question with its answer, even if, by absurd, the protagonists are different for each pair. Semantically, you need to reflect that.

<hr>

One thing is for sure: I don’t see a numbered list here at all. There is no reason a question should take precedence before another, like here, for example:

4.) How do you compete against large corporations?
<answer here>

5.) What Business Structure do you have?
<answer here>

An ordered list means absolute precedence based on some progression rules. I don’t see any here. Just a random rule for author’s counting.

<hr>

My first choice is the use of headings, because of their natural semantic sectioning, and my newest choice is the use of sections together with headings, under certain conditions, of course: I have to have complex enough content with my Q&As. Otherwise, dl’s are fine.

I made a little graphics. It’s pretty self explanatory, but feel free to ask questions: http://i1054.photobucket.com/albums/s490/itmitica/itmitica-qa.png

17

I agree with Mitica. The above is simple heading and paragraph text for me, not a list, particularly not an ordered list, and I’m not sure I’d use a definition list either, thought it’s probably more suited than an <ol>.

18

Okay, I’m back! (Sorry I disappeared from this thread for a while…)

Here is my take on things…

Point #1:
Because the purpose of this section of my website is to really elicit people’s deep, inner feelings on things, I expect people to type long responses. And, therefore, there needs to be a way to capture and display Answers in separate paragraphs as I mentioned in Post #7 above.

Point #2:
Last Fall I created a “Small-Business Facts” section on my Home Page. After some debate similar to here, the recommendation was to use Headers and Paragraphs in tandem like this…


	<div id="boxFacts">
		<h2>Small-Business Facts<br />
			<small>Some things to know about Small-Business...</small>
		</h2>

		<!-- Fact #1 -->
		<h3><span>Fact #01:</span>Small-Businesses represent 99.7% of all employer firms.</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
			posuere cubilia Curae; Fusce ultrices lacus nec leo mattisvestibulum.
			Donec pharetra luctus nisl et sollicitudin. Aliquam
			faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
			luctus auctor, metus libero dictum nunc, vitae imperdiet est
			massa eget massa.
		</p>

		<!-- Fact #2 -->
		<h3><span>Fact #02:</span>Small-Businesses employ half of all private sector employees.</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Mauris quam nisi, egestas mattis commodo a, adipiscing eget erat.
			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
			posuere cubilia Curae; Fusce ultrices lacus nec leo mattis
			vestibulum. Donec pharetra luctus nisl et sollicitudin. Aliquam
			faucibus tellus at orci pretium faucibus. Duis malesuada, enim ac
			luctus auctor, metus libero dictum nunc, vitae imperdiet est
			massa eget massa.
		</p>

In my opinion, that sure looks a lot like my “Questions & Answers”, don’t you think?! :wink:

Point #3:
I don’t do HTML5, so that is off the table.

Point #4:
As far as Ordered vs Unordered… Questions and Answers are stored in my database. They have no intrinsic “order” other than the order that I impose at any given time…

Maybe there is some big headline in the news about the Economy, so I change my site’s focus and deem that “Why are Small-Businesses important to the U.S. Economy?” is a key question that I want people talking about this week.

In that case, QuestionID=3492 just got promoted from QuestionNo=9 to QuestionNo=1 if you follow me?!

How that relates to HTML, I don’t know.

Point #5:
Questions and Answers need to remain tightly-knit.

If someone blabs on-and-on (think Stomme poes after too many lattes…), then my markup needs to make it abundantly clear than the 5 paragraphs the User just typed all pertain to the question, “Why are Small-Businesses the back-bone of America?”

In closing, I think what I am doing for my “Facts” would apply to my “Q&A”, except that I want to be sure multi-paragraphs would still fit into that approach.

What do you think, HTML Gods?! :-/

Thanks,

Debbie

19

… and in the case of that example, I’m not even sure what in blazes that even means… what is there to ‘extract’? The first few words of the paragraph followed by a colon… What is there to add for meaning or to add?

I don’t get it. Unless you’re talking about writing to the engine, which I thought was supposed to be a bad thing. There’s no legitimate reason in a script or conversation to add tags to do what simple punctuation already does!

Again, I suspect punctuation blindness or something.

20

Though, in a ul, li’s can themselves have headings and paragraphs… but yeah I don’t necessarily see the listiness of it if you prefer simple heading/paragraph sets.
I like listiness in FAQs and returning form input, as in DLs. I believe you once called it “list addiction” in another thread :smiley: Gotta go take my meds.

Sounds like headings/paragraph pairs, lists and simple paragraphs are all mostly okay. We each have our personal preferences, which doesn’t make us right, but I think your typical Q&A structure for form results sounds fine.

Don’t worry, if you accidentally an HTML5, teh browsers won’t really know the difference anyways. It’s pretty fluid, like adding in a border-radius to your CSS now and then.

Extract might have been a bad word. With some interfaces we can choose to get lists of content inside certain tags on a page or in a document. I just think it’s very nice.

Not blindness, but… ease of sight I guess. Some visual formats, and some structures, are easier to skim and take in. That’s all.