| <?xml version="1.0"?> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en"> |
| <head> |
| |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> |
| <meta http-equiv="content-style-type" content="text/css" /> |
| <meta http-equiv="content-language" content="en" /> |
| <meta name="keywords" content="centos web forms visual style guide" /> |
| <meta name="description" content="CentOS forms visual style guide is a tool to help you customize forms inside CentOS websites." /> |
| <meta name="copyright" content="2009-2010 Alain Reguera Delgado" /> |
| |
| <title>Forms - Home</title> |
| |
| <link href="/home/centos/artwork/trunk/Identity/Webenv/App/Home/stylesheet.css" rel="stylesheet" type="text/css" /> |
| |
| </head> |
| |
| <body> |
| |
| <a name="top" /> |
| |
| <div id="wrap"> |
| |
| <div id="page-header"> |
| |
| |
| |
| |
| |
| |
| <div id="logo"> |
| <a title="Community Enterprise Operating System" |
| href="http://www.centos.org/"><img |
| src="/home/centos/artwork/trunk/Identity/Images/Brands/centos-logo-white-resized-x58.png" alt="CentOS"/></a> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <div class="tabs1"> |
| |
| <span class="current"> |
| <a accesskey="1" title="CentOS Home Page |
| (Alt+Shift+1)" href="http://www.centos.org/"><span>Home</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="2" title="CentOS Wiki (Alt+Shift+2)" |
| href="/home/centos/artwork/trunk/Identity/Models/Html/Moin/index.html"><span>Wiki</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="3" title="CentOS Mailing Lists |
| (Alt+Shift+3)" href="http://lists.centos.org/"><span>Lists</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="4" title="CentOS Forums (Alt+Shift+4)" |
| href="http://forums.centos.org"><span>Forums</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="5" title="CentOS Forums (Alt+Shift+5)" |
| href="http://planet.centos.org"><span>Planet</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="6" title="CentOS Projects (Alt+Shift+6)" |
| href="https://projects.centos.org/trac/"><span>Projects</span></a> |
| </span> |
| |
| <span> |
| <a accesskey="7" title="CentOS Mirrors (Alt+Shift+7)" |
| href="http://mirrors.centos.org"><span>Mirrors</span></a> |
| </span> |
| |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| <div class="page-line white"><hr style="display:none;" /></div> |
| <div class="links"> |
| |
| |
| |
| |
| |
| |
| <div class="user"> |
| <span><a href="">Login</a></span> |
| <span><a href="">Register</a></span> |
| <span class="last"><a href="">Lost your password?</a></span> |
| </div> |
| |
| |
| |
| |
| |
| |
| <div class="trail"> |
| <span><a href="">Pagination</a></span> |
| <span><a href="">Lists</a></span> |
| <span><a href="">Headings</a></span> |
| <span><a href="">Links</a></span> |
| <span><a href="">Texts</a></span> |
| <span class="last"><a href="">Home</a></span> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| <div class="tabs1"> |
| |
| <span><a title="Welcome to the web special interest group" |
| href="index.html"><span>Welcome</span></a></span> |
| |
| <span><a title="CentOS headings visual style guide." |
| href="headings.html"><span>Headings</span></a></span> |
| |
| <span><a title="CentOS texts visual style guide." |
| href="texts.html"><span>Texts</span></a></span> |
| |
| <span><a title="CentOS lists visual style guide." |
| href="lists.html"><span>Lists</span></a></span> |
| |
| <span><a title="CentOS links visual style guide." |
| href="links.html"><span>Links</span></a></span> |
| |
| <span><a title="CentOS tables visual style guide." |
| href="tables.html"><span>Tables</span></a></span> |
| |
| <span class="current"><a title="CentOS forms visual style guide." |
| href="forms.html"><span>Forms</span></a></span> |
| |
| <span><a title="CentOS pagination visual style guide." |
| href="pagination.html"><span>Pagination</span></a></span> |
| |
| </div> |
| |
| </div> |
| |
| <div class="page-line white"><hr style="display:none;" /></div> |
| |
| </div> |
| |
| |
| |
| |
| |
| <div id="page-body"> |
| |
| <div id="content-links"> |
| |
| |
| |
| |
| |
| <ul class="first"> |
| <li><a href="">Release Notes</a></li> |
| <li><a href="">Lifetime</a></li> |
| <li><a href="">Downloads</a></li> |
| <li><a href="">Documentation</a></li> |
| <li class="current"><a href="">Security Advisories</a></li> |
| <li><a href="">Bugs</a></li> |
| <li><a href="">Tips and tricks</a></li> |
| <li><a href="">HowTos</a></li> |
| </ul> |
| |
| <ul> |
| <li>In this bar, it is possible to separate links by |
| blocks.</li> |
| </ul> |
| |
| </div> |
| |
| <div id="content"> |
| |
| |
| |
| |
| |
| <div class="trail"> |
| <span><a href="">Pagination</a></span> |
| <span><a href="">Lists</a></span> |
| <span><a href="">Headings</a></span> |
| <span><a href="">Links</a></span> |
| <span><a href="">Texts</a></span> |
| <span class="last"><a href="">Home</a></span> |
| </div> |
| |
| |
| |
| |
| |
| <h1>Forms</h1> |
| |
| <p>CentOS Forms Visual Style Guide.</p> |
| |
| <div class="toc"> <h3>Table of contents</h3> <ul><li><a href="#head-385abd761ded7c00ce2f0c9cced2d5f6">Elements</a> </li><li><a href="#head-7a508018f0d8ed019e8a73aee8f978d9">Recommendations</a> </li></ul> </li></ul> </div> |
| |
| <h2><a name="head-385abd761ded7c00ce2f0c9cced2d5f6">Elements</a></h2> |
| |
| <form method="post" action="" title="Form Styles"> |
| <fieldset> |
| <legend>Fieldset:</legend> |
| <div class="row1"> |
| <span class="descrip">input[type="text"]</span> |
| <div class="field"><input type="text" name="fname" value="" size="40" /></div> |
| </div> |
| |
| <div class="row2"> |
| <span class="descrip">input[type="password"]</span> |
| <div class="field"><input type="password" name="email" value="" size="40" /></div> |
| </div> |
| |
| <div class="row1"> |
| <span class="descrip">textarea</span> |
| <div class="field"><textarea name="pdescrip" cols="50" rows="10"></textarea></div> |
| </div> |
| |
| <div class="row2"> |
| <span class="descrip">select</span> |
| <div class="field"> |
| <select name="ulang" title="One Level Selection"> |
| <option value="" selected="selected"></option> |
| <option value="en">English</option> |
| <option value="es">Spanish</option> |
| <option value="fr">French</option> |
| <option value="it">Italian</option> |
| </select> |
| |
| <select name="mlevel" title="Multi Level Selection"> |
| <option value="" selected="selected"></option> |
| <optgroup label="CentOS-3"> |
| <option value="c3-docs">Documentation</option> |
| <option value="c3-wiki">Wiki</option> |
| <option value="c3-download">Download</option> |
| <option value="c3-lists">Mailing Lists</option> |
| <option value="c3-forums">Forums</option> |
| <option value="c3-bugs">Bugs</option> |
| </optgroup> |
| <optgroup label="CentOS-4"> |
| <option value="c4-docs">Documentation</option> |
| <option value="c4-wiki">Wiki</option> |
| <option value="c4-download">Download</option> |
| <option value="c4-lists">Mailing Lists</option> |
| <option value="c4-forums">Forums</option> |
| <option value="c4-bugs">Bugs</option> |
| </optgroup> |
| <optgroup label="CentOS-5"> |
| <option value="c5-wiki">Wiki</option> |
| <option value="c5-docs">Documentation</option> |
| <option value="c5-download">Download</option> |
| <option value="c5-lists">Mailing Lists</option> |
| <option value="c5-forums">Forums</option> |
| <option value="c5-bugs">Bugs</option> |
| </optgroup> |
| </select> |
| |
| <select multiple="multiple" title="Multiple Selection (One Level)" size="5"> |
| <option value="c5-wiki">Wiki</option> |
| <option value="c5-docs">Documentation</option> |
| <option value="c5-download">Download</option> |
| <option value="c5-lists">Mailing Lists</option> |
| <option value="c5-forums">Forums</option> |
| <option value="c5-bugs">Bugs</option> |
| </select> |
| <select multiple="multiple" title="Multiple Selection (Two Levels)" size="5"> |
| <optgroup label="CentOS-3"> |
| <option value="c3-docs">Documentation</option> |
| <option value="c3-wiki">Wiki</option> |
| <option value="c3-download">Download</option> |
| <option value="c3-lists">Mailing Lists</option> |
| <option value="c3-forums">Forums</option> |
| <option value="c3-bugs">Bugs</option> |
| </optgroup> |
| <optgroup label="CentOS-4"> |
| <option value="c4-docs">Documentation</option> |
| <option value="c4-wiki">Wiki</option> |
| <option value="c4-download">Download</option> |
| <option value="c4-lists">Mailing Lists</option> |
| <option value="c4-forums">Forums</option> |
| <option value="c4-bugs">Bugs</option> |
| </optgroup> |
| <optgroup label="CentOS-5"> |
| <option value="c5-wiki">Wiki</option> |
| <option value="c5-docs">Documentation</option> |
| <option value="c5-download">Download</option> |
| <option value="c5-lists">Mailing Lists</option> |
| <option value="c5-forums">Forums</option> |
| <option value="c5-bugs">Bugs</option> |
| </optgroup> |
| </select> |
| </div> |
| </div> |
| |
| <div class="row1"> |
| <span class="descrip">checkbox</span> |
| <div class="field"> |
| |
| <div class="column"> |
| <label title="Check 1"><input name="check[]" type="checkbox" value="1" />Check 1 column 1</label><br /> |
| <label title="Check 2"><input name="check[]" type="checkbox" value="2" />Check 2</label><br /> |
| <label title="Check 3"><input name="check[]" type="checkbox" value="3" />Check 3</label><br /> |
| <label title="Check 4"><input name="check[]" type="checkbox" value="4" />Check 4</label><br /> |
| </div> |
| |
| <div class="column"> |
| <label title="Check 5"><input name="check[]" type="checkbox" value="5" />Check 5</label><br /> |
| <label title="Check 6"><input name="check[]" type="checkbox" value="6" />Check 6</label><br /> |
| <label title="Check 7"><input name="check[]" type="checkbox" value="7" />Check 7 column 2</label><br /> |
| <label title="Check 8"><input name="check[]" type="checkbox" value="8" />Check 8</label><br /> |
| </div> |
| |
| <div class="colum"> |
| <label title="Check 9"><input name="check[]" type="checkbox" value="9" />Check 9</label><br /> |
| <label title="Check 10"><input name="check[]" type="checkbox" value="10" />Check 10</label><br /> |
| <label title="Check 11"><input name="check[]" type="checkbox" value="11" />Check 11</label><br /> |
| <label title="Check 12"><input name="check[]" type="checkbox" value="12" />Check 12</label><br /> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="row2"> |
| <span class="descrip">radio</span> |
| <div class="field"> |
| |
| <div class="column"> |
| <label title="Radio 1"><input name="radio" type="radio" value="1" />Radio 1 column 1</label><br /> |
| <label title="Radio 2"><input name="radio" type="radio" value="2" />Radio 2</label><br /> |
| <label title="Radio 3"><input name="radio" type="radio" value="3" />Radio 3</label><br /> |
| <label title="Radio 4"><input name="radio" type="radio" value="4" />Radio 4</label> |
| </div> |
| |
| <div class="column"> |
| <label title="Radio 5"><input name="radio" type="radio" value="5" />Radio 5</label><br /> |
| <label title="Radio 6"><input name="radio" type="radio" value="6" />Radio 6</label><br /> |
| <label title="Radio 7"><input name="radio" type="radio" value="7" />Radio 7</label><br /> |
| <label title="Radio 8"><input name="radio" type="radio" value="8" />Radio 8</label> |
| </div> |
| |
| </div> |
| </div> |
| |
| <div class="page-line"><hr style="display:none;" /></div> |
| |
| <div class="row3"> |
| <span class="submit"><input type="submit" name="upref" |
| value="Submit" /></span> |
| |
| <div class="descrip">Brief fieldset description here ... Brief |
| fieldset description here ... Brief fieldset description here |
| ... |
| </div> |
| |
| </div> |
| |
| </fieldset> |
| </form> |
| |
| <h2><a name="head-7a508018f0d8ed019e8a73aee8f978d9">Recommendations</a></h2> |
| |
| <ul> |
| <li>...</li> |
| </ul> |
| |
| |
| |
| |
| <div class="page-line"><hr style="display:none;" /></div> |
| |
| </div> |
| |
| |
| |
| |
| |
| <div class="page-line white"><hr style="display:none;" /></div> |
| <div id="page-footer"> |
| |
| <div class="top"> |
| <a title="Top" |
| href="#top"><img |
| src="/home/centos/artwork/trunk/Identity/Images/Webenv/top.png" |
| alt="Top"/></a> |
| </div> |
| |
| <div class="credits"> |
| Copyright © 2009-2011 Alain Reguera Delgado. All rights |
| reserved.<br />This website is licensed under a <a |
| rel="license" |
| href="http://creativecommons.org/licenses/by-sa/3.0/">Creative |
| Commons Attribution-Share Alike 3.0 Unported License</a>. |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </body> |
| |
| </html> |