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