Styly formulářů

30. března 2006

•

Toto řešení předvádí, jak pomocí CSS upravit vzhled formulářů. Ve třech ukázkách jsou demonstrovány formuláře s různými položkami a možnostmi jejich stylování.

Zde si můžete prohlédnout výsledek – formulář s fieldset.

Zde si můžete prohlédnout výsledek – formulář s obrázky na pozadí.

Zde si můžete prohlédnout výsledek – formulář bez fieldset.

Toto řešení publikoval Roger Johansson. Bližší popis najdete v článku Styling even more form controls.

CSS, 1. formulář s fieldset

fieldset
{
width: 380px;
border-color:#DDD;
border-style:double;
border-width:4px 1px 2px 1px;
padding:10px;
}
legend
{
color: #a60000;
width: 100px;
text-align:center;
font-weight:bold;
margin-bottom: 0.1em;
}
label
{
float: left;
width: 170px;
padding-left:10px;
}
input
{
border: 1px solid #c7c7c7;
width: 180px;
height: 25px;
color: #333333;
margin-bottom: 8px;
}
textarea
{
border: 1px solid #c7c7c7;
width:360px;
height: 150px;
margin-bottom: 8px;
}
input.odeslat
{
background: #a60000;
color:white;
font-weight:bold;
margin-left: 90px;
height: 30px;
}
#submitbutton
{
margin-left: 107px;
width: 180px;
}

CSS, 2. formulář s obrázky na pozadí

fieldset
{
width: 400px;
padding:10px;
background: #d9d9d9;
}
label
{
float: left;
width: 170px;
padding-left:10px;
}
input
{
border: 1px solid #d9d9d9;
width: 180px;
height: 25px;
margin-bottom: 5px;
background: url(„bg_form.gif“) top left no-repeat;
padding-top:6px;
padding-left:6px;
color: #131686;
}
select
{
border: 1px solid #d9d9d9;
margin-bottom:10px;
width: 180px;
color: #131686;
}
textarea
{
background: url(„bg_form.gif“) top left no-repeat;
border: 1px solid #d9d9d9;
width:360px;
height: 150px;
padding-top:6px;
padding-left:6px;
color: #131686;
}
input.odeslat
{
margin-top: 5px;
background: #d9d9d9;
padding:5px;
width: 380px;
height: 60px;
}
#submitbutton
{
background: url(„bg_tlac.gif“) top left no-repeat;
margin-top: 5px;
}

CSS, 3. formulář bez fieldset

.formular3
{
width: 220px;
height: 430px;
border: 1px solid #cccccc;
background: url(„bg_bckg.gif“) top left no-repeat;
}
label
{
float: left;
color: #0d900d;
width: 180px;
padding-left:10px;
}
input
{
background: def2d6;
border: 1px solid #e3e47c;
width: 200px;
height: 25px;
margin-bottom: 5px;
margin-left: 10px;
}
select
{
background: def2d6;
margin-left: 10px;
border: 1px solid #d9d9d9;
margin-bottom:10px;
width: 180px;
}
input.odeslat
{
color:white;
margin-top: 10px;
margin-left: 10px;
height: 30px;
background: #0d900d;
}
#submitbutton
{
margin-top: 5px;
width: 200px;
}

XHTML, 1. formulář s fieldset

<form class=“form1″ action=“..“ method=“post“>
<fieldset>
<legend>Dotazy na nás</legend>
<p>
<label for=“jmeno“>Jméno:</label>
<input id=“jmeno“ name=“Jméno“ type=“text“ />
<br />
<label for=“adresa“>Adresa:</label>
<input id=“adresa“ name=“Adresa“ type=“text“ />
<br />
<label for=“email“>Email:</label>
<input id=“email“ name=“E-mail“ type=“text“ />
<br />
<label for=“telefon“>Telefon:</label>
<input class=“usual“ id=“telefon“ name=“Telefon“ type=“text“ />
<br />
<textarea name=“message“ cols=“40″ rows=“6″></textarea>
<br />
<input class=“odeslat“ id=“submitbutton“ name=“odeslat“ type=“submit“ value=“Odeslat dotaz“ />
<input name=“autmail“ type=“hidden“ value=“..“ />
</p>
</fieldset>
</form>

XHTML, 2. formulář s obrázky na pozadí

<form class=“form2″ action=“..“ method=“post“>
<fieldset>
<p>
<label for=“jmeno2″>Jméno:</label>
<input id=“jmeno2″ name=“Jméno“ type=“text“ />
<br />
<label for=“email“>Email:</label>
<input id=“email“ name=“E-mail“ type=“text“ />
<br />
<label for=“demand“>Typ dotazu:</label>
<select id=“demand“ name=“demand“>
<option value=“..“>lorem ipsum</option>
<option value=“..“>lorem ipsum</option>
</select>
<br />
<textarea name=“message“ cols=“40″ rows=“6″></textarea>
<br />
<input class=“odeslat“ id=“submitbutton“ name=“odeslat“ type=“submit“ value=““ />
<input name=“autmail“ type=“hidden“ value=“..“ />
</p>
</fieldset>
</form>

XHTML, 3. formulář bez fieldset

<form class=“form3″ action=“..“ method=“post“>
<div class=“formular3″>
<p>
<label for=“jmeno“>Jméno:</label>
<br />
<input class=“usual“ id=“jmeno“ name=“Jméno“ type=“text“ />
<br />
<label for=“email“>Email:</label>
<br />
<input class=“usual“ id=“email“ name=“E-mail“ type=“text“ />
<br />
<label for=“typ“>Typ dotazu:</label>
<br />
<select id=“typ“ name=“typ“>
<option value=“..“>lorem ipsum</option>
<option value=“..“>lorem ipsum</option>
</select>
<br />
<label for=“druh“>Druh dotazu:</label>
<br />
<select id=“druh“ name=“Druh“ multiple=“multiple“>
<option value=“..“>lorem ipsum</option>
<option value=“..“>lorem ipsum</option>
<option value=“..“>lorem ipsum</option>
<option value=“..“>lorem ipsum</option>
</select>
<br />
<label for=“adresa“>Adresa:</label>
<br />
<input class=“usual“ id=“adresa“ name=“Adresa“ type=“text“ />
<br />
<label for=“telefon“>Telefon:</label>
<br />
<input class=“usual“ id=“telefon“ name=“Telefon“ type=“text“ />
<br />
<input class=“odeslat“ id=“submitbutton2″ name=“odeslat“ type=“submit“ value=“Odeslat dotaz“ />
<input name=“autmail“ type=“hidden“ value=“..“ />
</p>
</div>
</form>