Fix example for the 'address' element.
[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&source=s_q&hl=it&geocode=&q=naples,+IT&sll=26.160677,-81.795616&sspn=0.137744,0.265045&ie=UTF8&ll=40.869911,14.252701&spn=0.232099,0.53009&z=11&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>
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   </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   <samp>
512     tidy -xml -access 3 -utf-8 -i -m $THIS_FILE
513   </samp>
514   </dd>
515
516   <dt>span</dt>
517   <dd>
518   Because <span class="span">style</span> matters?
519   </dd>
520
521   <dt>strong</dt>
522   <dd>
523   Be <strong>strong</strong> rather than bold!
524   </dd>
525
526   <dt>var</dt>
527   <dd>
528   This file name is in <var>$THIS_FILE</var>... this is just an example, you
529   know.
530   </dd>
531
532 </dl>
533
534 <h3>Hypertext module</h3>
535
536 <dl>
537   <dt>a</dt>
538   <dd>
539   Is this xhtml: <a title="Go on top of the page (internal link)"
540   href="#top">GOTO 0;</a>?<br />
541   Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
542   accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
543   <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
544    It is <a title="Hypertext module (external link)"
545    href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
546    indeed.
547   </dd>
548 </dl>
549
550 <h3>List module</h3>
551
552 <p>
553 For the list modules we show grouped examples, a <code>dd</code> or a
554 <code>li</code> element alone does not have much sense.
555 </p>
556
557 <dl>
558   <dt>dl, dt, dd</dt>
559   <dd>
560
561     <dl>
562       <dt>Recursion</dt>
563       <dd>
564         To understand recursion you must have understood what recursion means.
565       </dd>
566     </dl>
567
568   </dd>
569   <dt>ol, li</dt>
570   <dd>
571
572     <ol>
573       <li>
574         Milk
575       </li>
576       <li>
577         Cereals
578       </li>
579       <li>
580         Some juice
581       </li>
582     </ol>
583
584   </dd>
585   <dt>ul, li</dt>
586   <dd>
587
588     <ul>
589       <li>
590         Third
591       </li>
592       <li>
593         First
594       </li>
595       <li>
596         Second
597       </li>
598     </ul>
599
600   </dd>
601 </dl>
602
603
604 <h3>Object module</h3>
605
606 <dl>
607   <dt>object, param</dt>
608   <dd>
609     <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">
610
611     <param name="author" value="Martin Newell"/>
612     <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
613   </object>
614   </dd>
615 </dl>
616
617 <h3>Presentation module</h3>
618 <dl>
619   <dt>b</dt>
620   <dd>
621     This is the <b>bold</b> style.
622   </dd>
623   <dt>big</dt>
624   <dd>
625     This is <big>bigger</big> than the rest.
626   </dd>
627   <dt>hr</dt>
628   <dd>
629   <hr />
630   </dd>
631   <dt>i</dt>
632   <dd>
633     This is the <i>italic</i> style.
634   </dd>
635   <dt>small</dt>
636   <dd>
637   Can you still <small>read it</small>?
638   </dd>
639   <dt>sub</dt>
640   <dd>
641   Remember, (10)<sub>10</sub> in binary is 1010.
642   </dd>
643   <dt>sup</dt>
644   <dd>
645   This is the 1<sup>st</sup> example that came to my kind.
646   </dd>
647   <dt>tt</dt>
648   <dd>
649     This is the <tt>teletype</tt> style.
650   </dd>
651 </dl>
652
653 <h3>Edit module</h3>
654
655 <dl>
656   <dt>del, ins</dt>
657   <dd>
658     Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
659   </dd>
660 </dl>
661
662
663 <h3>Bidirectional Text module</h3>
664
665 <dl>
666   <dt>bdo</dt>
667   <dd>
668     <bdo dir="rtl">Should I add an example in Arabian?</bdo>
669   </dd>
670 </dl>
671
672 <h3>Forms module</h3>
673
674 <p>
675 For the Forms module a grouped example is provided:
676 </p>
677
678 <dl>
679   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
680   <dd>
681
682   <script type="text/javascript">
683 //<![CDATA[
684 function checksubmit()
685 {
686   alert('No, really?');
687 }
688 //]]>
689 </script>
690
691   <form id="example_form" action="" method="get">
692     <fieldset>
693       <legend>Example Form</legend>
694       <p>
695         <label for="username">Username:</label>
696         <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
697       </p>
698       <p>
699         <label for="passwd">Password:</label>
700         <input id="passwd" name="passwd" type="password"/>
701       </p>
702       <p>
703         <label for="autologin">Auto Login:</label>
704         <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
705       </p>
706       <p>
707         <label for="user_sex_male">Male:</label>
708         <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
709       </p>
710       <p>
711         <label for="user_sex_female">Female:</label>
712         <input id="user_sex_female" name="user_sex" type="radio"/>
713       </p>
714       <p>
715         <label for="form_submit">Submit:</label>
716         <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
717       </p>
718       <p>
719         <label for="form_reset">Reset:</label>
720         <input id="form_reset" name="form_reset" type="reset"/>
721       </p>
722       <p>
723         <label for="pgp_key">PGP Key:</label>
724         <input id="pgp_key" name="pgp_key" type="file"/>
725       </p>
726       <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
727       <p>
728         <label for="form_logo">logo:</label>
729         <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
730       </p>
731
732       <label for="user_country">User Coutry:</label>
733       <select id="user_country" name="country">
734         <option value ="-1">Choose you country</option>
735         <optgroup label="Asia">
736           <option value ="1">Japan</option>
737           <option value ="2">Kore</option>
738           <option value ="3">China</option>
739         </optgroup>
740         <optgroup label="Europe" disabled="disabled">
741           <option value ="4">England</option>
742           <option value ="5">Italy</option>
743           <option value ="6">Germany</option>
744       </optgroup>
745       </select>
746
747       <p>
748         <label for="user_info">User Info:</label><br />
749         <textarea id="user_info" name="user_info" rows="4" cols="80">
750 Some info like favourite dishes and so on...
751         </textarea>
752       </p>
753
754     </fieldset>
755
756     <p>
757       <input id="agree" name="agree" type="checkbox"/>
758       <label for="agree">I have read and understood the code</label>
759       <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
760     </p>
761   </form>
762
763   </dd>
764 </dl>
765
766 <h3>Table module</h3>
767
768 <p>
769 For the Table module a grouped example is provided:
770 </p>
771
772 <dl>
773 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
774 <dd>
775
776 <table id="example_table" summary="Example of table" title="Example table" frame="box">
777   <caption>This is an example</caption>
778   <colgroup>
779     <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
780     <col span="1" align="right"/>
781   </colgroup>
782   <colgroup span="2" align="right" style="background: #ff0000;" />
783
784   <thead>
785     <tr>
786       <th>Month</th>
787       <th>Savings</th>
788       <th>Void</th>
789       <th>Void</th>
790     </tr>
791   </thead>
792   <tfoot>
793     <tr>
794       <td>Sum</td>
795       <td>$280</td>
796       <td colspan="2">0</td>
797     </tr>
798   </tfoot>
799   <tbody>
800     <tr>
801       <td rowspan="2">January</td>
802       <td>$100</td>
803       <td>0</td>
804       <td>0</td>
805     </tr>
806     <tr>
807       <td>$200</td>
808       <td>0</td>
809       <td>0</td>
810     </tr>
811     <tr>
812       <td>February</td>
813       <td>$80</td>
814       <td>0</td>
815       <td>0</td>
816     </tr>
817   </tbody>
818 </table>
819
820 </dd>
821 </dl>
822
823 <h3>Image module</h3>
824
825 <dl>
826 <dt>img</dt>
827 <dd>
828
829 This is an image: <img alt="No image" title="W3c logo"
830 src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line. 
831
832 </dd>
833 </dl>
834
835 <h3>Client-side Image Map module</h3>
836
837 <dl>
838 <dt>map, area</dt>
839 <dd>
840
841   <map id="map1">
842     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
843     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" />
844     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
845     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" />
846     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
847     coords="442,128,10" />
848   </map>
849   <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="map1" />
850
851 </dd>
852 </dl>
853
854 <h3>Server-side Image Map module</h3>
855
856 <dl>
857 <dt>Attribute ismap on img</dt>
858 <dd>
859 TBD
860 </dd>
861 </dl>
862
863 <h3>Intrinsic Events module</h3>
864
865 <dl>
866 <dt>Events attributes</dt>
867 <dd>
868 TBD
869 </dd>
870 </dl>
871
872 <h3>Metainformation module</h3>
873
874 <dl>
875 <dt>meta</dt>
876 <dd>
877 TBD
878 </dd>
879 </dl>
880
881 <h3>Scripting module</h3>
882
883 <dl>
884 <dt>script, noscript</dt>
885 <dd>
886 TBD
887 </dd>
888 </dl>
889
890 <h3>Stylesheet module</h3>
891
892 <dl>
893 <dt>style</dt>
894 <dd>
895 TBD
896 </dd>
897 </dl>
898
899 <h3>Link module</h3>
900
901 <dl>
902 <dt>link</dt>
903 <dd>
904 TBD
905 </dd>
906 </dl>
907
908 <h3>Base module</h3>
909
910 <dl>
911 <dt>base</dt>
912 <dd>
913 TBD
914 </dd>
915 </dl>
916
917 </body>
918 </html>