HTML & CSS pradedantiesiems (dalis 46): Kontaktinis formažas (1)

Aš tęsiu, kad jūs sukursite papildomą HTML failą. Bet jūs jį saugosite kaip kontaktai.html, jis bus toje pačioje vietoje kaip jau gerai pažįstamas jums index.html.

Šiame pirmame etape bus atlikti pagrindiniai formos nustatymai. Dėl dalykų kaip apvalūs kampai, spalvų gradientai ir kt., sekantis pamokslas.

Viduje kontaktai.html kuriame formą. Forma yra apibrėžta div srityje su klasės pavadinimu content. Vėliau apgalvokite, kokius laukus norite sukurti. Aš nusprendžiau klausti šių informacijos:

• Vardas
• El. pašto adresas
• Komentaras

Žinoma, jūs turite nuspręsti patys, kokias informacijas norite rinkti. Vis dėlto, aš patariu rinkti tik iš tikrųjų reikalingus duomenis. Daugelis interneto svetainių lankytojų bijo sudėtingų formų. Taigi, nesudarykite jų ilgus.

Mano formos pagrindinė struktūra atrodo taip:

<div class="content">
   <form class="form" action="#" method="post">
   <fieldset>
   <legend>Susisiekime</legend>
   <ol>
      <li>
      <label for="name">Vardas:</label>
      <input type="text" name="name" id="name" value="" />
      </li>
      <li>
      <label for="email">El. pašto adresas:</label>
      <input type="text" name="email" id="email" value="" />
      </li>
      <li>
      <label for="comment">Komentaras:</label>
      <textarea cols="32" rows="7" name="content" id="content"></textarea>
      </li>
      <li class="button">
      <input type="submit" name="submit" id="submit" value="Siųsti" />
      </li>
   </ol>
   </fieldset>
   </form>
</div>

Šiose formose iš pradžių nėra nieko ypatingo. Aplink formos laukus taikomas fieldset apibrėžimas. Kaip sukurti formos laukus ir ką reiškia label elementai, jau buvo išsamiai aprašyta. Šioje vietoje turėtų būti atkreiptas dėmesys į formos dizainavimą.

Kai atidarysite naršyklėje rezultatą, iš pradžių pamatysite dar nepretenzingą formą.





Nykti reikia šią formą gerinti.

Pirmai suteikiama pagrindinė informacija apie formą.

form {
   padding: 3px 0 0;
   margin: 10px auto;
   width: 550px;
 }

Čia apibrėžiami išoriniai ir vidiniai atstumai. Be to, formai nustatoma 550 pikselių plotis.

Toliau einama į fieldset dizainavimą.

fieldset {
   padding: 10px 20px 25px;
 }

Čia taip pat apibrėžiami atstumai.

Patys formos laukai yra sukurti įrašytuose ol sąrašuose.

ol {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }

Tam, kad šis sąrašas nebeturėtų išorinių ženklų, naudojamas list-style-type: none;. Be to, tiek kraštai, tiek vidiniai atstumai nustatomi kaip 0.

Kitame žingsnyje nustatomi sąrašo įrašai. Jie plaukia iš kairės pusės ir turi 10 pikselių vidinį atstumą.

li {
   float: left;
   padding: 10px;
 }

Yra viena ypatingybė dėl mygtuko žemiau formos. Jis turi būti dešinėje pusėje.

li.button {
   float: none;
   clear: both;
    text-align: right;
 }

Formos antraštė

Dabar dėmesys sutelkiamas į legend elemento. Jame apibrėžiama formos antraštė.





Formos antraščiai apibrėžimas yra toks:

fieldset legend {
   font-weight: bold;
   font-size: 22px;
   margin: 20px 0 0 10px;
 }

Pavadinimai

label elementas jums taip pat jau buvo aptartas šiame cikle. Tuo label būna sukurtas loginis ryšys tarp lauko pavadinimo ir paties formos lauko. Dėl CSS apibrėžimo čia taip pat yra viena ypatingybė.

label {
   display:block;
   cursor: pointer;
   font-weight: bold;
   line-height: 24px;
 }

Aš apdengiu label elementą tarp kitų su cursor nurodymu. Tai praneša apie lankytojams, kad laukų pavadinimai yra spustelėjami. Jei jie iš tikrųjų spustelės lauko aprašymą, kursorius automatiškai bus nukreiptas į atitinkamą lauką.

Formos laukai dizainuojami

Kitame etape yra dizainuojami patys formos laukai. Pirmiausia pateikiami bendri input ir textarea nuorodos.

input, textarea {
   color: #3399FF;
   border: 1px solid #3399FF;
   font: 13px Helvetica, Arial, sans-serif;
   padding: 8px 10px;
   width: 190px;
 }

Tai yra išimtinai dizaino klausimai. Ypatingas dėmesys turėtų būti skirtas rėmams. Kai tik į lauką patenka kursorius, rėmo spalva pasikeičia. Tai ne tik estetinis aspektas. Iš tikrųjų tai padeda lankytojams užpildant formą. Taip jie visada matys, kuriame lauke yra kursorius.

Dabar pateikiami keli duomenys apie daugialine teksto įvedimo sritį.

textarea {
   width: 430px;
   overflow: auto;
 }

Šio lauko plotis nustatomas 430 pikselių. Kiek keistas gali atrodyti pirmą kartą pateikta instrukcija overflow: auto daugialinės teksto įvedimo srityse. Šis eilutė yra skirtas senesnėms „Internet Explorer“ versijoms. Iš tikrųjų ši naršyklė daugialinėse teksto įvedimo srityse rodydavo slankųjį jutiklį, net kai to nebuvo būtina. Naudojant overflow: auto galima išspręsti šį dizaino problemą.

Dizainuokite Siųsti mygtuką

Kol kas „Siųsti“ mygtukas atrodo gana prastiškai. Tai greitai pasikeis. Rezultatas atrodys taip:





Mygtukui priskiriamos įvairios savybės.

• Fono spalva

• Šrifto išvaizda

• Rėmas

• Atstumai

Atitinkamasis CSS sintaksė atrodo taip:

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"] nurodymą. Šis selektorius pasiekia įvedimo elementus, kurie turi atributą ir vertę type="submit".