Make the code validate again.
[xhtml11_quickref.git] / xhtml11_quick_reference_by_examples.html
1 <!DOCTYPE
2  html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml"
5      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
6      xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
7      xml:lang="en">
8 <head>
9   <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
10
11   <title>XHTML 1.1 Quick Reference by examples</title>
12
13   <meta name="description" content="XHTML 1.1 Quick Reference by examples" />
14   <meta name="keywords" content="html,xhtml 1.1,tags,elements,reference,examples,css"/>
15
16   <meta name="copyright" content="Copyright (c) 2009 Antonio Ospite, some rights reserved" />
17   <meta name="author" content="Antonio Ospite"/>
18   <meta name="language" content="en"/>
19
20   <!--
21   <link type="text/css" rel="stylesheet" media="all" href="style.css" />
22   -->
23
24   <style type="text/css">
25   /*<![CDATA[*/
26
27 .red {
28 color: red;
29 }
30
31 /* Style-able elements are those which have the 'style' attribute */
32
33 /* Structure module */
34 body {}
35 html {} /* style-able? */
36 /*
37 head
38 title
39 */
40
41 /* Text module */
42 abbr {}
43 acronym {}
44 address {}
45 blockquote {}
46 br {}
47 cite {}
48 code {}
49 dfn {}
50 div {}
51 em {}
52 h1 {}
53 h2 {}
54 h3 {}
55 h4 {}
56 h5 {}
57 h6 {}
58 kbd {}
59 p {}
60 pre {}
61 q {}
62 samp {}
63 span {}
64 strong {}
65 var {}
66
67 /* Hypertext module */
68 a {}
69
70 /* List module */
71 dl {}
72 dt {}
73 dd {}
74 ol {}
75 ul {}
76 li {}
77
78 /* Object Module */
79 object {}
80 /*
81 param
82 */
83
84 /* Presentation module */
85 b {}
86 big {}
87 hr {}
88 i {}
89 small {}
90 sub {}
91 sup {}
92 tt {}
93
94 /* Edit module */
95 del {}
96 ins {}
97
98 /* Bidirectional text module */
99 bdo {}
100
101 /* Forms module */
102 button {}
103 fieldset {}
104 form {}
105 input {}
106 label {}
107 legend {}
108 select {}
109 optgroup {}
110 option {}
111 textarea {}
112
113 /* Table module */
114 caption {}
115 col {}
116 colgroup {}
117 table {}
118 tbody {}
119 td {}
120 tfoot {}
121 th {}
122 thead {}
123 tr {}
124
125 /* Image module */
126 img {}
127
128 /* Client-side Image Map Module */
129 area {}
130 /*
131 map {}
132 */
133
134 /* Scripting module */
135 noscript {}
136 /*
137 script {}
138 */
139
140   /*]]>*/
141   </style>
142
143 </head>
144
145 <body>
146 <h1>XHTML 1.1 Quick Reference by examples</h1>
147
148 <p><a id="top" />
149 This page offers a quick reference by examples of all the elements specified by the <a title="eXtensible
150 Hypertext Markup language 1.1"
151 href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> W3C standard.</p>
152
153 <p>This version of XHTML groups the elements by <a title="XHTML Abstract Modules"
154 href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html">module</a>, and this is how they are presented here,
155 with a very brief description and a section of examples of use.</p>
156
157 <p>There are already other quick reference pages, like the one on <a title="XHTML Reference" href="http://xhtml.com">xhtml.com</a>, or <a title="XHTML Quick Reference Guide For XHTML 1.1" href="http://engelke.com/xhtmlref/">this one</a> or <a title="XHTML 1.0 reference with examples" href="http://www.zvon.org/xxl/xhtmlReference/Output/index.html">this other one with examples</a>. But this page wants to be a <strong>single-page</strong> brief reference; here it is not explained which attributes an element supports, but that can be seen reading the source code of the examples provided for each element. This page could be used as a summary about XHTML or as a precious tool to design <strong>complete</strong> (wrt. XHTML elements) CSS stylesheets for your XHTML pages, giving a quick glance at the results.</p>
158
159 <h2>Modules</h2>
160
161 <p>The XHTML 1.1 document type is made up of the XHTML <em>modules</em> shown 
162 below. The elements, attributes, and minimal content models associated with 
163 these modules are defined in the <a title="XHTML Modularization"
164   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTML 
165   Modularization</a> document [<a title="XHTML Modularization"
166 href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>]).  
167 The elements are listed here for information purposes, but the definitions in 
168 [<a title="XHTML Modularization" 
169   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>] 
170 should be considered definitive.
171 In  this document, the module names in the list below link into the 
172 definitions of
173 the modules within the current version of [<a title="XHTML Modularization" 
174   href="http://www.w3.org/TR/xhtml11/references.html#ref_xhtml_modularization">XHTMLMOD</a>].</p>
175
176 <dl>
177 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_structuremodule">Structure Module</a>*</dt>
178
179 <dd><code>body</code>, <code>head</code>, <code>html</code>, <code>title</code></dd>
180
181 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule">Text Module</a>*</dt>
182
183 <dd>
184 <code>abbr</code>, <code>acronym</code>, <code>address</code>, <code>blockquote</code>, <code>br</code>, <code>cite</code>, <code>code</code>, <code>dfn</code>, <code>div</code>, <code>em</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>, <code>kbd</code>, <code>p</code>, <code>pre</code>, <code>q</code>, <code>samp</code>, <code>span</code>, <code>strong</code>, <code>var</code>
185 <br />
186 <br />
187
188 <div class="note">
189 The minimal content model for this module defines some content sets:
190 <dl>
191 <dt>Heading</dt>
192
193 <dd><code>h1</code> | <code>h2</code> | <code>h3</code> | <code>h4</code> | <code>h5</code> | <code>h6</code></dd>
194
195 <dt>Block</dt>
196
197 <dd><code>address</code> | <code>blockquote</code> | <code>div</code> | <code>p</code> | <code>pre</code></dd>
198
199 <dt>Inline</dt>
200
201 <dd><code>abbr</code> | <code>acronym</code> | <code>br</code> | <code>cite</code> | <code>code</code> | <code>dfn</code> | <code>em</code> | <code>kbd</code> | <code>q</code> | <code>samp</code> | <code>code</code> | <code>strong</code> | <code>var</code></dd>
202
203 <dt>Flow</dt>
204
205 <dd><em>Heading</em> | <em>Block</em> | <em>Inline</em></dd>
206 </dl>
207 </div>
208
209 </dd>
210
211 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">Hypertext Module</a>*</dt>
212
213 <dd>
214 <code>a</code>
215 <div class="note">
216 This module adds the <code>a</code> element to the <em>Inline</em> content set
217 of the <strong>Text Module</strong>
218 </div>
219
220 </dd>
221
222 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_listmodule">List Module</a>*</dt>
223
224 <dd>
225 <code>dl</code>, <code>dt</code>, <code>dd</code>, <code>ol</code>, <code>ul</code>, <code>li</code>
226 <div class="note">
227   This module also defines the content set <em>List</em> with the minimal content model
228 (<code>dl</code> | <code>ol</code> | <code>ul</code>)+ and adds this set to the <em>Flow</em> content set of the
229 <strong>Text Module</strong>.
230 </div>
231 </dd>
232
233 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_objectmodule">Object Module</a></dt>
234
235 <dd>
236 <code>object</code>, <code>param</code>
237 <div class="note">
238 When this module is used, it adds the <code>object</code> element to the <em>Inline</em> content set
239 of the <strong>Text Module</strong>.
240 </div>
241 </dd>
242
243 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_presentationmodule">Presentation Module</a></dt>
244
245 <dd>
246 <code>b</code>, <code>big</code>, <code>hr</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup</code>, <code>tt</code>
247 <div class="note">
248 When this module is used, the <code>hr</code> element is added to the
249 <em>Block</em> content set of the <strong>Text Module</strong>. In addition,
250 the <code>b</code>, <code>big</code>, <code>i</code>, <code>small</code>, <code>sub</code>, <code>sup,</code> and <code>tt</code> elements are
251 added to the <em>Inline</em> content set of the <strong>Text Module</strong>.
252 </div>
253 </dd>
254
255 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_editmodule">Edit Module</a></dt>
256
257 <dd>
258 <code>del</code>, <code>ins</code>
259 <div class="note">
260 When this module is used, the <code>del</code> and <code>ins</code> elements
261 are added to the <em>Inline</em>
262 content set of the <strong>Text Module</strong>.
263 </div>
264 </dd>
265
266 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_bdomodule">Bidirectional Text Module</a></dt>
267
268 <dd>
269 <code>bdo</code>
270 <div class="note">
271 When this module is used, the <code>bdo</code> element is added to the
272 <em>Inline</em> content set of the <strong>Text Module</strong>.
273 </div>
274 </dd>
275
276 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_extformsmodule">Forms Module</a></dt>
277
278 <dd>
279 <code>button</code>, <code>fieldset</code>, <code>form</code>, <code>input</code>, <code>label</code>, <code>legend</code>, <code>select</code>, <code>optgroup</code>, <code>option</code>, <code>textarea</code>
280
281 <div class="note">
282 This module defines two content sets:
283 <dl>
284 <dt>Form</dt>
285   <dd><code>form</code> | <code>fieldset</code></dd>
286 <dt>Formctrl</dt>
287   <dd><code>input</code> | <code>select</code> | <code>textarea</code> | <code>label</code> | <code>button</code></dd>
288 </dl>
289
290 When this module is used, it adds the <em>Form</em> content set to the
291 <em>Block </em>content set and it adds the <em>Formctrl</em> content set to
292 the <em>Inline</em> content set as these are defined in the <strong>Text
293 Module</strong>.
294 </div>
295 </dd>
296
297 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_tablemodule">Table Module</a></dt>
298
299 <dd>
300 <code>caption</code>, <code>col</code>, <code>colgroup</code>, <code>table</code>, <code>tbody</code>, <code>td</code>, <code>tfoot</code>, <code>th</code>, <code>thead</code>, <code>tr</code>
301 <div class="note">
302 When this module is used, it adds the <code>table</code> element to the
303 <em>Block</em> content set of the <strong>Text Module</strong>.
304 </div>
305 </dd>
306
307 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imagemodule">Image Module</a></dt>
308
309 <dd>
310 <code>img</code>
311 <div class="note">
312 When this module is used, it adds the <code>img</code> element to the <em>Inline</em> content set of
313 the <strong>Text Module</strong>.
314 </div>
315 </dd>
316
317 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_imapmodule">Client-side Image Map Module</a></dt>
318
319 <dd>
320 <code>area</code>, <code>map</code>
321 When this module is used, the <code>map</code> element is added to the <em>Inline</em> content set
322 of the <strong>Text Module</strong>.
323 </dd>
324
325 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_servermapmodule">Server-side Image Map Module</a></dt>
326
327 <dd>Attribute <code>ismap</code> on <code>img</code></dd>
328
329 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_intrinsiceventsmodule">Intrinsic Events Module</a></dt>
330
331 <dd>Events attributes</dd>
332
333 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_metamodule">Metainformation Module</a></dt>
334
335 <dd><code>meta</code></dd>
336
337 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_scriptmodule">Scripting Module</a></dt>
338
339 <dd><code>noscript</code>, <code>script</code></dd>
340
341 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_stylemodule">Stylesheet Module</a></dt>
342
343 <dd><code>style</code> element</dd>
344
345 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_styleattributemodule">Style Attribute Module</a> <em>Deprecated</em></dt>
346
347 <dd><code>style</code> attribute</dd>
348
349 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_linkmodule">Link Module</a></dt>
350
351 <dd><code>link</code></dd>
352
353 <dt><a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_basemodule">Base Module</a></dt>
354
355 <dd><code>base</code></dd>
356 </dl>
357
358 <p>XHTML also uses the Ruby Annotation module as defined in [<a href="http://www.w3.org/TR/xhtml11/references.html#ref_ruby">RUBY</a>]:</p>
359
360
361 <h2>Examples</h2>
362
363 <h3>Structure Module</h3>
364
365 <p>
366   We don't show explicit examples for elements in the
367   Structure module because they are Singleton elements, already used for the
368   structure of this very page. Although you can style the <code>body</code> 
369   and <code>html</code>
370   elements.
371 </p>
372
373 <h3>Text module</h3>
374
375 <p>
376 The Text module elements can be used inside a text to enrich it semantically.
377 They are all style-able.
378 </p>
379
380 <dl class="examples">
381   <dt>abbr</dt>
382   <dd>
383   We all know what <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>
384   means, don't we?
385   </dd>
386
387   <dt>acronym</dt>
388   <dd>
389   On the contrary someone doesn't know <acronym title="RAdio Detection And Ranging">RADAR</acronym> is
390   an acronym.
391   </dd>
392
393   <dt>address</dt>
394   <dd>
395   <address>
396   Antonio is from<br/>
397   <a title="Naples, Italy" 
398     href="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=naples,+IT&amp;sll=26.160677,-81.795616&amp;sspn=0.137744,0.265045&amp;ie=UTF8&amp;ll=40.869911,14.252701&amp;spn=0.232099,0.53009&amp;z=11&amp;iwloc=A">Naples, Italy</a>,
399   a strange, still beautiful, city.<br/>
400   His website is at <a title="ao2: attacchi teoristici" href="http://ao2.it">ao2.it</a>
401   </address>
402   </dd>
403
404   <dt>blockquote</dt>
405   <dd>
406   I usually say:
407   <blockquote cite="myself"><p>Better looser than poser!</p></blockquote>
408   Not very widespread these days.
409   </dd>
410
411   <dt>br</dt>
412   <dd>Break the line here<br />this is new line</dd>
413
414   <dt>cite</dt>
415   <dd>Even if you are not Buddhist follow the <cite>Dalai Lama</cite>
416   suggestions.</dd>
417
418   <dt>code</dt>
419   <dd>Format source code using the <code>&lt;code&gt;&lt;/code&gt;</code>
420   element.</dd>
421
422   <dt>dfn</dt>
423   <dd>I wonder how much my silly definition of happiness:
424   <blockquote><p>
425     <dfn>Happiness</dfn> is the limit of our mood function when “how I currently feel” approaches
426     to “how I want to feel”
427   </p></blockquote>
428   is flawed...
429   </dd>
430
431   <dt>div</dt>
432   <dd>
433   DIVs are used to <div>divide</div> block elements.
434   </dd>
435
436   <dt>em</dt>
437   <dd>
438   This <em>em</em> is not really a typographical measure.
439   </dd>
440
441   <dt>h1</dt>
442   <dd>
443   This could be for <h1>Book</h1> titles.
444   </dd>
445
446   <dt>h2</dt>
447   <dd>
448   This could be for <h2>Chapter</h2> titles.
449   </dd>
450
451   <dt>h3</dt>
452   <dd>
453   This could be for <h3>Section</h3> titles.
454   </dd>
455
456   <dt>h4</dt>
457   <dd>
458   This could be for <h4>Sub-Section</h4> titles.
459   </dd>
460
461   <dt>h5</dt>
462   <dd>
463   This could be for <h5>Sub-Sub-Section</h5> titles.
464   </dd>
465
466   <dt>h6</dt>
467   <dd>
468   This could be for <h6>Sub-Sub-Sub-Section</h6> titles.
469   </dd>
470
471   <dt>kbd</dt>
472   <dd>
473   Do not press <kbd>Ctrl-Q</kbd>, really!
474   </dd>
475
476   <dt>p</dt>
477   <dd>
478   Is this before a paragraph?
479   <p>
480   A paragraph (from the Greek <em>paragraphos</em>, “to write beside” or “written
481   beside”) is a self-contained unit of a discourse in writing dealing with a
482   particular point or idea.
483   </p>
484   After a paragraph, definitely!
485   </dd>
486
487   <dt>pre</dt>
488   <dd>
489   How to use this element?
490   <pre>
491          (__) 
492          (oo) 
493    /------\/ 
494   / |    ||   
495  *  /\---/\ 
496     ~~   ~~   
497 ...."Have you mooed today?"...
498   </pre>
499   Aaah, this is c<kbd>^H</kbd>how.
500   </dd>
501
502   <dt>q</dt>
503   <dd>
504   British say about driving: <q cite="http://books.google.it/books?id=N2AOAAAAQAAJ&amp;pg=PA45&amp;lpg=PA45;">If you go
505     left you go right, if you go right you go wrong</q>.
506   </dd>
507
508   <dt>samp</dt>
509   <dd>
510   Let's clean up this file:
511   <pre>$ tidy -xml -access 3 -utf8 -i -m $THIS_FILE</pre>
512   <samp>
513     No warnings or errors were found.
514   </samp>
515   </dd>
516
517   <dt>span</dt>
518   <dd>
519   Because <span class="span">style</span> matters?
520   </dd>
521
522   <dt>strong</dt>
523   <dd>
524   Be <strong>strong</strong> rather than bold!
525   </dd>
526
527   <dt>var</dt>
528   <dd>
529   Save this file to <var>xhtml11_quickref.html</var>... this is just an example value,
530   you can choose the name you like more.
531   </dd>
532
533 </dl>
534
535 <h3>Hypertext module</h3>
536
537 <dl>
538   <dt>a</dt>
539   <dd>
540   Is this xhtml: <a title="Go on top of the page (internal link)"
541   href="#top">GOTO 0;</a>?<br />
542   Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
543   accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
544   <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
545    It is <a title="Hypertext module (external link)"
546    href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
547    indeed.
548   </dd>
549 </dl>
550
551 <h3>List module</h3>
552
553 <p>
554 For the list modules we show grouped examples, a <code>dd</code> or a
555 <code>li</code> element alone does not have much sense.
556 </p>
557
558 <dl>
559   <dt>dl, dt, dd</dt>
560   <dd>
561
562     <dl>
563       <dt>Recursion</dt>
564       <dd>
565         To understand recursion you must have understood what recursion means.
566       </dd>
567     </dl>
568
569   </dd>
570   <dt>ol, li</dt>
571   <dd>
572
573     <ol>
574       <li>
575         Milk
576       </li>
577       <li>
578         Cereals
579       </li>
580       <li>
581         Some juice
582       </li>
583     </ol>
584
585   </dd>
586   <dt>ul, li</dt>
587   <dd>
588
589     <ul>
590       <li>
591         Third
592       </li>
593       <li>
594         First
595       </li>
596       <li>
597         Second
598       </li>
599     </ul>
600
601   </dd>
602 </dl>
603
604
605 <h3>Object module</h3>
606
607 <dl>
608   <dt>object, param</dt>
609   <dd>
610     <object data="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Utah_teapot_simple_2.png/300px-Utah_teapot_simple_2.png" type="image/png">
611
612     <param name="author" value="Martin Newell"/>
613     <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
614   </object>
615   </dd>
616 </dl>
617
618 <h3>Presentation module</h3>
619 <dl>
620   <dt>b</dt>
621   <dd>
622     This is the <b>bold</b> style.
623   </dd>
624   <dt>big</dt>
625   <dd>
626     This is <big>bigger</big> than the rest.
627   </dd>
628   <dt>hr</dt>
629   <dd>
630   <hr />
631   </dd>
632   <dt>i</dt>
633   <dd>
634     This is the <i>italic</i> style.
635   </dd>
636   <dt>small</dt>
637   <dd>
638   Can you still <small>read it</small>?
639   </dd>
640   <dt>sub</dt>
641   <dd>
642   Remember, (10)<sub>10</sub> in binary is 1010.
643   </dd>
644   <dt>sup</dt>
645   <dd>
646   This is the 1<sup>st</sup> example that came to my kind.
647   </dd>
648   <dt>tt</dt>
649   <dd>
650     This is the <tt>teletype</tt> style.
651   </dd>
652 </dl>
653
654 <h3>Edit module</h3>
655
656 <dl>
657   <dt>del, ins</dt>
658   <dd>
659     Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
660   </dd>
661 </dl>
662
663
664 <h3>Bidirectional Text module</h3>
665
666 <dl>
667   <dt>bdo</dt>
668   <dd>
669     <bdo dir="rtl">Should I add an example in Arabian?</bdo>
670   </dd>
671 </dl>
672
673 <h3>Forms module</h3>
674
675 <p>
676 For the Forms module a grouped example is provided:
677 </p>
678
679 <dl>
680   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
681   <dd>
682
683   <script type="text/javascript">
684 //<![CDATA[
685 function checksubmit()
686 {
687   alert('No, really?');
688 }
689 //]]>
690 </script>
691
692   <form id="example_form" action="" method="get">
693     <fieldset>
694       <legend>Example Form</legend>
695       <p>
696         <label for="username">Username:</label>
697         <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
698       </p>
699       <p>
700         <label for="passwd">Password:</label>
701         <input id="passwd" name="passwd" type="password"/>
702       </p>
703       <p>
704         <label for="autologin">Auto Login:</label>
705         <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
706       </p>
707       <p>
708         <label for="user_sex_male">Male:</label>
709         <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
710       </p>
711       <p>
712         <label for="user_sex_female">Female:</label>
713         <input id="user_sex_female" name="user_sex" type="radio"/>
714       </p>
715       <p>
716         <label for="form_submit">Submit:</label>
717         <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
718       </p>
719       <p>
720         <label for="form_reset">Reset:</label>
721         <input id="form_reset" name="form_reset" type="reset"/>
722       </p>
723       <p>
724         <label for="pgp_key">PGP Key:</label>
725         <input id="pgp_key" name="pgp_key" type="file"/>
726       </p>
727       <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
728       <p>
729         <label for="form_logo">logo:</label>
730         <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
731       </p>
732
733       <label for="user_country">User Coutry:</label>
734       <select id="user_country" name="country">
735         <option value ="-1">Choose you country</option>
736         <optgroup label="Asia">
737           <option value ="1">Japan</option>
738           <option value ="2">Kore</option>
739           <option value ="3">China</option>
740         </optgroup>
741         <optgroup label="Europe" disabled="disabled">
742           <option value ="4">England</option>
743           <option value ="5">Italy</option>
744           <option value ="6">Germany</option>
745       </optgroup>
746       </select>
747
748       <p>
749         <label for="user_info">User Info:</label><br />
750         <textarea id="user_info" name="user_info" rows="4" cols="80">
751 Some info like favourite dishes and so on...
752         </textarea>
753       </p>
754
755     </fieldset>
756
757     <p>
758       <input id="agree" name="agree" type="checkbox"/>
759       <label for="agree">I have read and understood the code</label>
760       <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
761     </p>
762   </form>
763
764   </dd>
765 </dl>
766
767 <h3>Table module</h3>
768
769 <p>
770 For the Table module a grouped example is provided:
771 </p>
772
773 <dl>
774 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
775 <dd>
776
777 <table id="example_table" summary="Example of table" title="Example table" frame="box">
778   <caption>This is an example</caption>
779   <colgroup>
780     <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
781     <col span="1" align="right"/>
782   </colgroup>
783   <colgroup span="2" align="right" style="background: #ff0000;" />
784
785   <thead>
786     <tr>
787       <th>Month</th>
788       <th>Savings</th>
789       <th>Void</th>
790       <th>Void</th>
791     </tr>
792   </thead>
793   <tfoot>
794     <tr>
795       <td>Sum</td>
796       <td>$280</td>
797       <td colspan="2">0</td>
798     </tr>
799   </tfoot>
800   <tbody>
801     <tr>
802       <td rowspan="2">January</td>
803       <td>$100</td>
804       <td>0</td>
805       <td>0</td>
806     </tr>
807     <tr>
808       <td>$200</td>
809       <td>0</td>
810       <td>0</td>
811     </tr>
812     <tr>
813       <td>February</td>
814       <td>$80</td>
815       <td>0</td>
816       <td>0</td>
817     </tr>
818   </tbody>
819 </table>
820
821 </dd>
822 </dl>
823
824 <h3>Image module</h3>
825
826 <dl>
827 <dt>img</dt>
828 <dd>
829
830 This is an image: <img alt="No image" title="W3c logo"
831 src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line. 
832
833 </dd>
834 </dl>
835
836 <h3>Client-side Image Map module</h3>
837
838 <dl>
839 <dt>map, area</dt>
840 <dd>
841
842   <map id="map1">
843     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
844     coords="156,183, 180,177, 203,167, 213,162, 225,160, 244,163, 266,155, 278,157, 286,163, 309,170, 331,175, 353,179, 372,184, 325,183, 287,179, 256,182, 232,184, 196,183, 156,183, 156,183, 156,183" />
845     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
846     coords="0,360, 480,360, 480,272, 410,259, 386,257, 423,278, 408,283, 384,278, 342,286, 260,272, 208,261, 173,231, 215,219, 272,212, 308,208, 253,204, 218,201, 129,201, 57,197, 0,188, 0,360" />
847     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
848     coords="442,128,10" />
849   </map>
850   <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="map1" />
851
852 </dd>
853 </dl>
854
855 <h3>Server-side Image Map module</h3>
856
857 <dl>
858 <dt>Attribute ismap on img</dt>
859 <dd>
860 TBD
861 </dd>
862 </dl>
863
864 <h3>Intrinsic Events module</h3>
865
866 <dl>
867 <dt>Events attributes</dt>
868 <dd>
869 TBD
870 </dd>
871 </dl>
872
873 <h3>Metainformation module</h3>
874
875 <dl>
876 <dt>meta</dt>
877 <dd>
878 TBD
879 </dd>
880 </dl>
881
882 <h3>Scripting module</h3>
883
884 <dl>
885 <dt>script, noscript</dt>
886 <dd>
887 TBD
888 </dd>
889 </dl>
890
891 <h3>Stylesheet module</h3>
892
893 <dl>
894 <dt>style</dt>
895 <dd>
896 TBD
897 </dd>
898 </dl>
899
900 <h3>Link module</h3>
901
902 <dl>
903 <dt>link</dt>
904 <dd>
905 TBD
906 </dd>
907 </dl>
908
909 <h3>Base module</h3>
910
911 <dl>
912 <dt>base</dt>
913 <dd>
914 TBD
915 </dd>
916 </dl>
917
918 </body>
919 </html>