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   Antonio is from
 396   <address>Naples, Italy</address>
 397   a strange, still beautiful, city.
 398   </dd>
 399
 400   <dt>blockquote</dt>
 401   <dd>
 402   I usually say:
 403   <blockquote cite="myself"><p>Better looser than poser!</p></blockquote>
 404   Not very widespread these days.
 405   </dd>
 406
 407   <dt>br</dt>
 408   <dd>Break the line here<br />this is new line</dd>
 409
 410   <dt>cite</dt>
 411   <dd>Even if you are not Buddhist follow the <cite>Dalai Lama</cite>
 412   suggestions.</dd>
 413
 414   <dt>code</dt>
 415   <dd>Format source code using the <code>&lt;code&gt;&lt;/code&gt;</code>
 416   element.</dd>
 417
 418   <dt>dfn</dt>
 419   <dd>I wonder how much my silly definition of happiness:
 420   <dfn>
 421     Happiness is the limit of our mood function when “how I currently feel” approaches
 422     to “how I want to feel”
 423   </dfn>
 424   is flawed...
 425   </dd>
 426
 427   <dt>div</dt>
 428   <dd>
 429   DIVs are used to <div>divide</div> block elements.
 430   </dd>
 431
 432   <dt>em</dt>
 433   <dd>
 434   This <em>em</em> is not really a typographical measure.
 435   </dd>
 436
 437   <dt>h1</dt>
 438   <dd>
 439   This could be for <h1>Book</h1> titles.
 440   </dd>
 441
 442   <dt>h2</dt>
 443   <dd>
 444   This could be for <h2>Chapter</h2> titles.
 445   </dd>
 446
 447   <dt>h3</dt>
 448   <dd>
 449   This could be for <h3>Section</h3> titles.
 450   </dd>
 451
 452   <dt>h4</dt>
 453   <dd>
 454   This could be for <h4>Sub-Section</h4> titles.
 455   </dd>
 456
 457   <dt>h5</dt>
 458   <dd>
 459   This could be for <h5>Sub-Sub-Section</h5> titles.
 460   </dd>
 461
 462   <dt>h6</dt>
 463   <dd>
 464   This could be for <h6>Sub-Sub-Sub-Section</h6> titles.
 465   </dd>
 466
 467   <dt>kbd</dt>
 468   <dd>
 469   Do not press <kbd>Ctrl-Q</kbd>, really!
 470   </dd>
 471
 472   <dt>p</dt>
 473   <dd>
 474   Is this before a paragraph?
 475   <p>
 476   A paragraph (from the Greek <em>paragraphos</em>, “to write beside” or “written
 477   beside”) is a self-contained unit of a discourse in writing dealing with a
 478   particular point or idea.
 479   </p>
 480   After a paragraph, definitely!
 481   </dd>
 482
 483   <dt>pre</dt>
 484   <dd>
 485   How to use this element?
 486   <pre>
 487          (__)
 488          (oo)
 489    /------\/
 490   / |    ||
 491  *  /\---/\
 492     ~~   ~~
 493 ...."Have you mooed today?"...
 494   </pre>
 495   Aaah, this is c<kbd>^H</kbd>how.
 496   </dd>
 497
 498   <dt>q</dt>
 499   <dd>
 500   British say about driving: <q cite="http://books.google.it/books?id=N2AOAAAAQAAJ&amp;pg=PA45&amp;lpg=PA45;">If you go
 501     left you go right, if you go right you go wrong</q>.
 502   </dd>
 503
 504   <dt>samp</dt>
 505   <dd>
 506   Let's clean up this file:
 507   <samp>
 508     tidy -xml -access 3 -utf-8 -i -m $THIS_FILE
 509   </samp>
 510   </dd>
 511
 512   <dt>span</dt>
 513   <dd>
 514   Because <span class="span">style</span> matters?
 515   </dd>
 516
 517   <dt>strong</dt>
 518   <dd>
 519   Be <strong>strong</strong> rather than bold!
 520   </dd>
 521
 522   <dt>var</dt>
 523   <dd>
 524   This file name is in <var>$THIS_FILE</var>... this is just an example, you
 525   know.
 526   </dd>
 527
 528 </dl>
 529
 530 <h3>Hypertext module</h3>
 531
 532 <dl>
 533   <dt>a</dt>
 534   <dd>
 535   Is this xhtml: <a title="Go on top of the page (internal link)"
 536   href="#top">GOTO 0;</a>?<br />
 537   Is this more accessible: <a title="Go on top of the page with an access key (internal link)"
 538   accesskey="g" href="#top">IF KEY == 'g'; THEN GOTO 0; ENDIF;</a>? (Psst, use
 539   <kbd>Alt-Shift-g</kbd> to test it in FireFox)<br />
 540    It is <a title="Hypertext module (external link)"
 541    href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_hypertextmodule">XHTML</a>
 542    indeed.
 543   </dd>
 544 </dl>
 545
 546 <h3>List module</h3>
 547
 548 <p>
 549 For the list modules we show grouped examples, a <code>dd</code> or a
 550 <code>li</code> element alone does not have much sense.
 551 </p>
 552
 553 <dl>
 554   <dt>dl, dt, dd</dt>
 555   <dd>
 556
 557     <dl>
 558       <dt>Recursion</dt>
 559       <dd>
 560         To understand recursion you must have understood what recursion means.
 561       </dd>
 562     </dl>
 563
 564   </dd>
 565   <dt>ol, li</dt>
 566   <dd>
 567
 568     <ol>
 569       <li>
 570         Milk
 571       </li>
 572       <li>
 573         Cereals
 574       </li>
 575       <li>
 576         Some juice
 577       </li>
 578     </ol>
 579
 580   </dd>
 581   <dt>ul, li</dt>
 582   <dd>
 583
 584     <ul>
 585       <li>
 586         Third
 587       </li>
 588       <li>
 589         First
 590       </li>
 591       <li>
 592         Second
 593       </li>
 594     </ul>
 595
 596   </dd>
 597 </dl>
 598
 599
 600 <h3>Object module</h3>
 601
 602 <dl>
 603   <dt>object, param</dt>
 604   <dd>
 605     <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">
 606
 607     <param name="author" value="Martin Newell"/>
 608     <param name="source" value="http://en.wikipedia.org/wiki/Utah_teapot"/>
 609   </object>
 610   </dd>
 611 </dl>
 612
 613 <h3>Presentation module</h3>
 614 <dl>
 615   <dt>b</dt>
 616   <dd>
 617     This is the <b>bold</b> style.
 618   </dd>
 619   <dt>big</dt>
 620   <dd>
 621     This is <big>bigger</big> than the rest.
 622   </dd>
 623   <dt>hr</dt>
 624   <dd>
 625   <hr />
 626   </dd>
 627   <dt>i</dt>
 628   <dd>
 629     This is the <i>italic</i> style.
 630   </dd>
 631   <dt>small</dt>
 632   <dd>
 633   Can you still <small>read it</small>?
 634   </dd>
 635   <dt>sub</dt>
 636   <dd>
 637   Remember, (10)<sub>10</sub> in binary is 1010.
 638   </dd>
 639   <dt>sup</dt>
 640   <dd>
 641   This is the 1<sup>st</sup> example that came to my kind.
 642   </dd>
 643   <dt>tt</dt>
 644   <dd>
 645     This is the <tt>teletype</tt> style.
 646   </dd>
 647 </dl>
 648
 649 <h3>Edit module</h3>
 650
 651 <dl>
 652   <dt>del, ins</dt>
 653   <dd>
 654     Are you a <del>deletionist</del><ins>inclusionist</ins> on Wikipedia?
 655   </dd>
 656 </dl>
 657
 658
 659 <h3>Bidirectional Text module</h3>
 660
 661 <dl>
 662   <dt>bdo</dt>
 663   <dd>
 664     <bdo dir="rtl">Should I add an example in Arabian?</bdo>
 665   </dd>
 666 </dl>
 667
 668 <h3>Forms module</h3>
 669
 670 <p>
 671 For the Forms module a grouped example is provided:
 672 </p>
 673
 674 <dl>
 675   <dt>button, fieldset, form, input, label, legend, select, optgroup, option, textarea</dt>
 676   <dd>
 677
 678   <script type="text/javascript">
 679 //<![CDATA[
 680 function checksubmit()
 681 {
 682   alert('No, really?');
 683 }
 684 //]]>
 685 </script>
 686
 687   <form id="example_form" action="" method="get">
 688     <fieldset>
 689       <legend>Example Form</legend>
 690       <p>
 691         <label for="username">Username:</label>
 692         <input id="username" name="username" type="text" value="ao2" readonly="readonly" />
 693       </p>
 694       <p>
 695         <label for="passwd">Password:</label>
 696         <input id="passwd" name="passwd" type="password"/>
 697       </p>
 698       <p>
 699         <label for="autologin">Auto Login:</label>
 700         <input id="autologin" name="autologin" type="checkbox" checked="checked"/>
 701       </p>
 702       <p>
 703         <label for="user_sex_male">Male:</label>
 704         <input id="user_sex_male" name="user_sex" type="radio" checked="checked"/>
 705       </p>
 706       <p>
 707         <label for="user_sex_female">Female:</label>
 708         <input id="user_sex_female" name="user_sex" type="radio"/>
 709       </p>
 710       <p>
 711         <label for="form_submit">Submit:</label>
 712         <input id="form_submit" name="form_submit" type="submit" disabled="disabled" accesskey="S"/>
 713       </p>
 714       <p>
 715         <label for="form_reset">Reset:</label>
 716         <input id="form_reset" name="form_reset" type="reset"/>
 717       </p>
 718       <p>
 719         <label for="pgp_key">PGP Key:</label>
 720         <input id="pgp_key" name="pgp_key" type="file"/>
 721       </p>
 722       <input id="base_uid" name="base_uid" type="hidden" value="1000"/>
 723       <p>
 724         <label for="form_logo">logo:</label>
 725         <input id="form_logo" name="form_logo" type="image" src="http://localhost/nologo" alt="Logo not available"/>
 726       </p>
 727
 728       <label for="user_country">User Coutry:</label>
 729       <select id="user_country" name="country">
 730         <option value ="-1">Choose you country</option>
 731         <optgroup label="Asia">
 732           <option value ="1">Japan</option>
 733           <option value ="2">Kore</option>
 734           <option value ="3">China</option>
 735         </optgroup>
 736         <optgroup label="Europe" disabled="disabled">
 737           <option value ="4">England</option>
 738           <option value ="5">Italy</option>
 739           <option value ="6">Germany</option>
 740       </optgroup>
 741       </select>
 742
 743       <p>
 744         <label for="user_info">User Info:</label><br />
 745         <textarea id="user_info" name="user_info" rows="4" cols="80">
 746 Some info like favourite dishes and so on...
 747         </textarea>
 748       </p>
 749
 750     </fieldset>
 751
 752     <p>
 753       <input id="agree" name="agree" type="checkbox"/>
 754       <label for="agree">I have read and understood the code</label>
 755       <button id="send_button" type="submit" onclick="checksubmit();">Submit?</button>
 756     </p>
 757   </form>
 758
 759   </dd>
 760 </dl>
 761
 762 <h3>Table module</h3>
 763
 764 <p>
 765 For the Table module a grouped example is provided:
 766 </p>
 767
 768 <dl>
 769 <dt>caption, col, colgroup, table, tbody, td, tfoot, th, thead, tr</dt>
 770 <dd>
 771
 772 <table id="example_table" summary="Example of table" title="Example table" frame="box">
 773   <caption>This is an example</caption>
 774   <colgroup>
 775     <col span="1" align="char" char="," charoff="50%" style="background: #00ff00"/>
 776     <col span="1" align="right"/>
 777   </colgroup>
 778   <colgroup span="2" align="right" style="background: #ff0000;" />
 779
 780   <thead>
 781     <tr>
 782       <th>Month</th>
 783       <th>Savings</th>
 784       <th>Void</th>
 785       <th>Void</th>
 786     </tr>
 787   </thead>
 788   <tfoot>
 789     <tr>
 790       <td>Sum</td>
 791       <td>$280</td>
 792       <td colspan="2">0</td>
 793     </tr>
 794   </tfoot>
 795   <tbody>
 796     <tr>
 797       <td rowspan="2">January</td>
 798       <td>$100</td>
 799       <td>0</td>
 800       <td>0</td>
 801     </tr>
 802     <tr>
 803       <td>$200</td>
 804       <td>0</td>
 805       <td>0</td>
 806     </tr>
 807     <tr>
 808       <td>February</td>
 809       <td>$80</td>
 810       <td>0</td>
 811       <td>0</td>
 812     </tr>
 813   </tbody>
 814 </table>
 815
 816 </dd>
 817 </dl>
 818
 819 <h3>Image module</h3>
 820
 821 <dl>
 822 <dt>img</dt>
 823 <dd>
 824
 825 This is an image: <img alt="No image" title="W3c logo"
 826 src="http://www.w3.org/Icons/w3c_main" style="vertical-align: middle;"/> centered on the line.
 827
 828 </dd>
 829 </dl>
 830
 831 <h3>Client-side Image Map module</h3>
 832
 833 <dl>
 834 <dt>map, area</dt>
 835 <dd>
 836
 837   <map id="map1">
 838     <area nohref="nohref" alt="Vesuvio" title="Vesuvio" shape="poly"
 839     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" />
 840     <area href="http://en.wikipedia.org/wiki/Napoli" alt="Napoli" title="Napoli" shape="poly"
 841     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" />
 842     <area nohref="nohref" alt="Moon" title="Moon" shape="circle"
 843     coords="442,128,10" />
 844   </map>
 845   <img src="http://silvioirio.files.wordpress.com/2008/01/napoli2.jpg" alt="Napoli" usemap="map1" />
 846
 847 </dd>
 848 </dl>
 849
 850 <h3>Server-side Image Map module</h3>
 851
 852 <dl>
 853 <dt>Attribute ismap on img</dt>
 854 <dd>
 855 TBD
 856 </dd>
 857 </dl>
 858
 859 <h3>Intrinsic Events module</h3>
 860
 861 <dl>
 862 <dt>Events attributes</dt>
 863 <dd>
 864 TBD
 865 </dd>
 866 </dl>
 867
 868 <h3>Metainformation module</h3>
 869
 870 <dl>
 871 <dt>meta</dt>
 872 <dd>
 873 TBD
 874 </dd>
 875 </dl>
 876
 877 <h3>Scripting module</h3>
 878
 879 <dl>
 880 <dt>script, noscript</dt>
 881 <dd>
 882 TBD
 883 </dd>
 884 </dl>
 885
 886 <h3>Stylesheet module</h3>
 887
 888 <dl>
 889 <dt>style</dt>
 890 <dd>
 891 TBD
 892 </dd>
 893 </dl>
 894
 895 <h3>Link module</h3>
 896
 897 <dl>
 898 <dt>link</dt>
 899 <dd>
 900 TBD
 901 </dd>
 902 </dl>
 903
 904 <h3>Base module</h3>
 905
 906 <dl>
 907 <dt>base</dt>
 908 <dd>
 909 TBD
 910 </dd>
 911 </dl>
 912
 913 </body>
 914 </html>