css/design40/manual/form-elements.html

   1 <!DOCTYPE html>
   2 <html lang="de">
   3 <head>
   4   <meta charset="utf-8" />
   5   <link href="../style.css" rel="stylesheet">
   6   <title>Test und Entwicklung des Kivitendo-CSS</title>
   7 </head>
   8 <body class="developing">
   9 <header>
  10   <h1>Kivitendo-Formular-Elemente</h1>
  11   <nav><a href="index.html" title="Zur Übersicht bzw. Inhaltsverzeichnis">Zum Index</a></nav>
  12 </header>
  13
  14 <form action="#">
  15
  16
  17
  18
  19 <div class="wrapper">
  20
  21
  22 <h2>Formular-Elemente mit Standard-Einstellungen</h2>
  23
  24
  25 <table class="tbl-horizontal">
  26   <caption>Klassische Input-Elemente</caption>
  27   <colgroup> <col class="wi-small"><col class="wi-mediumsmall"> </colgroup>
  28   <tbody>
  29     <tr>
  30       <th>Text</th>
  31       <td><input type="text" name="input-type-text"></td>
  32     </tr>
  33     <tr>
  34       <th>Password</th>
  35       <td><input type="password" name="input-type-password"></td>
  36     </tr>
  37     <tr>
  38       <th>Checkbox</th>
  39       <td>
  40         <input type="checkbox" name="input-type-checkbox" value="cb1" id="cb1-1"><label for="cb1-1">1</label> &nbsp;
  41         <input type="checkbox" name="input-type-checkbox" value="cb2" id="cb1-2"><label for="cb1-2">2</label>
  42       </td>
  43     </tr>
  44     <tr>
  45       <th>Radio</th>
  46       <td>
  47         <input type="radio" name="input-type-radio" value="Yes" id="rd1-1"><label for="rd1-1">Yes</label> &nbsp;
  48         <input type="radio" name="input-type-radio" value="No" id="rd1-2"><label for="rd1-2">No</label>
  49       </td>
  50     </tr>
  51     <tr>
  52       <th>Submit</th>
  53       <td><input type="submit" name="sbmt1"></td>
  54     </tr>
  55     <tr>
  56       <th>Reset</th>
  57       <td><input type="reset" name="rst1"></td>
  58     </tr>
  59     <tr>
  60       <th>Button</th>
  61       <td><input type="button" name="btn1" value="Anzeigen"></td>
  62     </tr>
  63     <tr>
  64       <th>Image</th>
  65       <td><input type="image" name="input-type-image"></td>
  66     </tr>
  67     <tr>
  68       <th>File</th>
  69       <td><input type="file" name="input-type-file"></td>
  70     </tr>
  71   </tbody>
  72 </table>
  73
  74
  75 <table class="tbl-horizontal">
  76   <caption>Andere Formular-Elemente</caption>
  77   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
  78   <tbody>
  79     <tr>
  80       <th>Select</th>
  81       <td>
  82         <select id="slct1" name="slct1">
  83           <option value=""></option>
  84           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
  85           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
  86           <option value="Timothy Leary">Timothy Leary</option>
  87           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
  88         </select>
  89       </td>
  90     </tr>
  91     <tr>
  92       <th>Textarea</th>
  93       <td><textarea name="txtarea1">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
  94     </tr>
  95     <tr>
  96       <th>Button</th>
  97       <td>
  98         <button name="bttn1-1" type="button">Type Button</button><br>
  99         <button name="bttn1-2" type="submit">Type Submit</button><br>
 100         <button name="bttn1-3" type="reset">Type Reset</button>
 101       </td>
 102     </tr>
 103   </tbody>
 104 </table>
 105
 106 <table class="tbl-horizontal">
 107   <caption>Neue Input-Elemente in HTML5</caption>
 108   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 109   <tbody>
 110     <tr>
 111       <th>Search</th>
 112       <td><input type="search" name="input-type-search"></td>
 113     </tr>
 114     <tr>
 115       <th>Tel</th>
 116       <td><input type="tel" name="input-type-tel"></td>
 117     </tr>
 118     <tr>
 119       <th>URL</th>
 120       <td><input type="url" name="input-type-url"></td>
 121     </tr>
 122     <tr>
 123       <th>Email</th>
 124       <td><input type="email" name="input-type-email"></td>
 125     </tr>
 126     <tr>
 127       <th>Datetime</th>
 128       <td><input type="datetime" name="input-type-datetime"></td>
 129     </tr>
 130     <tr>
 131       <th>Date</th>
 132       <td><input type="date" name="input-type-date"></td>
 133     </tr>
 134     <tr>
 135       <th>Time</th>
 136       <td><input type="time" name="input-type-time"></td>
 137     </tr>
 138     <tr>
 139       <th>Month</th>
 140       <td><input type="month" name="input-type-month"></td>
 141     </tr>
 142     <tr>
 143       <th>Week</th>
 144       <td><input type="week" name="input-type-week"></td>
 145     </tr>
 146     <tr>
 147       <th>Datetime-Local</th>
 148       <td><input type="datetime-local" name="input-type-datetime-local"></td>
 149     </tr>
 150     <tr>
 151       <th>Number</th>
 152       <td><input type="number" name="input-type-number"></td>
 153     </tr>
 154     <tr>
 155       <th>Range</th>
 156       <td><input type="range" name="input-type-range"></td>
 157     </tr>
 158     <tr>
 159       <th>Color</th>
 160       <td><input type="color" name="input-type-color"></td>
 161     </tr>
 162   </tbody>
 163 </table>
 164
 165
 166 <table class="tbl-horizontal">
 167   <caption>Abmessungen (Beispiel Input[type=text])</caption>
 168   <colgroup> <col class="wi-mediumsmall"><col class="wi-verysmall"><col class="wi-lightwide"> </colgroup>
 169   <tbody>
 170     <tr>
 171       <th>wi-smallest</th>
 172       <th>44px</th>
 173       <td><input type="text" name="input-type-text" class="wi-smallest"></td>
 174     </tr>
 175     <tr>
 176       <th>wi-verysmall</th>
 177       <th>63px</th>
 178       <td><input type="text" name="input-type-text" class="wi-verysmall"></td>
 179     </tr>
 180     <tr>
 181       <th>wi-small</th>
 182       <th>95px</th>
 183       <td><input type="text" name="input-type-text" class="wi-small"></td>
 184     </tr>
 185     <tr>
 186       <th>wi-mediumsmall</th>
 187       <th>121px</th>
 188       <td><input type="text" name="input-type-text" class="wi-mediumsmall"></td>
 189     </tr>
 190     <tr>
 191       <th>wi-normal</th>
 192       <th>161px</th>
 193       <td><input type="text" name="input-type-text" class="wi-normal"></td>
 194     </tr>
 195     <tr>
 196       <th>wi-lightwide</th>
 197       <th>188px</th>
 198       <td><input type="text" name="input-type-text" class="wi-lightwide"></td>
 199     </tr>
 200     <tr>
 201       <th>wi-wide</th>
 202       <th>249px</th>
 203       <td><input type="text" name="input-type-text" class="wi-wide"></td>
 204     </tr>
 205     <tr>
 206       <th>wi-wider</th>
 207       <th>329px</th>
 208       <td><input type="text" name="input-type-text" class="wi-wider"></td>
 209     </tr>
 210     <tr>
 211       <th>wi-verywide</th>
 212       <th>489px</th>
 213       <td><input type="text" name="input-type-text" class="wi-verywide"></td>
 214     </tr>
 215   </tbody>
 216 </table>
 217
 218 </div><!-- /.wrapper -->
 219
 220
 221 <div class="wrapper">
 222
 223
 224 <h2>Abmessungen mit assoziativen Klassennamen</h2>
 225
 226
 227 <table class="tbl-horizontal col">
 228   <caption>Klasse wi-normal</caption>
 229   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 230   <tbody>
 231     <tr>
 232       <th>Text</th>
 233       <td><input type="text" name="input-type-text-2" class="wi-normal"></td>
 234     </tr>
 235     <tr>
 236       <th>Password</th>
 237       <td><input type="password" name="input-type-password-2" class="wi-normal"></td>
 238     </tr>
 239     <tr>
 240       <th>Submit</th>
 241       <td><input type="submit" name="sbmt2" class="wi-normal"></td>
 242     </tr>
 243     <tr>
 244       <th>Reset</th>
 245       <td><input type="reset" name="rst2" class="wi-normal"></td>
 246     </tr>
 247     <tr>
 248       <th>Button</th>
 249       <td><input type="button" name="btn2" value="Anzeigen" class="wi-normal"></td>
 250     </tr>
 251     <tr>
 252       <th>Select</th>
 253       <td>
 254         <select id="slct1" name="slct2" class="wi-normal">
 255           <option value=""></option>
 256           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 257           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 258           <option value="Timothy Leary">Timothy Leary</option>
 259           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 260         </select>
 261       </td>
 262     </tr>
 263     <tr>
 264       <th>Textarea</th>
 265       <td><textarea name="txtarea2" class="wi-normal">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 266     </tr>
 267     <tr>
 268       <th>Button (Tag)</th>
 269       <td>
 270         <button name="bttn1-1" type="button" class="wi-normal">Type Button</button><br>
 271         <button name="bttn1-2" type="submit" class="wi-normal">Type Submit</button><br>
 272         <button name="bttn1-3" type="reset" class="wi-normal">Type Reset</button>
 273       </td>
 274     </tr>
 275   </tbody>
 276 </table>
 277
 278 <table class="tbl-horizontal col">
 279   <caption>Klasse wi-smallest</caption>
 280   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 281   <tbody>
 282     <tr>
 283       <th>Text</th>
 284       <td><input type="text" name="input-type-text-2" class="wi-smallest"></td>
 285     </tr>
 286     <tr>
 287       <th>Password</th>
 288       <td><input type="password" name="input-type-password-2" class="wi-smallest"></td>
 289     </tr>
 290     <tr>
 291       <th>Submit</th>
 292       <td><input type="submit" name="sbmt2" class="wi-smallest"></td>
 293     </tr>
 294     <tr>
 295       <th>Reset</th>
 296       <td><input type="reset" name="rst2" class="wi-smallest"></td>
 297     </tr>
 298     <tr>
 299       <th>Button</th>
 300       <td><input type="button" name="btn2" value="Anzeigen" class="wi-smallest"></td>
 301     </tr>
 302     <tr>
 303       <th>Select</th>
 304       <td>
 305         <select id="slct1" name="slct2" class="wi-smallest">
 306           <option value=""></option>
 307           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 308           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 309           <option value="Timothy Leary">Timothy Leary</option>
 310           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 311         </select>
 312       </td>
 313     </tr>
 314     <tr>
 315       <th>Textarea</th>
 316       <td><textarea name="txtarea2" class="wi-smallest">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 317     </tr>
 318     <tr>
 319       <th>Button (Tag)</th>
 320       <td>
 321         <button name="bttn1-1" type="button" class="wi-smallest">Type Button</button><br>
 322         <button name="bttn1-2" type="submit" class="wi-smallest">Type Submit</button><br>
 323         <button name="bttn1-3" type="reset" class="wi-smallest">Type Reset</button>
 324       </td>
 325     </tr>
 326   </tbody>
 327 </table>
 328
 329 <table class="tbl-horizontal col">
 330   <caption>Klasse wi-verysmall</caption>
 331   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 332   <tbody>
 333     <tr>
 334       <th>Text</th>
 335       <td><input type="text" name="input-type-text-2" class="wi-verysmall"></td>
 336     </tr>
 337     <tr>
 338       <th>Password</th>
 339       <td><input type="password" name="input-type-password-2" class="wi-verysmall"></td>
 340     </tr>
 341     <tr>
 342       <th>Submit</th>
 343       <td><input type="submit" name="sbmt2" class="wi-verysmall"></td>
 344     </tr>
 345     <tr>
 346       <th>Reset</th>
 347       <td><input type="reset" name="rst2" class="wi-verysmall"></td>
 348     </tr>
 349     <tr>
 350       <th>Button</th>
 351       <td><input type="button" name="btn2" value="Anzeigen" class="wi-verysmall"></td>
 352     </tr>
 353     <tr>
 354       <th>Select</th>
 355       <td>
 356         <select id="slct1" name="slct2" class="wi-verysmall">
 357           <option value=""></option>
 358           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 359           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 360           <option value="Timothy Leary">Timothy Leary</option>
 361           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 362         </select>
 363       </td>
 364     </tr>
 365     <tr>
 366       <th>Textarea</th>
 367       <td><textarea name="txtarea2" class="wi-verysmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 368     </tr>
 369     <tr>
 370       <th>Button (Tag)</th>
 371       <td>
 372         <button name="bttn1-1" type="button" class="wi-verysmall">Type Button</button><br>
 373         <button name="bttn1-2" type="submit" class="wi-verysmall">Type Submit</button><br>
 374         <button name="bttn1-3" type="reset" class="wi-verysmall">Type Reset</button>
 375       </td>
 376     </tr>
 377   </tbody>
 378 </table>
 379
 380 <table class="tbl-horizontal col">
 381   <caption>Klasse wi-small</caption>
 382   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 383   <tbody>
 384     <tr>
 385       <th>Text</th>
 386       <td><input type="text" name="input-type-text-2" class="wi-small"></td>
 387     </tr>
 388     <tr>
 389       <th>Password</th>
 390       <td><input type="password" name="input-type-password-2" class="wi-small"></td>
 391     </tr>
 392     <tr>
 393       <th>Submit</th>
 394       <td><input type="submit" name="sbmt2" class="wi-small"></td>
 395     </tr>
 396     <tr>
 397       <th>Reset</th>
 398       <td><input type="reset" name="rst2" class="wi-small"></td>
 399     </tr>
 400     <tr>
 401       <th>Button</th>
 402       <td><input type="button" name="btn2" value="Anzeigen" class="wi-small"></td>
 403     </tr>
 404     <tr>
 405       <th>Select</th>
 406       <td>
 407         <select id="slct1" name="slct2" class="wi-small">
 408           <option value=""></option>
 409           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 410           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 411           <option value="Timothy Leary">Timothy Leary</option>
 412           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 413         </select>
 414       </td>
 415     </tr>
 416     <tr>
 417       <th>Textarea</th>
 418       <td><textarea name="txtarea2" class="wi-small">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 419     </tr>
 420     <tr>
 421       <th>Button (Tag)</th>
 422       <td>
 423         <button name="bttn1-1" type="button" class="wi-small">Type Button</button><br>
 424         <button name="bttn1-2" type="submit" class="wi-small">Type Submit</button><br>
 425         <button name="bttn1-3" type="reset" class="wi-small">Type Reset</button>
 426       </td>
 427     </tr>
 428   </tbody>
 429 </table>
 430
 431 <table class="tbl-horizontal col">
 432   <caption>Klasse wi-mediumsmall</caption>
 433   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 434   <tbody>
 435     <tr>
 436       <th>Text</th>
 437       <td><input type="text" name="input-type-text-2" class="wi-mediumsmall"></td>
 438     </tr>
 439     <tr>
 440       <th>Password</th>
 441       <td><input type="password" name="input-type-password-2" class="wi-mediumsmall"></td>
 442     </tr>
 443     <tr>
 444       <th>Submit</th>
 445       <td><input type="submit" name="sbmt2" class="wi-mediumsmall"></td>
 446     </tr>
 447     <tr>
 448       <th>Reset</th>
 449       <td><input type="reset" name="rst2" class="wi-mediumsmall"></td>
 450     </tr>
 451     <tr>
 452       <th>Button</th>
 453       <td><input type="button" name="btn2" value="Anzeigen" class="wi-mediumsmall"></td>
 454     </tr>
 455     <tr>
 456       <th>Select</th>
 457       <td>
 458         <select id="slct1" name="slct2" class="wi-mediumsmall">
 459           <option value=""></option>
 460           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 461           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 462           <option value="Timothy Leary">Timothy Leary</option>
 463           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 464         </select>
 465       </td>
 466     </tr>
 467     <tr>
 468       <th>Textarea</th>
 469       <td><textarea name="txtarea2" class="wi-mediumsmall">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 470     </tr>
 471     <tr>
 472       <th>Button (Tag)</th>
 473       <td>
 474         <button name="bttn1-1" type="button" class="wi-mediumsmall">Type Button</button><br>
 475         <button name="bttn1-2" type="submit" class="wi-mediumsmall">Type Submit</button><br>
 476         <button name="bttn1-3" type="reset" class="wi-mediumsmall">Type Reset</button>
 477       </td>
 478     </tr>
 479   </tbody>
 480 </table>
 481
 482 <table class="tbl-horizontal col">
 483   <caption>Klasse wi-lightwide</caption>
 484   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 485   <tbody>
 486     <tr>
 487       <th>Text</th>
 488       <td><input type="text" name="input-type-text-2" class="wi-lightwide"></td>
 489     </tr>
 490     <tr>
 491       <th>Password</th>
 492       <td><input type="password" name="input-type-password-2" class="wi-lightwide"></td>
 493     </tr>
 494     <tr>
 495       <th>Submit</th>
 496       <td><input type="submit" name="sbmt2" class="wi-lightwide"></td>
 497     </tr>
 498     <tr>
 499       <th>Reset</th>
 500       <td><input type="reset" name="rst2" class="wi-lightwide"></td>
 501     </tr>
 502     <tr>
 503       <th>Button</th>
 504       <td><input type="button" name="btn2" value="Anzeigen" class="wi-lightwide"></td>
 505     </tr>
 506     <tr>
 507       <th>Select</th>
 508       <td>
 509         <select id="slct1" name="slct2" class="wi-lightwide">
 510           <option value=""></option>
 511           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 512           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 513           <option value="Timothy Leary">Timothy Leary</option>
 514           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 515         </select>
 516       </td>
 517     </tr>
 518     <tr>
 519       <th>Textarea</th>
 520       <td><textarea name="txtarea2" class="wi-lightwide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 521     </tr>
 522     <tr>
 523       <th>Button (Tag)</th>
 524       <td>
 525         <button name="bttn1-1" type="button" class="wi-lightwide">Type Button</button><br>
 526         <button name="bttn1-2" type="submit" class="wi-lightwide">Type Submit</button><br>
 527         <button name="bttn1-3" type="reset" class="wi-lightwide">Type Reset</button>
 528       </td>
 529     </tr>
 530   </tbody>
 531 </table>
 532
 533 <table class="tbl-horizontal col">
 534   <caption>Klasse wi-wide</caption>
 535   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 536   <tbody>
 537     <tr>
 538       <th>Text</th>
 539       <td><input type="text" name="input-type-text-2" class="wi-wide"></td>
 540     </tr>
 541     <tr>
 542       <th>Password</th>
 543       <td><input type="password" name="input-type-password-2" class="wi-wide"></td>
 544     </tr>
 545     <tr>
 546       <th>Submit</th>
 547       <td><input type="submit" name="sbmt2" class="wi-wide"></td>
 548     </tr>
 549     <tr>
 550       <th>Reset</th>
 551       <td><input type="reset" name="rst2" class="wi-wide"></td>
 552     </tr>
 553     <tr>
 554       <th>Button</th>
 555       <td><input type="button" name="btn2" value="Anzeigen" class="wi-wide"></td>
 556     </tr>
 557     <tr>
 558       <th>Select</th>
 559       <td>
 560         <select id="slct1" name="slct2" class="wi-wide">
 561           <option value=""></option>
 562           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 563           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 564           <option value="Timothy Leary">Timothy Leary</option>
 565           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 566         </select>
 567       </td>
 568     </tr>
 569     <tr>
 570       <th>Textarea</th>
 571       <td><textarea name="txtarea2" class="wi-wide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 572     </tr>
 573     <tr>
 574       <th>Button (Tag)</th>
 575       <td>
 576         <button name="bttn1-1" type="button" class="wi-wide">Type Button</button><br>
 577         <button name="bttn1-2" type="submit" class="wi-wide">Type Submit</button><br>
 578         <button name="bttn1-3" type="reset" class="wi-wide">Type Reset</button>
 579       </td>
 580     </tr>
 581   </tbody>
 582 </table>
 583
 584 <table class="tbl-horizontal col">
 585   <caption>Klasse wi-wider</caption>
 586   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 587   <tbody>
 588     <tr>
 589       <th>Text</th>
 590       <td><input type="text" name="input-type-text-2" class="wi-wider"></td>
 591     </tr>
 592     <tr>
 593       <th>Password</th>
 594       <td><input type="password" name="input-type-password-2" class="wi-wider"></td>
 595     </tr>
 596     <tr>
 597       <th>Submit</th>
 598       <td><input type="submit" name="sbmt2" class="wi-wider"></td>
 599     </tr>
 600     <tr>
 601       <th>Reset</th>
 602       <td><input type="reset" name="rst2" class="wi-wider"></td>
 603     </tr>
 604     <tr>
 605       <th>Button</th>
 606       <td><input type="button" name="btn2" value="Anzeigen" class="wi-wider"></td>
 607     </tr>
 608     <tr>
 609       <th>Select</th>
 610       <td>
 611         <select id="slct1" name="slct2" class="wi-wider">
 612           <option value=""></option>
 613           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 614           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 615           <option value="Timothy Leary">Timothy Leary</option>
 616           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 617         </select>
 618       </td>
 619     </tr>
 620     <tr>
 621       <th>Textarea</th>
 622       <td><textarea name="txtarea2" class="wi-wider">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 623     </tr>
 624     <tr>
 625       <th>Button (Tag)</th>
 626       <td>
 627         <button name="bttn1-1" type="button" class="wi-wider">Type Button</button><br>
 628         <button name="bttn1-2" type="submit" class="wi-wider">Type Submit</button><br>
 629         <button name="bttn1-3" type="reset" class="wi-wider">Type Reset</button>
 630       </td>
 631     </tr>
 632   </tbody>
 633 </table>
 634
 635 <table class="tbl-horizontal col">
 636   <caption>Klasse wi-verywide</caption>
 637   <colgroup> <col class="wi-small"><col class="wi-lightwide"> </colgroup>
 638   <tbody>
 639     <tr>
 640       <th>Text</th>
 641       <td><input type="text" name="input-type-text-2" class="wi-verywide"></td>
 642     </tr>
 643     <tr>
 644       <th>Password</th>
 645       <td><input type="password" name="input-type-password-2" class="wi-verywide"></td>
 646     </tr>
 647     <tr>
 648       <th>Submit</th>
 649       <td><input type="submit" name="sbmt2" class="wi-verywide"></td>
 650     </tr>
 651     <tr>
 652       <th>Reset</th>
 653       <td><input type="reset" name="rst2" class="wi-verywide"></td>
 654     </tr>
 655     <tr>
 656       <th>Button</th>
 657       <td><input type="button" name="btn2" value="Anzeigen" class="wi-verywide"></td>
 658     </tr>
 659     <tr>
 660       <th>Select</th>
 661       <td>
 662         <select id="slct1" name="slct2" class="wi-verywide">
 663           <option value=""></option>
 664           <option value="Hans Magnus Enzensberger">Hans Magnus Enzensberger</option>
 665           <option value="Douglas Rushkow" selected>Douglas Rushkow</option>
 666           <option value="Timothy Leary">Timothy Leary</option>
 667           <option value="Joseph Weizenbaum">Joseph Weizenbaum</option>
 668         </select>
 669       </td>
 670     </tr>
 671     <tr>
 672       <th>Textarea</th>
 673       <td><textarea name="txtarea2" class="wi-verywide">Dies ist ein ganz normaler Text in einem Mehrzeilen-Feld!</textarea></td>
 674     </tr>
 675     <tr>
 676       <th>Button (Tag)</th>
 677       <td>
 678         <button name="bttn1-1" type="button" class="wi-verywide">Type Button</button><br>
 679         <button name="bttn1-2" type="submit" class="wi-verywide">Type Submit</button><br>
 680         <button name="bttn1-3" type="reset" class="wi-verywide">Type Reset</button>
 681       </td>
 682     </tr>
 683   </tbody>
 684 </table>
 685
 686
 687
 688
 689
 690 </div>
 691
 692
 693
 694
 695
 696 </form>
 697
 698 </body>
 699 </html>