Transcript html - Megatrend univerzitet

HTML
FORME
• Svakom sajtu je potrebna povratna informacija od strane
posetilaca tzv. feedback
• Već ste koristili pretraživače, kupovali nešto online,
nailazili na login za pristup određenom delu web sajta
(webmail) ili poslali komentar na nekom forumu i tada ste
mogli da vidite web forme u akciji.
• Svuda gde vam se pojave polja za unos teksta, mogućnost
izbora između ponuđenih opcija, tekstualno polje za unos
većeg teksta uz obavezno dugme za potvrdu (submit) koje
će na kraju unete podatke procesirati dalje (upisom u bazu
ili slanjem maila ka određenom mail serveru), radi se o
formi
<FORM></FORM>
•
komponente ovog elementa mogu biti:
<input type="text" /> - polje za unos manjeg teksta (broj redova = 1)
<textarea></textarea> - polje za unos dužeg teksta (broj redova > 1)
<input type="password" /> - polje sa skrivenim tekstom (zvezdice ili
tačkice)
<input type="checkbox" /> - kvadrat koji može biti čekiran ili prazan
<input type="radio" /> - pravi smisao dobija kad ovih polja ima
nekoliko i tad predstavljaju ponuđene opcije od kojih biramo jednu
<input type="file" /> - upload fajla na server
<FORM></FORM>
•
komponente ovog elementa mogu biti - nastavak:
<input type="image" /> - dozvoljava nam da zamenimo standardno
dugme sa dekorativnijom grafikom button with a more decorative graphic.
<input type="submit" /> -šalje podatke forme na URL definisanu u
action atributu form taga
<input type="button" /> - dugme koje može da pokrene bilo koji proces
(onclick)
<select><option></option></select> - Padajuća lista (drop-down list)
<label>..</label> - su opcioni elementi a njihov atribut for="id_atribut"
se vezuje za еlement koji sadrži ID=" id_atribut ", tj stavlja focus na taj
element klikom na tekst unutar label elementa u browseru
ATRIBUTI FORM TAG-A
• Napomena: Ne sme se nalaziti ugnježdena forma
unutar forme!
• Atribut method može da uzme vrednosti "get" ili
"post" (najčešće post) i objašnjava metod kojim se
šalju parametri ka dinamičkoj strani koja procesira
formu (obrađuje podatke forme)
• U atributu action="" se nalazi URL te strane
• ID atribut generalno u HTML-u ima nekoliko uloga:
•može da bude selektor u CSS-u
• može da kreira anchor point na početku bilo kog taga (uključujući
i <a>).
• da referencira element iz javascript (getElementByID method)
UPOZNAVANJE FORM
KOMPONENTI
• Komponente koje se koriste pri kreiranju formi su:
1. Text box
2. Password box
3. Text area
4. Check box
5. Radio button
6. Menu
7. Button
TEXT BOX/PASSWORD
BOX
<form enctype="text/plain"
action="mailto:[email protected]"
method="post">
User name:
<input type=“text” name=“username” value=""
size=“12” maxlength=“12”><br>
Password:
<input type=“password” name=“userpass” value=""
size=“8” maxlength=“8”>
</form>
TEXTAREA
<form enctype="text/plain"
action="mailto:[email protected]"
method="post">
<textarea name=“comments” rows=“4” cols=“40”
wrap=“”>
Please enter your comments here.
</textarea>
</form>
CHECK BOX
• Yes/no true/false opcija
• <input> tag sa atributima type, name I value
• Tip checkbox
<form enctype="text/plain"
action="mailto:[email protected]
method="post"">
<input type="checkbox" name="emaillist"
checked="">
Check the box to join our e-mail list.
</form>
RADIO BUTTON
<form enctype="text/plain"
action="mailto:[email protected] method="post"">
<input type=“radio" name=“size“ value=“s”>Small
<input type=“radio" name=“size“ value=“m”
checked=“”>Medium
<input type=“radio" name=“size“ value=“l”>Large
<input type=“radio" name=“size“ value=“xl”>Extra
large
</form>
MENI
<form enctype="text/plain"
action="mailto:[email protected] method="post"">
Select a color:
<select name="color">
<option value="red">Fire engine red
<option value="yellow">Canary yellow
<option value="blue">Ocean blue
<option value="green">Forest green
</select>
</form>
DUGMIĆI
<form enctype="text/plain"
action="mailto:[email protected]
method="post"">
<input type="submit" value="Place order">
<input type="reset" value="Start over">
</select>
</form>
FORMA
<form enctype="text/plain"
action="mailto:[email protected]"
method="post">
<p>
What is the nature of your comment?<br>
<input type="radio" name="nature"
value="suggestion">Suggestion
<input type="radio" name="nature"
value="problem">Problem
<input type="radio" name="nature"
value="complaint">Complaint
</p>
<p>
What specifically would you like to
comment on?<br>
<select name="specific">
<option value="website">Web site
<option value="company">Company
<option value="products">Products
<option value="services">Services
<option value="other">Other
</select>
</p>
<p>
Please enter your comments below:<br>
<textarea name="comments" rows="6"
cols="60" wrap="">
<td><input type="text" name="phone"
size="20"></td>
</tr>
<tr>
</textarea>
<td>Fax:</td>
</p>
<td><input type="text" name="fax"
size="20"></td>
<p>
How can we get in touch with you?<br>
<table>
<tr>
<td>Name:</td>
<td><input type="text" name="name"
size="40"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email"
size="40"></td>
</tr>
<tr>
<td>Phone</td>
</tr>
</table>
</p>
<p>
<input type="checkbox" name="asap">
Please contact me as soon as possible
regarding this feedback.
</p>
<p>
<input type="submit" value="Submit
Feedback">
<input type="reset" value="Start Over">
</p>
</form>