Es domāju, ka jums jāizveido papildu HTML fails. Es vismaz saglabāju to ar nosaukumu kontakt.html. kontakt.html atrodas uz tās pašas līmeņa kā jums jau zināmā index.html.
Šajā pirmajā daļā tiek veiktas pamatinformācijas iestatīšanas. Līdzīgi smalkumi kā apaļas malas, krāsu pārejas utt., tiks aprakstīti nākamajā pamācībā.
Iekšā kontakt.html tiek izveidots veidlapa. Veidlapa tiek definēta div jomā ar klasi satura. Tad apdomājiet, kādas laukus jāizveido. Man ir izvēlējies lūgt sekojošo informāciju:
• Vārds
• E-pasta adrese
• Komentārs
Nekādā gadījumā jums pašiem jālemj, kādu informāciju vēlaties iegūt. Vispārīgi es ieteiktu jums atgūt tikai patiešām nepieciešamās dati. Lielākā daļa tīmekļa vietņu apmeklētāju aizbiedējas no garām veidlapām. Tāpēc ir jābūt īsam.
Manas veidlapas pamatstruktūra ir šāda:
<div class="content">
<formclass="form" action="#" method="post">
<fieldset>
<legend>Kontaktējies ar mums</legend>
<ol>
<li>
<label for="name">Vārds:</label>
<input type="text" name="name"id="name" value="" />
</li>
<li>
<label for="email">E-pasta adrese:</label>
<input type="text" name="email" id="email"value="" />
</li>
<li>
<label for="comment">Komentārs:</label>
<textarea cols="32" rows="7"name="content" id="content"></textarea>
</li>
<li class="button">
<input type="submit" name="submit"id="submit" value="Nosūtīt" />
</li>
</ol>
</fieldset>
</form>
</div>Veidlapā nekādā ziņā nav nekas īpašs. Katra veidlapas lauka apkārt ir izmantojusi fieldset definīciju. Kā izveidot veidlapas laukus un kādi ir label elementi, jau ir izskaidrots. Šeit vajadzētu pievērsties veidlapas izveidei.
Pēc rezultāta atvēršanas pārlūkprogrammā pirmkārt parādās ne pārāk pievilcīga veidlapa.
Šeit, protams, jāveic uzlabojumi.
form {
padding: 3px 0 0;
margin: 10px auto;
width: 550px;
}
Šeit ir noteikti ārpuse un iekšpuse ir definēta. Turklāt formai ir noteikta platums 550 pikseļi.
Tālāk notiek fieldset pielāgojums.
fieldset {
padding: 10px 20px 25px;
}
Šeit ir definēti atstarpes.
Veidlapas lauki paši pēc sevis ir izvietoti kārtotā ol sarakstā.
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Lai šis saraksts vizuāli neizskatītos kā saraksts, ir izmantota list-style-type: none; Izkliedošanās rāmji un iekšējās atstarpes katram ir iestatītas uz 0.
li {
float: left;
padding: 10px;
}
Ir nedaudz īpašības attiecībā uz pogu, kas atrodas zem veidlapas. To vajadzētu novietot pa labi.
li.button {
float: none;
clear: both;
text-align: right;
}Veidlapas virsraksts
Tagad veltīsim laiku legend elementam. Tas tiek izmantots, lai definētu veidlapas virsrakstu.
Virsraksta definīcija ir šāda:
fieldset legend {
font-weight: bold;
font-size: 22px;
margin: 20px 0 0 10px;
}Apzīmējumi
Apliecība elements jums jau ir bijis saskarē ar šo norādījumu. Ar šo marķējumu ir iespējams veidot loģisku saikni starp lauka nosaukumu un patieso veidlapas lauku. CSS definīcijas ziņā šeit ir īpašums.
label {
display:block;
cursor: pointer;
font-weight: bold;
line-height: 24px;
}
Es aprīkoju label elementu, tostarp ar cursor norādi. Tādējādi apmeklētājiem tiek signalizēts, ka lauka nosaukumi ir klikšķināmi. Ja patiesībā noklikšķina uz lauka apraksta, tiks automātiski novietots kursors šajā laukā.
Veidlapas lauki
Nākamajā solī tiek veikti patiešām veidlapas lauki. Vispirms ir sniegtas vispārējas informācijas par input un textarea.
input, textarea {
color: #3399FF;
border: 1px solid #3399FF;
font: 13px Helvetica, Arial, bez-serifa;
padding: 8px 10px;
width: 190px;
}
Tas attiecas tikai uz dizaina aspektiem. Īpaša uzmanība jāpievērš rāmjiem. Kad tiek novietots kursors laukā, rāmja krāsa mainās. Tas nav tikai estētisks aspekts. Patiesībā tas palīdz apmeklētājiem aizpildot veidlapas. Tādējādi viņi vienmēr redz, kurā laukā atrodas kursors.
Tagad sekos dažas norādes par vairākiem rindu teksta ievades laukiem.
textarea {
width: 430px;
overflow: auto;
}
Šī lauka platums tiek noteikts uz 430 pikseļiem. Var šķist nedaudz dīvaini uzreiz redzamas instrukcijas overflow: auto attiecībā uz divrindu ievades laukiem. Šis rindkods ir saistīts ar vecākiem Internet Explorer versijām. Patiesībā šī pārlūkprogramma, pat ja tam nebija nepieciešamības, parādīja attēlus divrindu ievades laukos. Ar overflow: auto šo skaistuma problēmu var novērst.
Iestatiet Sūtīt pogu
Pašlaik Sūtīšanas poga izskatās diezgan vienkārša. Tas tagad mainīsies. Rezultāts izskatīsies šādi:
Pogai tiks piešķirtas dažādas īpašības.
• Fona krāsa
• Fonta izskats
• Rāmis
• Atstarpes
Pielietotais CSS sintakse izskatās šādi:
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;
}
input[type="submit"]. Ar šo selektoru tiek piekļūts ievades elementiem, kuriem ir atribūtsarī saturs "submit".
