HTML обрасци

Предавање 9
 HTML обрасци
• HTML обрасци омогућавају
успостављање дијалога дизајнера са
посетиоцима локације
• Обрасци омогућавају коришшћење
текстуалних поља, поља за потврду,
радио дугмади и падајућих менија
• Под појмом “резултати обрасца” (form
results) подразумевамо одговоре
прикупљене од посетиоца
• За обраду резултата обрасца обично
користимо две врсте скрипта:
– Скрипт на страни клијента (Java Script) који
проверава исправност унетих података (да
ли су попуњена сва тражена поља и да ли
су подаци одговарајућег типа)
– Скрипт на страни сервера обрађује унете
податке или их смешта у одговарајућу
датотеку и шаље даље неком програму за
обраду
 HTML ознаке и атрибути за
креирање образаца
• Почетна и завршна ознака обрасца:
<form> </form>
Пример:
<form name=“PrimerObrasca”
action=“http://www.mojSajt.com/xxx.cgi”
method=“post” title=“naslov”>
Елементи обрасца, дугмад за слање или
поништавање унетих података
</form>
• name (слично важи и за id) – давање
јединственог имена обрасцу преко којег
му се може приступити, нпр. помоћу
Java Script-a.
• Action – URL адреса којој читач шаље
резултате обрасца након притискања
дугмета за потврду. Нпр. Вредност овог
атрибута може бити облика:
mailto: adresa@provajder.net
Уколико желимо да резултате обрасца
шаљемо као електронску поруку
• method – начин на који читач шаље
резултате обрасца на назначену URL
адресу. Може имати вредност: get и
post
• Get: резултати оврасца се додају на
крај URL адресе назначене у атрибуту
action
• Post: читач резултате серверу шаље у
засебној HTML поруци
• Због начина слања резултата обрасца,
метод get има извесна пропусте у
смислу чуванја приватности података
корисника. Web дизајнери га ипак
чешће користе од post метода због тога
што је подржан готово од стране свих
читача.
• Методу get треба користити када
обрада обрасца неким скриптом не
мења податке чуване на серверу (нпр.
Обрасци за претраживање базе
података)
• Уколико обрада резултата обрасца изазива
неке пратеће промене, нпр. Података који се
чувају у бази на серверу, требало би
користити методу post
• Никада не требе користити методу get при
предавању података из образаца који траже
лозинку! У супротном, лозинку корисника
откривамо као део URL-а смештеног на
неколико локација (нпр: читачева датотека
посећених локација и серверова датотека
активности)
• title – текст који желимо да читач
прикаже када посетилац неколкио
секунди задржи показивач миша над
једним местом унутар обрасца
 Креирање једноредног поља за
унос текста
• <input type=“text”>
• Пример
• name, id – користи се за идентификацију
поља ради обраде скриптом
• size – ширина поља (број знакова у
видном пољу)
• maxlength – максималан број знаклова
који посетилац може короистити за унос
• Пример
• value – говори читачу да приликом
цртања обрасца текст који доделмо
овом атрибуту смести у поље за унос
• Пример1, Пример2
• readonly – када је овај атрибут означен,
одговарајуће поље долази у фокус, али
посетилац не може мењати вредност
поља
• Пример
• disabled – поље не долази у фокус и
немогу се мењати вредности. Чак шта
више, серверу се не шаљу назив поља
и његова вредност
• tabindex – задавање редоследа којим
елементи обрасца долазе у фокус када
посетилац притиска табулатор
• accesskey – одређује тастер који
корисник може притискати док држи
тастер alt да би прешао на унос.
• title – наслов поља које посетилац може
да види уколико неколико секунди
задржи миша унутар наведеног поља
 Вишередно поље за унос
текста
• Упарена ознака за креирање
вишередног поља за унос текста
<textarea></textarea>
• Атрибути rows и cols одређују димензије
поља за унос текста
• Пример1
• Пример2
 Дугмад Submit, Reset
Синтакса:
<input type=“Submit” value=“Prosledi”>
<input type=“Reset” value=“Poništi”>
Пример1 , Пример2
Атрибут value одређује текст који читач
исписује на одговарајућој дугмади за
прослеђивање, односно поништавање
унетих података