Feltételezem, hogy létrehoz egy további HTML fájlt. Ezt legalábbis a kontakt.html név alatt mentem el. A kontakt.html az index.html fájllal már ismert előtérben van.
Ebben az első részben az űrlap alapbeállításait végzik el. Az ilyeneket, mint a kerek sarkok, színátmenetek stb., akkor követik a következő bemutatóban.
A kontakt.html fájlban készítsd el az űrlapot. Az űrlap a div osztállyal rendelkező content területen belül van definiálva. Fontoljátok meg, hogy milyen mezőket kell létrehozni. A következő információk lekérdezésére döntöttem:
• Név
• E-mail cím
• Megjegyzés
Természetesen ti magatoknak döntsétek el, milyen információkat szeretnétek gyűjteni. Általánosságban azt javaslom, hogy csak azokat az adatokat gyűjtsétek be, amelyek valóban szükségesek. Az oldalak látogatóinak többsége ugyanis visszariad a terjedelmes űrlapoktól. Tehát legyetek tömörek.
Az űrlap alapstruktúrája az alábbiak szerint néz ki:
<div class="content">
<formclass="form" action="#" method="post">
<fieldset>
<legend>Kapcsolatfelvétel</legend>
<ol>
<li>
<label for="name">Név:</label>
<input type="text" name="name"id="name" value="" />
</li>
<li>
<label for="email">E-mail cím:</label>
<input type="text" name="email" id="email"value="" />
</li>
<li>
<label for="comment">Megjegyzés:</label>
<textarea cols="32" rows="7"name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit"id="submit" value="Küldés" />
</li>
</ol>
</fieldset>
</form>
</div>Az űrlap eleinte semmilyen különlegességet nem tartalmaz. Az űrlapmezők körül egy fieldset meghatározását alkalmazták. Hogyan lehet létrehozni űrlapmezőket és mi a helyzet a label elemekkel, ezekről már korábban szó esett. Ezen a ponton tehát a teljes figyelem a űrlap formázására irányul.
Ha a böngészőben megnézzük az eredményt, egyelőre nem túl vonzó űrlap látható.
Ebben természetesen javítani kell.
Az űrlapról kezdeti információk szerepelnek.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Ez határozza meg a külső és belső margókat. Az űrlap szélessége 550 pixelre van beállítva.
A következő lépés a fieldset formázásával folytatódik.
fieldset {
padding: 10px 20px 25px;
}
Itt vannak definiálva a margók.
Az űrlapmezők maguk egy rendezett ol listában vannak elhelyezve.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Hogy ez a lista vizuálisan ne látszódjon lista formájában, használjuk a list-style-type: none;-t. Emellett mind a margókat, mind a belső távolságot 0-ra állítjuk be.
A következő lépésben definiáljuk a listaelemeket. Ezek balra floatolnak és 10 képpont belső margóval rendelkeznek.
li {
float: left;
padding: 10px;
}
Egy különlegesség van még a gomb szempontjából, amely az űrlap alatt található. Ez jobbra igazítva lesz.
li.button {
float: none;
clear: both;
text-align: right;
}Az űrlap fejléce
Fordítsuk most a figyelmet a legend elemeire. A legenddel lehet definiálni az űrlap fejlécét.
A szöveg az alábbiak szerint néz ki:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}A címkék
A label elem már találkozott veletek ebben a sorozatban. Ennek a label segítségével logikai kapcsolat hozható létre a mezőcímke és maga az űrlapmező között. A CSS-definícióra vonatkozóan itt egy különlegesség van.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
A label elem számára többek között a cursor beállítást használom. Ezáltal a látogatóknak jelezve van, hogy a mezőcímkék kattinthatók. Ha valaki valóban kattint egy mezőleírásra, az az adott mezőbe automatikusan bekerül a kurzor.
Az űrlapmezők formázása
A következő lépésben formázni fogjuk az aktuális űrlapmezőket. Először általános információkat adunk meg az input-ról és a textarea-ról.
input, textarea {
color: #3399FF
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, sans-serif;
padding: 8px 10px;
width: 190px;
}
Ezek kizárólag megjelenítésbeli dolgok. Különös figyelmet kell fordítani a keretekre. Amint a kurzort egy mezőbe helyezi az ember, megváltozik a keret színe. Ez nemcsak esztétikai szempontból fontos. Valójában ez segíti a látogatókat a űrlap kitöltésekor. Így mindig láthatják, melyik mezőben tartózkodik éppen a kurzor.
Most következnek néhány információ a többsoros szövegbeviteli mezőről.
textarea {
width: 430px;
overflow: auto;
}
Ennek a mezőnek a szélessége 430 pixelre van beállítva. Kissé furcsának tűnhet első pillantásra az overflow: auto utasítás a többsoros beviteli mezőkkel kapcsolatban. Ez a sor az Internet Explorer régebbi verzióinak köszönhető. Valójában ez a böngésző azonban megjelenítette a görgetősávokat a többsoros beviteli mezőkben, még akkor is, ha ez nem volt szükséges. Az overflow: auto segítségével ezt a problémát meg lehet kerülni.
A küldés gomb megjelenítése
Jelenleg a küldés gomb elég egyszerűnek tűnik. Ez most fog megváltozni. Az eredmény a következő lesz:
A gombhoz különböző tulajdonságokat rendelnek.
• Háttérszín
• Betűtípus kialakítása
• Keret
• Távolságok
A hozzá tartozó CSS szintaxis a következőképpen néz ki:
input[type="submit"] {
background-color: #3399FF;
color: #fff;
cursor: pointer;
font: bold 1em/1.2 Georgia, "Times New Roman ", serif;
border: 1px solid #000;
padding: 5px 10px;
width: auto;
}
Ebben az esetben talán említésre méltó az input[type="submit"] adat. Ennek a szelektornak az alkalmazásával azon input elemekre vonatkozik, amelyek rendelkeznek a type="submit" attribútum-érték kombinációval.
