Styly formulářů
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>
Mohlo by vás také zajímat
-
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 2024 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
Umělá inteligence v IT
27. září 2023
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024