This translation is incomplete. Please help translate this article from English.

Tvoj prvi HTML obrazac

Ovo je uvodni odeljak o HTML obrazcima. Putem jednostavnih obrazaca za kontakt, pregledaćemo sve osnovne radnje potrebne za izradu jednog HTML obrazca. Ovaj članak je sastavljen pod pretpostavkom da vi uopšte niste upoznati sa HTML obrazcima ali da ste upoznati HTML i CSS osnovama.

Pre nego što počnemo

Šta su to HTML Obrasci?

HTML Obrasci (form) predstavljaju jednu od ključnih tačaka koje se odnose na interakciju između korisnika i veb stranice ili aplikacije. Njima se omogućuje korisnicima da postave podatke na web stranici. Uglavnom se podaci šalju na veb server, ali veb stranica može takođe sprečiti korišćenje istih na svoju ruku.

Jedan HTML Obrazac sačinjavaju jedan ili više vidžeta (malih pomoćnih spravica). Ovi vidžeti mogu predstavljati polja za unošenje teksta (jednolinijskih ili višelinijskih), boksove za odabir, dugmiće, boksove za štikliranje ili dugmiće za radio. Najčešće su ovi vidžeti upareni sa oznakom koja opisuje njihovu namenu.

Šta vam je potrebno da bi ste radili sa obrascima?

Nije vam potrebno ništa više od onoga što je potrebno raditi sa HTML: Uređivač za pisanje kodova (Sublime ili Atom predstavljaju dobar izbor) i neki veb pretraživač. Naravno, ako ste se već privikli, možete iskoristiti sve mogućnosti koje pružaju i IDE, kao što su Visual Studio, Eclipse, Aptana, itd., ali to je prepušteno vama da odlučite.

Glavna razlika između HTML obrazaca i normalnih HTML dokumenata se ogleda u tome da, uglavnom, podaci koji se prikupe putem obrazaca se šalju na veb server. U tom slučaju, potrebno je da podesite veb server kako bi on primao i obrađivao podatke. Kako se vrši podešavanje jednog takvog servera je tema koja prevazilazi okvire ovog članka, ali ako bi ste hteli da saznate više, pogledajte članak koji je posvećen ovoj temi: Slanje i povraćaj obrazaca sa podacima.

Osmislite vaš obrazac

Pre nego što krenete sa pisanjem vašeg programskog koda, uvek je dobro da zastanete i izdvojite vreme da razmislite o vašem obrazcu. Izrada brzog nacrta će vam pomoći da definišete pravilno skup podataka koje želite da zatražite od korisnika. Prema mišljenju korisnika, a na osnovu njihovog iskustva UX (User Experience - Iskustvo Korisnika), važno je upamtiti da što je vaš obrazac obimniji, to su veće šanse da izgubite korisnike. Gledajte da vam obrazac bude što jednostavniji i što precizniji: tražite samo one podatke koji su zaista neophodni. Izrada obrazaca je jako bitan korak onda kada vi izrađujete veb stranicu ili aplikaciju. Pokrivanje iskustva korisnika u pogledu obrazaca prevazilazi okvir ovog članka, ali ako želite da dublje proučavate ovu temu onda bi ste trebali da pročitate sledeće ćlanke:

U ovom članku mi ćemo izraditi jednostavni obrazac za kontakt. Hajde da izradimo običnu skicu.

The form to build, roughly sketch

Naš obrazac će imati tri polja za tekstualni unos i jedno dugme. Najčešće, mi tražimo od našeg korisnika da unese svoje ime, svoju e-mail adresu i poruku koju želi da pošalje. Pritiskom na dugme poruka će jednostavno biti poslata na veb server.

Uprljajte ruke HTML-om

U redu, sada smo spremni da se okrenemo HTML-u i da izprogramiramo naš obrazac. Da bi smo izradili naš obrazac za kontakt, upotrebićemo sledeće HTML elemente: <form>, <label>, <input>, <textarea>, i <button>.

The <form> element

All HTML forms start with a <form> element like this:

<form action="/my-handling-form-page" method="post">

</form>

Ovaj elemenat zvanično definiše naš obrazac. Ovo je kontejner u kome su sadržani <div> ili <p> elementi, ali takođe on pruža podršku i za neke posebne atribute koji određuju način kako će se obrazad ponašati.  Svi njegovi atributi se mogu i ne moraju upotrebiti, međutim smatra se najboljom praksom da se uvek u najmanju ruku postavi action atribut  i methodatribut.

  • Action atribut definiše lokaciju (URL) gde će podaci koji budu uneti u obrazac biti poslati.
  • Method atribut definiše kojim će se HTTP metodom podaci poslati (to mogu biti "get" ili "post").

Ako bi ste hteli da dublje proučite kako ovi atributi rade, to je detaljno opisano u članku Slanje i povraćaj podataka iz obrazca.

Dodaj vidžet sa <label>, <input>, i <textarea> elementima

Naš obrazac za kontak je zaista jednostavan i sadrži tri polja za unos teksta, pri čemu svako od njih ima svoju oznaku. Polje za unos imena će biti osnovno jednoredno polje za unos teksta; polje za unos e-mail adrese će biti jednoredno polje za unos teksta i tu će biti moguće isključivo unošenje e-mail adrese; polje za unos poruke će biti osnovno polje za unos teksta sa više redova.

Ako bi smo to predstavili u HTML kodu, dobićemo nešto poput ovoga:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
</form>

<div> elementi su tu da bi se ispoštovala konvencijalna struktura našeg koda i da bi se lakše stilizovali (vidi ispod). Možete primetiti da se atribut for koristi u svim <label> elementima; to je zvanični način da se neka oznaka (label) poveže sa vidžetom. Ovaj atribut upućuje id na odgovarajući bidžet. Radeći tako ostvaruje se neka korist. Najočiglednija je ta da se tako daje mogućnost korisniku da klikom na određenu oznaku aktivira odgovarajući vidžet. Ako bi ste hteli da se bolje upoznate sa drugim koristima ovog atributa, to je detaljnije opisano u članku: Kako da strukturišete neki HTML obrazac.

U pogledu <input> elementa, najvažniji atribut je type atribut. Ovaj atribut je od izuzetne važnosti jer se njime definiše način na koji će se <input> ponašati. Njime se može iz korena izmeniti elemenat, zato obratite pažnju na njega. Ako želite da saznate nešto više o tome, pročitajte članak p vidžetima izvornih obrazaca. U našem primeru mi koristimo vrednost text - koja je podrazumevana vrednost ovog atributa. Ona predstavlja osnovni tekstualni unos u jednolinijskom polju za tekst u koje se može uneti bilo kakav tekst bez kontrole i potvrđivanja. Takođe koristimo i vrednost email kojom se definiše polje za unos jednolinijskog teksta koje jedino prihvata ispravno unešenu e-mail adresu. Ova poslednja vrednost pretvara osnovni tekstualni unos u neku vrstu "inteligentnog" polja, gde će se izvršiti neka vrsta provere onoga što je u njega ukucano od strane korisnika. Ako bi ste hteli da saznate nešto više o potvrđivanju obrazaca, mi će mo to detaljnije opisati u članku o Potvrđivanje podataka u obrascu.

Poslednje ali ne manje bitno, obratite pažnju na sintaksu iz <input /> u odnosu na <textarea></textarea>. Ovo je jedna od neuobičajnosti HTML-a. Tag <input> je jedan samozatvarajući elemenat, koji podrazumeva da ako bi ste želeli da formalno zatvorite elemenat, trebate da dodate jedno "/" na kraju i unutar samog elementa, a ne sa posebnim završnim tagom. Sa druge strane, <textarea> nije samo zatvarajući elemenat, i zato ga treba zatvoriti odgovarajućim završnim tagom. To ima uticaja na jedno specifično svojstvo HTML obrazaca: način na koji definišete podrazumevanu vrednost. Da bi ste definisali podrazumevanu vrednost jednog <input> elementa, morate upotrebiti value atribut kao što je ovaj:

<input type="text" value="by default this element is filled with this text" />

Suprotno tome, ako želite da definišete podrazumevanu vrednost jednog <textarea> elementa, morate to da postavite tu podrazumevanu vrednost između početnog i završnog taga za <textarea> elemenat, kao što je dato u ovom primeru:

<textarea>by default this element is filled with this text</textarea>

Dugme <button> na kraju

Naš obrazac je skoro gotov; mi samo trebamo da dodamo neko dugme (button) kako bi smo omogućili korisnicima da pošalju svoje unose, onda kada popune obrazac. Ovo je rešeno na jednostavan način korišćenjem <button> elementa:

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

Dugme (button) može imati tri vrednosti: submit(pošalji), reset(izbriši), ili button (dugme).

  • Klikom na submit dugme šalju se uneseni podaci u obrascu na veb stranicu što je definisano atributom action u okviru <form> elementa.
  • Klikom na reset dugme istovremeno se resetuje, briše se, celokupni vidžet obrasca na svoju podrazumevanu vrednost. Sa stanovišta UX (iskustva korisnika), ovo se smatra lošom praksom.
  • Klikom na button dugme ne čini... ništa! Ovo zvuči glupo, ali neverovatno korisno kada se prave buttons (dugmad) sa JavaScript-om.

Imajte na umu da takođe možete koristiti <input> elemenat sa odgovarajućim tipom za izradu dugmeta (button). Glavna razlika  <button> elementa se ogleda u tome da <input> elemenat dopušta unošenje isključivo običan tekst kao svoje oznake, dok <button> elemenat dozvoljava pun HTML sadržaj kao svoje oznake.

Hajde da ga ulepšamo uz pomoć CSS-a

Sada kada imamo svoj HTML obrazac, a ko je pregledate u svom omiljenom pretraživaču, videćete da on na neki način izgleda grozno.

Hajde da to ulepšamo uz pomoć CSS stylesheet, koji je dat u nastavku.

Hajde da krenemo od samog obrazca; hajde da ga pozicioniramo u sredini i istaknemo njegove granice:

form {
    /* Just to center the form on the page */
    margin: 0 auto;
    width: 400px;
    /* To see the outline of the form */
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

Zatim, dodaćemo nekog prostora između svakog vidžeta u obrascu:

form div + div {
    margin-top: 1em;
}

Hajde da se sada fokusiramo na oznake. Da napravimo da nam obrazac bude više čitljiv, smatra se najvoljom praksom to da nam sve oznake budu iste veličine i da budu poređane po istoj strani. U tom slučaju, mi ćemo ih poređati po desnoj strani, ali u nekim slučajevima ređanje po levoj strani može biti takođe u redu.

label {
    /* To make sure that all labels have the same size and are properly aligned */
    display: inline-block;
    width: 90px;
    text-align: right;
}

Jedna od najtežih stvari koja se tiče rada na HTML obrascima je stilizovanje samih HTML vidžeta. Lako je stilizovati polja za unos teksta, ali nije lako sitlizovati neke druge vidžete. Ako bi ste hteli da saznate nešto više o stilizovanje vidžeta HTML obrazaca, pročitajte članak o Stilizovanju HTML obrazaca.

Ovde ćemo upotrebiti nekoliko uobičajenih trikova: harmonizovanje slova, veličine i granica (bordura):

input, textarea {
    /* To make sure that all text fields have the same font settings
       By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* To give the same size to all text field */
    width: 300px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /* To harmonize the look & feel of text field border */
    border: 1px solid #999;
}

HTML obrasci podržavaju mnogo pseudo-klase da opišu status svakog elementa. Kao jedan primer, mi ćemo dodati vidžetu da kada je aktivan bude malo naznačen osvetljenjem. To je podesan način da se pomogne korisnicima da znaju na kom mestu u obrascu se nalaze dok ga popunjavaju.

input:focus, textarea:focus {
    /* To give a little highlight on active elements */
    border-color: #000;
}

Polja za unos više-linijskog teksta zahtevaju nekoliko sopstvenih stilskih rešenja. Podrazumevano, neki <textarea> elemenat ima linijski poređanu blokovnu strukturu čije je dno izjednačeno sa osnovnom linijom teksta. Najčešće, to nije ono što bi smo mi hteli. U tom slučaju, da bi se uredno poređale oznake i polja, mi moramo da promenimo vertical-alignvrednost <textarea> ka vrhu (top).

Imajte na umu da je korišćenje resize vrednosti, podesan način da korisnici povećaju <textarea>.

textarea {
    /* To properly align multiline text fields with their labels */
    vertical-align: top;

    /* To give enough room to type some text */
    height: 5em;

    /* To allow users to resize any textarea vertically
       It does not work on all browsers */
    resize: vertical;
}

Mnogo puta, dugmad (buttons) takođe zahtevaju specijalno stilizovanje. Kako bi smo to ostvarili, mi ih postavljamo unutar <div> sa klasom button. Ovde, mi želimo da dugme bude izjednačeno sa ostalim vedžetima. Da bi smo to ostvarili, moramo da oponašamo prisustvo elementa <label>. I to se dobija igranjem sa padingom i marginama.

.button {
    /* To position the buttons to the same position of the text fields */
    padding-left: 90px; /* same size as the label elements */
}
button {
    /* This extra margin represent roughly the same space as the space
       between the labels and their text fields */
    margin-left: .5em;
}

Now our form looks much prettier.

Slanje podataka na vaš veb server

Poslednji deo, a možda i najvarljiviji, se odnosi na rukovanje podacima iz obrasca na strani servera. Kao što smo rekli ranije, najčešće, HTML Obrazac je podesan način da vi od korisnika zatražite podatke i da ih pošaljete na veb server.

<form> elemenat će definisati gde i kako da se pošalju podaci dobiveni zahvaljujući action atributu i method atributu.

Ali to nije dovoljno. Mi takođe moramo dati ime našim podacima. Ova imena su bitna sa obe strane; na strani pretraživača, pretraživaču se govori koje ime da se dodeli svakom delu podataka, dok na strani servera, daje se mogućnost serveru da obradi svaki deo podataka prema njihovom imenu.

Tako, da bi ste dali ime vašim podacima vi morate upotrebiti name atribut za svaki vidžet obrasca putem kojeg će se dobiti poseban deo podataka

<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="user_email" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg" name="user_message"></textarea>
    </div>
    
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

U našem primeru, obrazac će poslati 3 dela podataka, koji su nazvani "user_name"(korisnikovo_ime), "user_email"(korisnikov_email) i "user_message"(korisnikova_poruka). Ovi podaci će biti poslati na URL "/my-handling-form-page" (/moja-stranica-za-obradu-obrazaca) sa HTTP POST metodom

On the server side, the script at the URL "/my-handling-form-page" will receive the data as a list of 3 key/value items embodied in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we will give some examples on the Sending and retrieving form data article.

Na strani servera, skripta koja se nalazi na URL "/my-handling-form-page" će dobiti podatke u vidu liste sa 3 podneska, ključa/vrednosti, koji će biti uključeni u HTML zahtev. Način na koji će ta skripta biti obrađivana zavisi od vas samih. Svaki programski jezik koji koji se nalazi na strani servera (PHP, Python, Ruby, Java, C#, itd.) ima svoje mehanizme. To je nešto što nije predmet ovog uputstva da dublje ulazi u ovu materiju, ali ako vi želite da saznate više, mi ćemo vam dati neke primere u članku koji se odnosi na Slanje i povraćaj obrazaca sa podacima.

Zaključak

Čestitamo! Vi ste upravo napravili svoj prvi HTML obrazac. Ovde je dat konkretan primer konačnog rezultata

Konkretan primer

Sada je vreme da se baci jedan dublji pogled. HTML obrasci su još moćniji nego što smo mogli videti ovde i drugi članci iz ovog upustva će vam pomoći da usavršite ostalo.

Document Tags and Contributors

Contributors to this page: TodorIvanovic, mdnwebdocs-bot, ElTraficante
Last updated by: TodorIvanovic,