<?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/Css/base.css" rel="stylesheet" type="text/css" media="screen projection"/>
<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app.css" rel="stylesheet" type="text/css" media="screen projection"/>
<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-content-1.css" rel="stylesheet" type="text/css" media="screen projection"/>
<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-tabs.css" rel="stylesheet" type="text/css" media="screen projection"/>
</head>
<body>
<a name="top" />
<div id="wrap">
<div id="page-header">
<!--
CentOS specific brand information. Use this section to show
the CentOS logo. The image used as CentOS logo needs to be 58
pixels height.
-->
<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>
<!--
Advertisement area (468x60 pixels).
-->
<div class="advertisement">
<img src="/home/centos/artwork/trunk/Identity/Images/Webenv/ads-sample-468x60.png" alt="Advertisement" />
<script type="text/javascript"><!--
google_ad_client = "pub-6973128787810819";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "204c8d";
google_color_bg = "345c97";
google_color_link = "0000FF";
google_color_text = "FFFFFF";
google_color_url = "008000";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!--
CentOS specific navigation links. Use this section to list the
web applications you want to be always visible no matter where
you are inside the CentOS web environment. Example of web
applications are: Wiki, Lists, Mirrors, Forums, Planet, etc.
-->
<div class="page-line"><hr style="display:none;" /></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.xhtml">
<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 Planet (Alt+Shift+5)" href="http://planet.centos.org">
<span>Planet</span></a>
</span>
<span>
<a accesskey="6" title="CentOS Bugs (Alt+Shift+6)" href="http://bugs.centos.org">
<span>Bugs</span></a>
</span>
<span>
<a accesskey="7" title="CentOS Projects (Alt+Shift+7)" href="https://projects.centos.org/trac/">
<span>Projects</span></a>
</span>
<span>
<a accesskey="8" title="CentOS Mirrors (Alt+Shift+8)" href="http://mirrors.centos.org">
<span>Mirrors</span></a>
</span>
</div>
<div class="page-line white"><hr style="display:none;" /></div>
<div class="links">
<!--
Application specific links for user stuff. Use this section to
set Login, Register, Lost your passwrod? and so links.
-->
<div class="user">
<span><a href="">Lost your password?</a></span>
<span><a href="">Register</a></span>
<span class="last"><a href="">Login</a></span>
</div>
<!--
Application specific links for trail sutff. Use this section
if your application trails the pages you've visited.
-->
<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>
<!--
Application specific links for content stuff. Use this section
to set application specific links that need to remain always
visible inside the application environment.
-->
<div class="tabs1">
<span><a title="Welcome to the web special interest group"
href="index.xhtml"><span>Welcome</span></a></span>
<span><a title="CentOS headings visual style guide."
href="headings.xhtml"><span>Headings</span></a></span>
<span><a title="CentOS texts visual style guide."
href="texts.xhtml"><span>Texts</span></a></span>
<span><a title="CentOS lists visual style guide."
href="lists.xhtml"><span>Lists</span></a></span>
<span><a title="CentOS links visual style guide."
href="links.xhtml"><span>Links</span></a></span>
<span><a title="CentOS tables visual style guide."
href="tables.xhtml"><span>Tables</span></a></span>
<span class="current"><a title="CentOS forms visual style guide."
href="forms.xhtml"><span>Forms</span></a></span>
<span><a title="CentOS pagination visual style guide."
href="pagination.xhtml"><span>Pagination</span></a></span>
</div>
</div>
<div class="page-line white"><hr style="display:none;" /></div>
</div>
<!--
Start page body definitions.
-->
<div id="page-body">
<div id="content-links">
<!--
The content of right column goes here.
-->
<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">
<!--
Application specific links for breadcrumbs sutff. Use this
section if your application supports breadcrumbs.
-->
<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>
<!--
The content of left column starts here.
-->
<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> </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>
<!--
The content of left column ends here.
-->
<div class="page-line"><hr style="display:none;" /></div>
</div>
<!--
Start page footer definitions.
-->
<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>