Формулари

Основни елементи формулара

Основни елементи формулара (2) омогућавају унос текста (у једној линији, у облику лозинке, у више линија), избор различитих опција (које се међусобно искључују или допуњавају) и креирање дугмади којима се могу придружити акције, а потом кликом на дугме и извршити саме акције (слање података власнику презентације, поништавање претходно попуњених података и довођење формулара у почетно стање, као и друге дефинисане акције).

Клијентско и серверско веб-програмирање

Важно је нагласити да се сем слања података попуњеног формулара (в. одељак 1.6) и поништавања претходно унетих података враћањем формулара у почетно стање (в. одељак 1.5), остале акције које се могу придружити обичној дугмади не могу да се дефинишу у оквиру самог HTML-а. При томе, и реакције на слање података попуњеног формулара (на пример, претрага веба када пошаљете упит користећи онлајн-формулар компаније Google, 1) не спадају ни у надлежности, нити у могућности које има HTML, већ се могу реализовати искључиво помоћу програма написаном на погодном програмском језику. Развој (писање, одржавање, унапређивање) програма за обраду података који се шаљу из попуњеног формулара припада подобласти програмирања познатој под називом веб-програмирање.

Програми настали веб-програмирањем се обично деле у две велике групе.

Прву групу чине клијентски програми за веб које извршава веб-читач на рачунару корисника HTML-документа без употребе веб-сервера. Развој таквих програма се назива клијентско веб-програмирање.

Ако пак програм настао веб-програмирањем може да изврши само веб-сервер као одговор на корисников захтев, у питању су серверски програми за веб чији се развој назива серверско веб-програмирање.

Подаци унети у HTML-формулар могу да се обраде и клијентским и серверским веб-програмирањем. Популаран избор програмског језика за клијентско веб-програмирање је ECMAScript 5 (JavaScript 5), док се за серверско веб-програмирање користи више језика (ASP, JSP, PHP, Python, Perl, C++ и др.).

Контроле за унос текста

С обзиром да се начини на које корисник задаје улаз рачунару мењају временом (некада се користила само тастатура, потом се појавио миш, светлосна пера, палице, сада су актуелни екрани и површине које реагују на додир), аутори HTML-а су се одлучили да највећи број елемената формулара (сем пар изузетака) означе истим, празним елементом input, при чему се улога елемента дефинише вредношћу његовог атрибута type. Осим елемента input постоје и други HTML-елементи који се користе за означавање елемената формулара, неки од њих су намењени за унос текста, али о њима касније.

У одељку 1.1 већ смо набројали различите начине уноса текста:

• (једнолинијско) поље за унос обичног текста (у даљем тексту: поље за унос текста),
• (једнолинијско) поље за унос лозинке (у даљем тексту: поље за лозинку) и
• вишелинијско поље за унос текста (у даљем тексту: област за унос текста).

За унос кратких текстуалних података у оквиру једне линије користи се поље за унос обичног текста које се означава елементом input чији атрибут type има вредност text (ово је уједно и подразумевана вредност атрибута type уколико није наведен у оквиру елемента input).

Величина (ширина) поља за унос обичног текста се дефинише као максималан број видљивих карактера у пољу; то значи да у поље може да се унесе и већи број карактера од његове величине, стрелицама улево и удесно се курсор може померати по садржини поља, али истовремено се не може видети већи број карактера од броја који омогућава ширина поља. Подразумевана вредност за величину поља за унос обичног текста је 20 карактера, али се величина поља може променити помоћу атрибута size.

Ако је пак потребно да се ограничи број карактера који корисник уноси у поље, могу се користити атрибути minlength и maxlength чије вредности одређују колико најмање карактера корисник мора да унесе, односно колико највише карактера може да унесе. Ова два атрибута су уско везана за тему валидације формулара о којој ћемо говорити у посебном одељку 1.7.

Празна поља за унос текста нису довољно информативна, поготово ако их има више, па им се обично придружује ознака, тј. текст обележен елементом label. Као што ћемо касније видети, елемент label се користи за придруживање ознака свим елементима формулара, а не само пољима за унос текста. Како би се успоставила чвршћа веза између елемента и његове ознаке, елементу се обично додељује јединствен идентификатор (помоћу атрибута id), а ознака (label) се везује за елемент тако што јој се дода атрибут for чија је вредност иста као и вредност атрибута id одговарајућег елемента. Дакле, ознака се везује за елемент формулара преко идентификатора елемента.

Наредна два примера су заправо две верзије истог формулара, названог студентски формулар зато што садржи три поља за унос текста, тј. унос информација о имену, презимену и броју индекса студента. У оба примера користи се исти елемент, input, за представљање поља, разлике су у примени и вредностима појединих атрибута. У првом примеру поља су реализована на следећи начин:

Студентски формулар (1. верзија)

<h4>Студентски формулар (1. верзија)</h4> <form id='frmTxtv1' class='frmTxt'> <label>Име студента</label> <input type='text' size='20' /><br/> <label>Презиме студента</label> <input type='text' size='20' /><br/> <label>Индекс студента</label> <input type='text' size='20' maxlength='9' placeholder='201100123'/> <br/> <input type='button' value='Тест' /> </form>

У приказу HTML-кода намерно су празном линијом раздвојени елементи формулара како би се лакше уочили, у пракси то није неопходно, али је свакако читљивије и лакше за одржавање. У оквиру CSS-а, који овде нећемо посебно издвајати, поља и њихове ознаке су приказани као линијски блокови што је омогућило да им се подеси иста ширина због лепшег изгледа. Последње поље (број индекса) користи атрибут maxlength да би се спречио унос више од 9 карактера. Међутим, нико не спречава корисника да унесе нешто што уопште нису цифре! Пробајте.

У пољу индекс се примећује још један занимљив атрибут, placeholder. Вредност овог атрибута се приказује у пољу индекс као помоћ, боље речено, наговештај кориснику у ком формату треба да унесе индекс. Међутим, тај текст није садржина поља, корисник не може ни да га обележи, а тиме ни да га копира, обрише итд. Тај помоћни текст ће сам нестати кад корисник почне да попуњава поље и појавиће се поново када корисник обрише свој унос у пољу индекс.

Иако је још рано да упознамо дугмад (в. одељак 1.5), да наредни примери не би били превише досадни, упознаћемо се са два начина да се направе посебна дугмад (енгл. custom buttons) која немају никаквог смисла без употребе JavaScript-а. Први пример користи дугме направљено помоћу елемента input које не реагује на клик корисника:

<input type='button' value='Тест' />

На крају, сви елементи једног формулара обмотавају се елементом form чије етикете означавају почетак и крај формулара. Елемент је приказан као блоковски и његов садржај је центриран (в. CSS). Овим елементом и његовим атрибутима бавићемо се детаљније у одељку 1.6 посвећеном слању података из формулара до веб-сервера.

Друга верзија студентског формулара користи другачије вредности атрибута:

Студентски формулар (2. верзија)

<h4>Студентски формулар (2. верзија)</h4> <form id='frmTxtv2' class='frmTxt'> <label for='txtIme'>Име студента</label> <input type='text' id='txtIme' size='25' maxlength='20' /><br/> <label for='txtPrezime'>Презиме студента</label> <input type='text' id='txtPrezime' size='25' maxlength='20' /><br/> <label for='txtIndeks'>Индекс студента</label> <input type='text' id='txtIndeks' size='25' minlength='9' maxlength='9' placeholder='201100123' /><br/> <button id='btnIspisiStudent' type='button'>Испиши податке</button> <button id='btnBrisiStudent' type='reset'>Обриши податке</button> </form>

У другој верзији студентског формулара сваком елементу формулара додељен је идентификатор (атрибут id) помоћу ког се одговарајућа ознака везује за своје поље (атрибут for). Постојање везе између поља и његове ознаке најбоље може да се види ако кликнете на ознаку поља: у првој верзији студентског формулара клик на ознаку поља нема никакав ефекат на поље (јер није успостављена веза), али у другој верзији формулара клик на ознаку поља аутоматски пребацује курсор у одговарајуће поље, односно, како се то још каже, поље добија фокус. У општем случају за елемент формулара се каже да има фокус ако је изабран преко тастатуре или миша и спреман да прихвати унос корисника са тастатуре (укључујући и резултат команде Paste).

Промењене су вредности атрибута size како би могле да се упореде величине поља у првој и другој верзији формулара.

У пољу индекс је сада примењен и атрибут атрибут minlength у комбинацији са атрибутом maxlength, па сада у поље индекс мора истовремено да се унесе најмање 9 и највише 9 карактера, што фактички значи да мора да се унесе тачно 9 карактера.

Дугмад су реализована на другачији начин. У првој верзији студентског формулара употребљен је елемент input и, пошто је он празан, једини начин да му се додели натпис је да се натпис наведе као вредност атрибута value. У другој верзији студентског формулара примењен је елемент button који није празан и чији садржај може да буде и текст и слика, а тај садржај биће приказан као натпис на дугмету. У овом примеру овде, као садржај је наведен обичан текст, а у CSS-у је употребљен псеудоелемент ::before у комбинацији са CSS-ентитетима (в. 1). За домаћи задатак, покушајте да исти ефекат постигнете без CSS-а навођењем одговарајућег карактерског ентитета директно као садржај дугмета.

У другој верзији студентског формулара дугмад нешто раде. Када се формулар попуни подацима и притисне дугме Испиши податке, на екрану ће се појавити мали дијалог са поруком да Студент тај и тај има број индекса тај и тај. (3).

Поље за унос лозинке је по готово свим особинама истоветно са пољем за унос обичног текста; једина разлика је што се приликом попуњавања поља за лозинку не приказује текст који се уноси већ се замењује истоветним карактерима (звездицама, тачкама, зависно од веб-читача). Да би се постигао овај ефекат, потребно је променити вредност атрибута type у password:

Оба поља за унос текста (обичног и лозинке) имају атрибут value који ћемо срести и код осталих елемената формулара. Вредност тог атрибута увек је једнака ономе што је корисник унео, а сам аутор презентације може унапред доделити ту вредност која ће бити подразумевана вредност поља, видљива на екрану док корисник не унесе нешто друго.

То што поље за лозинку не приказује конкретан текст је заштита само у случају ако неко гледа преко нашег рамена. Међутим, кад је у питању слање података из формулара преко интернета, праве заштите нема ако се користи протокол HTTP јер се у том случају текст шаље као обичан текст који може да прочита свако ко прислушкује комуникациони канал. Права заштита се постиже тек уз помоћ протокола HTTPS и одговарајућих дигиталних сертификата.

На крају остаје да видимо како изгледа вишелинијско поље за унос текста, односно област за унос текста. Област за унос текста се најчешће среће када користите е-пошту на вебу (gmail, yahoo mail и слично), тј. када пожелите да напишете своју поруку, односно када на неком форуму хоћете да оставите коментар. Ово је пример елемента формулара који се не представља HTML-елементом input, већ посебним HTML-елементом који се зове textarea. Елемент textarea није празан за разлику од елемента input и његов садржај може бити текст који ће се приказати као подразумевани садржај пре него што корисник нешто унесе. Атрибутима елемента textarea, rows и cols се задаје колико ће редова (линија) и колона (број карактера у једној линији) имати одговарајућа област за унос текста. Следе два примера истоветних области за унос текста, у првом је попуњено само првих 5 линија, а у другом 6. Сада се види да се са десне стране заправо чува место за клизач (енгл. scroll bar) и да се не може унети више карактера у линији од задатог броја колона иако делује да има места за још.

Симбол у доњем десном углу области за унос текста сугерише да се њихове димензије могу мењати ако се тај симбол помера помоћу миша. Ако не желите да дозволите промену броја редова и колона области за унос текста, употребите CSS-својство resize (resize: none;) са одговарајућим селектором. Пробајте то за домаћи задатак.

Избор између понуђених опција

У папирним обрасцима и онлајн-формуларима често се појављују питања са унапред понуђеним одговорима, при чему се од корисника очекује да изабере тачно једну могућност (ако се понуђени одговори међусобно искључују) или пак корисник може да изабере више могућности (ако су понуђени одговори међусобно независни). HTML-формулари нуде три различита елемента формулара за избор између више могућности:

• радио-дугмад (енгл. radio buttons); у оквиру једне групе радио-дугмади може се изабрати највише једно дугме (могућност, опција) јер се могућности међусобно искључују;
• поља за потврду (енгл. checkboxes); међусобно независне могућности:
• меније или падајуће листе (енгл. menu, drop-down list); могу се подесити да нуде избор само једне опције или пак избор више опција.

Радио-дугмад и поља за потврду се користе када је понуђен релативно мали број могућности (на пример, 2–7) или када аутор презентације жели да подједнакo истакне све понуђене могућности. С друге стране, менији или падајуће листе се користе када је кориснику понуђен релативно већи број могућности (на пример, 8 и више), односно када аутор презентације не жели да понуђене могућности заузимају превише места, привлаче пажњу или када је аутор већ изабрао неку опцију као подразумевану и не жели да охрабри корисника да је промени. (Umang Mehta)

У следећем примеру дате су три верзије мини-формулара који користи два радио-дугмета (<input type='radio' />) и једно дугме за поништавање уноса (<input type='reset' />), а омогућава кориснику да унесе свој пол и статус. У првом примеру је формулару додат наслов изнад (h4) и све то је спаковано у елемент div са идентификатором dpol. У преостале две верзије формулара употребљен је елемент fieldset чији назив (буквалан превод: скуп поља) сугерише да се овај елемент користи у оквиру формулара за груписање елемената формулара (поља) по неком критеријуму (конкретно, овде су груписана радио-дугмад која представљају одговор на исто питање о полу, односно о статусу студента). Елемент fieldset се приказује са оквиром на чијем врху се може убацити ознака помоћу елемента legend.

Дугме Поништи унос је додато да бисте могли лакше да експериментишете са избором опција.

Тестирањем три понуђена мини-формулара за избор пола и статуса студента и увидом у одговарајући HTML-одломак можемо да закључимо следеће:

1. У првој верзији мини-формулара радио-дугмад не раде, тј. можемо изабрати свако појединачно дугме, чак и када представљају одговор на исто питање (корисник може унети да је и мушког и женског пола, односно да је и редован и самофинансирајући студент). Закључак: није довољно само направити радио-дугмад, потребно је нешто да их повеже како би представљала међусобно зависне могућности од којих се може изабрати само једна.
2. У другој и трећој верзији мини-формулара радио-дугмад раде захваљујући атрибуту name који даје име групи којој радио-дугме припада и омогућава да се елементи са истим именом групе третирају као међусобно зависне могућности од којих се може изабрати само једна.
3. Примећујемо да у првој и другој верзији мини-формулара ниједно радио-дугме није унапред изабрано, док у трећој верзији јесте (женски пол, односно редован статус) захваљујући атрибуту checked. Атрибут checked одступа од уобичајеног записа атрибута (име атрибута = вредност атрибута), већ се наводи само његово име. У том смислу није изузетак, већ и други атрибути који се појављују у различитим елементима формулара и имају само две могуће логичке вредности (јесте/није, тачно/нетачно), попут атрибута selected, readonly, multiple, могу да се користе само навођењем имена. При томе, навођење имена подразумева да је тачно оно што се тврди у називу атрибута (изабран, само за читање, дозвољено више вредности). Набројани атрибути се још називају логички или буловски атрибути.
4. Трећа верзија мини-формулара је специфична у односу на претходне две верзије и по томе што су ознаке радио-дугмади (label) везане за одговарајуће радио-дугме. Последица везе је лакши избор жељене опције. Наиме, у првој и другој верзији мини-формулара морате да нанишаните и кликнете баш на радио-дугме да бисте га изабрали, док у трећој верзији можете постићи исти ефекат много лакше јер је довољан и клик било где на ознаку радио-дугмета.

Поља за потврду се користе за представљање међусобно независних могућности, тако да корисник може да их изабере поједничано, више њих, све или ниједну. HTML-елементи за ова поља и ознаке су исти као и пре (input и label), атрибути checked и type се користе на исти начин као и код радио-дугмади, једина разлика је што се уместо type='radio' примењује type='checkbox'. Следи пример са лажним формуларом за задржавање предиспитних и испитних обавеза који користи управо поља за потврду. Ознаке поља (label) су такође везане за поља помоћу атрибута for и id (идентификатор елемента input) како би се лакше мењало стање поља, тј. и овде клик на ознаку поља има исти ефекат као и клик на само поље).

Лажни формулар за задржавање предиспитних и испитних обавеза

Мени или падајућа листа је замена за радио-дугмад и поља за потврду у случају да је број опција већи (десетак и више), односно ако аутор или жели да уштеди простор за приказ или не жели да скреће кориснику претерану пажњу на опције. Појављивање речи листа у називу ове контроле формулара није случајно: структура HTML-елемената који се користе за његов приказ је фактички иста као код неуређених и уређених листа; једина разлика је у називима HTML-елемената који се при томе користе. Уместо елемената ul и ol чије су почетне и завршне етикете означавале почетак и крај (не)нумерисане листе, користи се елемент select код падајуће листе; уместо елемента li који се користио за означавање елемента листе, елемент option означава опцију, тј. елемент падајуће листе. Међутим, падајућа листа има и додатни елемент, optgroup, који омогућава груписање могућности по неком критеријуму. Елемент optgroup се понаша као подлиста (састоји се од елемената типа option) и може имати посебну ознаку (вредност HTML-атрибута label елемента optgroup кога не треба мешати са истоименим HTML-елементом). Међутим, приликом бирања опција, корисник не може кликом на ознаку групе опција изабрати све опције те групе (ознака не подлеже избору).

У примеру који следи наведене су две падајуће листе. Прва падајућа листа описује катедре факултета и њихове студијске профиле. Поједине катедре не садрже посебне студијске профиле, па су представљене елементом option. Катедре које садрже посебне студијске профиле су представљене елементом optgroup, а појединачни студијски профили елементима option у оквиру одговарајућег елемента optgroup. У падајућој листи катедри могуће је изабрати само једну једну једину могућност: катедру без студијских профила или неки студијски профил.

Друга падајућа листа користи атрибут multiple који омогућава да се истовремено изабере више опција користећи комбинацију тастера CTRL и клика мишем (избор више појединачних опција које нису једна до друге; понављање комбинације CTRL и клика на претходно изабрану опцију поништава њен избор), односно тастера SHIFT и клика мишем (избор свих суседних опција које се налазе између претходно обележене опције и опције на коју је корисник кликнуо док је држао SHIFT). Атрибут multiple утиче и на приказ падајуће листе, па се уместо само једне могућности, истовремено приказије више њих (подразумевано 4). Атрибутом size може се подешавати број истовремено приказаних опција без обзира да ли се користи атрибут multiple или не (пробајте!).

Као што радио-дугмад и поља за потврду користе атрибут checked како би се унапред изабрала нека од понуђених могућности, тако и елемент option користи атрибут selected да би одговарајућа опција менија била унапред изабрана. У првој падајућој листи унапред је изабрана катедра Библиотекарство и информатика, док је у другој падајућој листи унапред изабран предмет Дигитални текст 2.

Дугмад

У претходним примерима (студентски формулар и мини-формулар) имали смо прилике да упознамо неке врсте дугмади, пре свега обичну дугмад и дугмад за поништавање садржине унете у формулар (тј. довођење формулара у почетно стање). Постоји и трећи тип дугмета који се користи за слање података попуњеног формулара на обраду.

У одељку 1.6 бавићемо се детаљније форматом у ком се подаци шаљу, као и њиховим одредиштем и обрадом. У овом одељку само дајемо преглед како исти тип дугмета може да се направи на два различита начина: помоћу елемента input и помоћу елемента button (1).

Елементи input и button користе исти атрибут (type) и исте вредности атрибута (button, reset, submit) како би дефинисали дугме одређеног типа. Оно по чему се разликују је то што је елемент input празан и користи атрибут value за ознаку дугмета, док, с друге стране, елемент button има садржину која се приказује као ознака дугмета и може представљати било какву комбинацију текста и слика (в. студентске формуларе 1 и 2 у одељку 1.3).

Слање података из формулара. Атрибути name и value. Атрибути, method и action (form). CGI, GET, POST

Предуслов за слање података из попуњеног формулара јесте именовање елемената (контрола) формулара које корисник попуњава како би приликом обраде могло недвосмислено да се утврди шта који податак представља, односно, на које питање постављено у формулару се односи попуњени одговор. Овде бисмо очекивали да свака контрола формулара има јединствено име и да се у ту сврху користи глобални атрибут id који се иначе и користи у сврху идентификације HTML-елемената. Међутим, уместо њега користи се атрибут name који на први поглед делује сувишан јер имамо два различита атрибута који фактички имају исту улогу: идентификацију контрола формулара. У већини случајева то и јесте тако, међутим, постоји један важан изузетак: радио-дугмад.

Радио-дугмад смо детаљно обрадили у одељку 1.4 и том приликом смо видели да радио-дугмад која нуде различите (међусобно искључиве) одговоре на исто питање морају имати исто име, тј. исту вредност атрибута name, што за последицу има да се од тих исто именованих радио-дугмади може изабрати само једно и ознака изабраног дугмета је једини одговор на постављено питање. Атрибут id никада не бисмо могли да употребимо на овај начин зато што два различита радио-дугмета представљају два различита HTML-елемента и самим тим не могу имати исти идентификатор. Атрибут name у случају радио-дугмади са истим именом заправо идентификује групу радио-дугмади која одговара једном постављеном питању, а не појединачно радио-дугме. При томе, свако од радио-дугмади са истим именом може и мора имати различиту вредност идентификатора, односно атрибута id.

Приликом попуњавања формулара, свака контрола добија одређену вредност која је садржина атрибута value. У случају поља за унос текста, текст који је корисник унео у поље је уједно и вредност атрибута value и вредност одговарајуће контроле формулара.

Код контрола формулара које не нуде унос садржине, већ избор једне или више могућности (радио-дугмад, поља за потврду, менији или падајуће листе), атрибут value се придружује свакој појединачној могућности коју корисник може да изабере као одговор (сваком појединачном радио-дугмету, сваком појединачном пољу за потврду и свакој појединачној опцији падајуће листе). Тако на крају вредност контроле за избор постаје вредност оног атрибута value чију је могућност корисник одабрао.

Код појединих контрола, попут обичне дугмади, вредност контроле није битна, па се и атрибут value употребљава у друге сврхе (приказ ознаке дугмета у случају елемента input).

Размотримо један конкретан пример. На адреси можете погледати пример једног формулара који има 7 елемената (контрола):

• Прва четири елемента формулара су радио-дугмад са заједничким именом (name='brojDana') и различитим вредностима атрибута value које представљају све могуће вредности за укупан број дана у неком месецу (28–31);
• Пети елемент формулара је падајућа листа (мени) са називима дана у недељи (Понедељак–Недеља) и својим именом (name='prviDan'). Свакој појединачној опцији придружен је атрибут value са вредношћу која представља редни број дана у недељи (1–7), тј. вредност за Понедељак је 1, за Недељу је 7 и слично за остале дане.
• Шести и седми елемент формулара су два дугмета (button), једно за слање попуњених података (Генериши, type='submit'), а друго за поништавање уноса (Поништи, type='reset').

Ако попуните формулар и активирате дугме Генериши, отвориће се нови HTML-документ који садржи месечни календар, при чему приказани месец има онолико дана колико сте изабрали, а први датум у месецу се пада у дан који сте такође претходно изабрали (4).

Шта се овде заправо догађа у тренутку када се активира дугме за слање података? Прва ствар по активирању дугмета за слање података јесте тзв. валидација формулара, односно провера да ли је формулар правилно попуњен. Валидација формулара није обавезна и од аутора формулара зависи хоће ли је бити. О детаљима валидације више ће бити речи у одељку 1.7.

Уколико формулар нема валидацију или је она успешно обављена (све је попуњено по захтевима аутора), у следећем кораку формира се једна ниска која садржи имена свих контрола формулара и њихове вредности. Формат ниске је:

име1=вредност1&име2=вредност2&име3=вредност3…

где су име1, име2, име3… имена контрола формулара (вредности атрибута name), док су вредност1, вредност2, вредност3… придружене вредности одговарајућег атрибута value. Симбол = раздваја вредност атрибута name од одговарајуће вредности атрибута value, док се & користи за раздвајање контрола, односно парова name=value појединачних контрола.

Конкретно, ако корисник изабере месец који има 31 дан и у ком се први дан у месецу пада у петак, тада је фактички изабрао радио дугме

<input type='radio' name='brojDana' id='rbbd31' value='31' />

и опцију падајуће листе

<select name='prviDan' id='selPrviDan' required>
…
<option value='5'>Петак</option>

па се на основу корисниковог избора формира следећа ниска имена и вредности изабраних контрола формулара:

brojDana=31&prviDan=5

Како бисмо разумели шта се даље дешава, време је да детаљније опишемо и сам елемент form. Погледајмо како тај елемент изгледа у овом конкретном примеру:

<form method='get' action='genkalendar.php'>

Поред тога што представља омотач за своје контроле, овај елемент има неколико важних атрибута, од којих ћемо споменути само два:

• атрибут action и
• атрибут method.

Атрибут action садржи адресу, апсолутну (URL) или релативну, на коју се шаљу подаци из формулара. У овом конкретном примеру наведена је релативна адреса програма написаног на језику PHP (о томе сугерише и тип датотеке .php). Програм genkalendar.php је написан тако да поседује све информације о формулару, укључујући имена контрола и њихове могуће вредности, тако да на основу дозвољених вредности може да генерише одговарајући месечни календар у облику HTML-табеле.

Подаци из формулара се не шаљу директно програму, већ веб-серверу. Наиме, све време се одвија комуникација клијента (веб-читача) и (веб-)сервера који одговара на захтеве клијента: у првом кораку захтев је URL формулара који корисник жели да погледа и евентуално попуни, у другом кораку захтев је URL програма који треба да обради податке из попуњеног формулара (5). Пошто је у питању сервис www (веб), зависно од сигурносних механизама који се користе за слање података, захтев се шаље у складу са прописима протокола HTTP (без заштите), односно HTTPS (подаци се кодирају пре слања, системом асиметричног шифрирања, односно користећи јавни кључ примаоца поруке).

Атрибут method се односи на метод који ће веб-сервер применити да би доставио податке на адресу где треба да се обраде, тј. најчешће на адресу неког програма. С обзиром да ћете о програмирању детаљније учити тек у наредним курсевима, не вреди се детаљније упуштати у тему на које све начине програм може да прихвати податке, можемо само да их набројимо:

• преко командне линије,
• преко стандардног улаза или
• из датотеке на некој спољашњој меморији.

Правила комуникације између веб-сервера и програма за обраду формулара описана су спецификацијом која је позната под енглеским акронимом CGI (енгл. Common Gateway Interface). Буквални превод би био интерфејс (сучеље) заједничке капије, али овај термин нећемо преводити, користићемо само акроним, а једино је битно да разумемо чему служи. Спецификација CGI прописује да веб-сервер може користити само прва два начина за слање података програму (командну линију и стандардни улаз). Вредности атрибута method одређују који ће се метод применити:

• вредност get се користи за слање података преко командне линије,
• вредност post се користи за слање података преко стандардног улаза.

Ови технички нису толико битни колико су битне последице употребе метода get или post.

Ако у нашем конкретном примеру, који користи get, пажљиво погледате адресну линију пошто активирате дугме за слање, односно пошто се у веб-читачу појави генерисани месечни календар, видећете следеће (под условом да сте одабрали 31 дан и Петак као први дан у месецу):

http://informatika.fil.bg.ac.rs/misko/flf/iw/form/genkalendar.php?brojDana=31&prviDan=5

Дакле, прва ствар коју примећујемо код захтева који користи метод get јесте да је он заправо комбинација адресе програма који треба да обради податке и самих података, при чему су те две целине раздвојене упитником. Захтев који користи метод post у видљивој адреси садржи само адресу програма. Одатле закључујемо следеће:

1. Метод get није поуздан за слање осетљивих информација јер их свако може видети. Метод post је поузданији, али само ако се користи кодирање података (протокол HTTPS и асиметрично шифрирање помоћу јавног кључа).
2. Метод get, пошто шаље податке као део URL-а, има ограничење на број карактера који може да пошаље (јер је дужина URL-а ограничена на одређен број карактера). С друге стране, пошто post користи стандардни улаз, тим методом се може послати теоретски неограничен по дужини низ карактера.

Дакле, метод post има својих предности, док је get погоднији за разумевање и тестирање формулара и програма за обраду.

На крају, када подаци коначно стигну до програма за обраду, ако су исправни, тј. уколико задовољавају одређене услове (на пример, у конкретном примеру број дана у месецу не може бити ни мањи од 28 ни већи од 31, редни број дана у недељи мора бити у опсегу 1–7), програм обрађује податке и генерише HTML-документ. Генерисање се заправо своди на то да програм на стандардни излаз исписује HTML-кôд, при чему је један део тог текста унапред познат и написао га је програмер док је куцао програм, а остатак је последица интеракције наредби програма и унетих података. Конкретно, у овом примеру, када погледате како на крају изгледа генерисани месечни календар, највећи тог документа (заглавље, унутрашњи CSS, костур документа) откуцао је аутор програма у самом програму, док је табела којом је представљен календар последица унетих података и наредби које процењују колико у првом и последњем реду треба написати празних ћелија табеле, а како попуњавати ћелије са датумима. С обзиром да је веб-сервер позвао програм да се изврши са подацима које му је проследио, излаз програма се враћа веб-серверу, а онда га он као HTML-документ прослеђује веб-читачу који је послао податке из формулара (6).

Поред наведеног примера, можете погледати још два формулара, формулар за генерисање листа и формулар за генерисање табела како бисте видели како се шаљу подаци у случају неких других контрола формулара које ће бити споменуте у одељку 1.7.

Још једну ствар треба споменути кад је у питању формат података који се шаљу. Наиме, пошто подаци могу бити послати као део URL-а (методом get), а спецификација URL-а прописује да поједини карактери не смеју да се појаве у оквиру URL-а, то се пре слања подаци кодирају на специфичан начин и добија се тзв. URL-кодирана ниска (енгл. URL encoded string). Поменуто кодирање је врло једноставно и нема никакву функцију у заштити података. Можете и сами тестирати како поменуто кодирање ради тако што употребите Notepad++ да откуцате неки кратак текст који садржи симболе интерпункције и потом на обележени текст примените опцију менија TextFX - TextFX Convert - Encode URI Component. На пример, текст радио дугме (без наводника) после URL-кодирања изгледа овако:

%D1%80%D0%B0%D0%B4%D0%B8%D0%BE%20%D0%B4%D1%83%D0%B3%D0%BC%D0%B5

Овакве ниске сте имали прилике да срећете кад сте копирали линкове са српске верзије Википедије. Оно што се може уочити је да је појединачни карактер ниске радио дугме замењен симболом за проценат (%) и хексадекадном кодном позицијом тог карактера у репертоару Unicode-а (на пример, %20 се увек среће у адресама које садрже размак, пошто је кодна позиција размака 20₁₆ = 32).

Валидација формулара

Ако поново размотрите формулар за генерисање месечног календара (одељак 1.6) и покушате да активирате дугме Генериши, а пре тога не покушате да промените изабрано радио дугме, односно опцију падајуће листе, видећете да се подаци неће послати јер нисте изабрали ниједну валидну опцију падајуће листе (дан у седмици, Понедељак–Недеља). Штавише, појавиће се и порука на енглеском која тражи од корисника да изабер опцију менија (7), сама падајућа листе је уоквирена црвеном бојом како би се нагласило да тај елеменат формулара мора да се попуни.

Шта се заправо догађа? Наиме, прва опција падајуће листе изгледа овако:

<option value='' disabled selected>Изаберите први дан у месецу</option>

и пошто има логички атрибут disabled, сам корисник је не може изабрати (покушајте!), тј. опција је онеспособљена. Међутим, њен атрибут selected омогућава веб-читачу да је унапред изабере, па се поставља питање шта је њена улога. Улога те лажне опције је да пошаље кориснику шта се бира у менију (приметите да мени нема ознаку у облику елемента label), а истовремено обезбеђује да ниједна права опција не буде унапред изабрана. Нико не каже да је ово морало овако да се направи. Можете да избаците ову опцију, али онда морате менију придружити ознаку (label) како би корисник знао чему падајућа листа служи. Пошто је ова опција онеспособљена, природно је њен атрибут value постављен на празну вредност.

Дакле, у менију заиста ниједна права опција није изабрана. Међутим, често имате прилику да видите формуларе где су нека поља обавезна и морају се попунити, а нека и не морају. Како валидација зна која поља да провери?

Одговор се намеће ако погледамо како изгледа отворена етикета елемента падајуће листе:

<select name='prviDan' id='selPrviDan' required>

Логички атрибут required је прогласио падајућу листу за елемент формулара који мора да се попуни и који се приликом валидације обавезно проверава. Он је сувишан и зато га и нема у случају радио-дугмади истог формулара јер је унапред изабрано једно радио-дугме из групе; у случају да нема атрибута checked ни код једног радио-дугмета, а захтева се од корисника да обавезно изабере једно, атрибут required би требало да се употреби код сваког дугмета групе (мада је довољно код једног) и то је очигледно погрешан приступ (препоручује се да се увек унапред изабере једно радио-дугме групе).

Важно је напоменути да валидација формулара, поред провере да ли је корисник попунио одговор у одређеном елементу формулара, обухвата и проверу исправности формата у ком су поједини подаци унети (на пример, имејл-адресе, URL, бројеви телефона, поштански кодови, бројеви индекса, јединствени матични број грађанина или ЈМБГ, порески идентификациони број или ПИБ, тачни називи факултета у оквиру Универзитета у Београду и слично). Тренутни степен развоја вештачке интелигенције још увек није достигао степен развоја на коме валидација формулара може да препозна лажно име и презиме, адресу, датум рођења и слично, али грешке у форматирању податка може.

Посебан изазов за валидацију представљају поља за унос текста када аутор жели да спречи корисника да (случајно или намерно) унесе податке у погрешном формату. У ту сврху је HTML 5 увео низ нових вредности за атрибут type елемента input од којих су тек неки прихваћени од водећих веб-читача (number, color, date и други). Неке од њих можете погледати у примерима формулара за генерисање листа и табела, споменутих на крају одељка 1.6.

Колико год се проширивали вредности атрибута type елемента input, тј. провере различитих формата и типова поља за унос текста, пракса је показала да се увек појаве нови формати који можда нису потребни баш свима, али су ипак потребни одређеној групи корисника. У ту сврху елемент input располаже додатним атрибутом pattern за валидацију поља за унос текста. Моћ атрибута pattern да препозна да ли је унос текста валидан у односу на задати формат потиче од тога што се његова вредност третира као регуларни израз (енгл. regular expression), специфична текстуална формула којом могу да се опишу одређени скупови ниски, не сви, али сви коначни и неки бесконачни скупови ниски. Нажалост, овде немамо времена да се детаљније посветимо регуларним изразима, али са њима ћете се врло брзо сусрести у курсевима на III и IV години, па се препоручује онима које ова тема занима, да се врате валидацији помоћу атрибута pattern када овладају синтаксом и значењем регуларних израза. У међувремену погледаћемо један једноставан пример.

Претпоставимо да се од студента тражи да унесе свој број индекса у формату година уписа / редни број приликом уписа, при чему се не користе размаци, година има тачно четири цифре, а редни број приликом уписа тачно шест цифара, при чему на почетку редног броја могу бити и нуле (на пример, 2018/000123). Валидација помоћу регуларних израза не може да спречи корисника да унесе туђи број индекса, али може да га спречи да уместо наведеног примера (2018/000123) унесе индекс у недозвољеним форматима типа 123/2018, 2018/123 или 2018/00123.

Наведени формулар користи следећи HTML-кôд:

<form id='frmValidacija'> <label for='indeks'>Индекс</label> <input type='text' name='indeks' id='indeks' placeholder='2018/000123' required pattern='\d{4}/\d{6}' /> <input type='submit' value='Потврди унос' /> <input type='reset' value='Поништи унос' /> </form>

Клик на дугме Потврди унос покренуће валидацију поља за унос:

1. Атрибут required омогућава проверу да ли је поље празно или не.
2. Атрибут pattern омогућава проверу формата поља сваки пут када корисник унесе било који појединачни карактер у поље Индекс и информише корисника поруком сваки пут ако дотадашњи унос не задовољава тражени формат. У овом случају формат индекса је описан регуларним изразом \d{4}/\d{6} са следећим значењем:
   • \d је регуларни израз којим се означава произвољна арапска цифра (0–9);
   • број у витичастим заградама ({4}, односно {6}) се користи као пратилац регуларног израза са своје леве стране и означава колико пута се понавља тип текста описан регуларним изразом који се налази са његове леве стране; у конкретном примеру \d{4} означава низ од четири цифре при чему се не понавља конкретна цифра, већ цифра као тип; у том смислу \d{4} може да означи било који четвороцифрени број (0011, 1234, 2018 итд.); слично, \d{6} означава било који низ састављен од шест цифара, дакле, шестоцифрен број;
   • најједноставнији је симбол / који представља самог себе, тј. обичну косу црту (енгл. slash).
   Дакле, прихватиће се сваки унос корисника који је облика четвороцифрени број за којим следи коса црта за којом следи шестоцифрени број.
3. Пример шта се очекује од корисника наведен је као вредност атрибута placeholder и приказује се у пољу када је поље празно (у смислу да корисник ништа није унео у поље или је обрисао његов садржај).

На крају, зашто се уопште ради валидација? Чињеница је да се у неком тренутку морају проверити подаци из формулара, најкасније у самом програму који треба да их обради. Међутим, ако погледамо пут који подаци треба да пређу да би стигли од веб-читача у коме се попуњава формулар до програма који може бити на прекоокеанском рачунару (5 и 6), јасно је да треба спречити непотребно губљење времена само да би се добила порука од веб-сервера да су подаци неисправни и да податке треба проверити што раније, у самом веб-читачу корисника. Некад је за валидацију формулара био задужен JavaScript, тек је HTML 5 омогућио самосталну проверу валидности без употребе JavaScript-а (што не значи да се он у неким случајевима још увек не може избећи). Пример где се JavaScript још увек користи приликом валидације је превођење са енглеског поруке да се неки елемент формулара мора попунити (7).

Селектор присуства атрибута

Ако је потребно обележити елементе који имају одређени атрибут, довољно је назив атрибута навести између средњих заграда.

Пример: input[required] бира све елементе input који имају атрибут required, дакле, све контроле формулара које се обавезно морају попунити.

Селектор на основу задате тачне вредности атрибута [=]

Ако је потребно обележити елементе чији задати атрибут има тачно одређену вредност, довољно је између средњих заграда навести назив атрибута, знак једнакости и вредност атрибута под знацима навода (апострофи или наводници).

Пример: input[type='radio'] бира сву радио-дугмад у документу.

Селектор на основу задатог префикса вредности атрибута [^=]

Ако је потребно обележити елементе са одређеним атрибутом чија вредност почиње задатим префиксом, довољно је навести између средњих заграда назив атрибута, симболе капица и знак једнакости (^=) и вредност префикса под знацима навода (апострофи или наводници).

Пример: a[href^='http://'] бира све линкове који не користе релативно адресирање већ комплетан URL.

Селектор на основу задатог суфикса вредности атрибута [$=]

Ако је потребно обележити елементе са одређеним атрибутом чија вредност почиње задатим суфиксом, довољно је навести између средњих заграда назив атрибута, знак за долар и знак једнакости (^=) и вредност суфикса под знацима навода (апострофи или наводници).

Пример: у наредној листи пушкица селекторa[href$='.pdf']::after бира све линкове који воде ка документу у формату PDF и на крају садржине одговарајућег елемента a додајe иконицу тог формата користећи псеудоелемент ::after (в. 2, прво правило).

Puškice

1. Chris Hanscom: Quick Reference Guide: Cascading Style Sheets (CSS 3) (CSS puškice za pismeni). South Carolina : Veign, 2009.
2. Chris Hanscom: Quick Reference Guide: HTML 5 - (ovaj podsetnik nije dozvoljen na ispitu!). South Carolina : Veign, 2009.
3. Eric Gomez: The Flexbox One Page Cheat Sheet (CSS Flexbox puškice za pismeni, lokalna PDF verzija)

Селектори на основу задате подниске вредности атрибута

Ако је потребно обележити елементе са атрибутом чија вредност садржи неки текст, може се користити неколико атрибутских селектора: [*=], [~=] и [|=]. Први, тј. [*=], је најопштији, други, [~=], захтева да тражени текст буде размаком одвојен од остатка вредности атрибута, док трећи, [|=], захтева да тражени текст буде одвојен цртицом од остатка вредности атрибута.

Пример: CSS нажалост не нуди могућност да нека CSS-класа наследи подешавања неке друге CSS-класе и да се на тај начин успостави нека хијерархија CSS-класа која би смањила понављање правила. Атрибутски селектори [^=], [$=], [*=], [~=] и [|=] омогућавају да се то заобиђе уз мали трик: потребно је именовати класе тако да имају неки заједнички део имена, па се бирањем елемената чији атрибут class садржи тај заједнички део имена могу одједном форматирати сви елементи иако припадају различитим класама. У пракси се обично користи цртица за раздвајање у таквим именима класа (на пример WordPress користи класе .menu-item-type-taxonomy, .menu-item-type-post_type, .menu-item-type-custom и слично).

Псеудокласе :checked, :required, :optional, :valid, :invalid

Атрибутски селектори су корисни за препознавање елемената формулара на основу њихових почетних подешавања задатих атрибутима. Међутим, потребан је додатни механизам за препознавање елемената формулара на основу њиховог тренутног стања које се мења док корисник попуњава формулар.

Једна од грешака коју почетници често праве је тумачење значења атрибутског селектора input[type='radio'][checked]. Овај селектор илуструје чињеницу да се атрибутски селектори могу комбиновати. Међутим, шта он заправо значи? Први део значи да је у питању радио-дугме input[type='radio'], док други део почетнику може погрешно да сугерише да је у питању радио-дугме које је корисник изабрао. Међутим, [checked] заправо означава радио-дугме са атрибутом checked, тј. радио-дугме које ће приликом приказа HTML-документа бити унапред изабрано. Ако у следећем кораку корисник изабере неко друго радио-дугме (које нема атрибут checked), то друго радио-дугме ће представљати тренутни одговор корисника и неће бити изабрано од стране селектора input[type='radio'][checked].

Псеудокласа :checked је управо уведена да би CSS-селектором могло да се форматира радио-дугме или поље за потврду које је корисник одабрао, односно чекирао. Уместо погрешно интерпретираног атрибутског селектора input[type='radio'][checked], право решење је селектор input[type='radio']:checked, примењено у примеру формулара са питањем: Који глумац је био најбољи као детектив Филип Марлоу?

Дати формулар се састоји од парова (радио-дугме, ознака у виду елемента label), при чему за последњим паром следи текстуално поље које је скривено (в. 2, пето правило) све док корисник не одабере последњу опцију: да наведе глумца чије име није понуђено као одговор (в. 2, шесто правило). Селектор input[type='radio']:checked + label бира ознаку тренутно изабраног радио-дугмета и мења његову тежину фонта (в. 2, четврто правило). Уједно се подсећамо селектора првог следећег брата (+) којим преко изабраног радио-дугмета приступамо његовој ознаци, као и селектора произвољног следећег брата (#rbNekoDrugi:checked ~ #txtMarlou) како бисмо преко последњег радио-дугмета (само кад је изабрано од стране корисника) приступили пољу за унос текста (са идентификатором txtMarlou) које следи за њим, али не као први следећи брат.

Користећи селекторе контекста, псеудокласе :checked и :target могу се симулирати контроле попут картица у дијалозима (пробајте!).

Само ћемо споменути преостале псеудокласе које региструју тренутно стање контроле формулара:

• :required бира елементе који су обавезни за попуњавање (исти ефекат као [required]);
• :optional бира контроле формулара које могу, а и не морају да се попуне (исти ефекат као :not(:required));
• :valid бира контроле формулара чији је садржај валидан;
• :invalid бира контроле формулара чији садржај није валидан.

Последње две псеудокласе се могу користити за различито форматирање контрола формулара док их корисник попуњава, на пример црвена боја ивица све док садржина поља за унос текста није у траженом формату, односно зелена боја ивица када је унет текст у траженом формату (пробајте!).