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

Иако форме изгледају веома различито, све оне имају неколико заједничких елемената као што су поља за унос (textbox), поља за потврду (checkbox), радио дугмад, падајуће листе, дугме Submit на које кликћемо да би се форма послала серверу, дугме Reset за брисање претходних одговора и почетак новог попуњавања итд. О овим елементима који чине елементе HTML форме ћемо продискутовати у даљем тексту. Ако желимо информације од корисника, морамо да креирамо образац у којем су различити начини добијања уноса од корисника, као што су горе наведени елементи.

form таг

Ознака <form> дефинише образац у HTML-у. Почетна и завршна ознака <form>  </form> обрасца говоре веб претраживачу који део HTML датотеке да стави у образац.

input таг

1. Input text поље

Да бисте креирали поље за унос текста, поставите вредност атрибута као „text“.

Ознака <input> нема одговарајућу завршну ознаку.

Можете видети поље за унос у претраживачу. Хајде да то буде јасније помоћу ознаке <label>.

Ознака <label> садржи информације у вези са уносом. Можете је користити са било којом врстом улаза.

2. Radio buttons

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

Овде видимо два радио дугмета.

3. Checkboxes

Пружају могућност да посетилац веб локације изабере један или више елемената листе притискајући поље за потврду поред сваког од тих елемената реализује се подешавањем атрибута type на checkbox-у у <input> ознаци за сваки елеменат листе. Корисник може да изабере више опција. Када посетилац притисне празно поље за потврду, претраживач изабере елемент обрасца тако што стави знак за потврду у то поље. Уколико посетилац притисне већ изабрано поље за потврду, претраживач веба тај елеменат обрасца изузима из избора тако што уклања знак из поља за потврду.

Постоје три поља за потврду.

4. Date

Да бисте добили датум као кориснички унос, поставите вредност атрибута као “date”.

5. Email

Email је поље за унос које прихвата само када је унос важећи email.

Постоје и други инпути, као на пример:

● „file“, дозвољава одабир и аплоуд датотека.

● „color“, омогућава кориснику одабир боја.

● „number“, поље за унос које дозвољава уношење само бројева.

● „month“, за одабир месеца и године.

● „time“, за одабир времена.

Дугмад

Образац је непотпун без дугмади. Увек постоји дугме које доставља податке обрасца. Да бисте креирали дугме у обрасцу, користите „submit-пошаљи“ као тип. Тиме ћете креирати „submit“ форму, односно дугме којим се подаци шаљу серверу. За уметање дугмета Submit у образац користи се ознака <input> са атрибутом type подешеним на “submit”. Уколико креирамо дугме Reset поставићемо све вредности елемената форме на предефинисане вредности.

Вредност (value) наведена у атрибуту ће се појавити на дугмету.

Још неки важни атрибути

Value атрибут

Атрибут value или вредност користи се за давање унапред дефинисане вредности било ком пољу за унос (input type-у).

Вредност поља за унос текста је „Душко“. Да видимо то у претраживачу.

Можете видети да се вредност појављује у пољу за унос. Вредност се може подесити на било који тип уноса ако то унос дозвољава.

Checked атрибут

Checked атрибут се користи са радио дугмадима (radio buttons) и пољима за потврду (checkboxes). Овај атрибут нема никакву вредност. Ставља се само у input таг.

Друго радио дугме је означено (checked).

Checked атрибут се такође може користити са пољима за потврду.

Сва поља су означена.

Disabled атрибут

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

Друго поље за унос (Презиме) је онемогућено.

Required атрибут

Користи се да означи да је неко поље за унос обавезно попунити.

Placeholder атрибут

Placeholder је текст који се појављује у пољу за унос да означи који унос се очекује. Текст је само за приказ.

Вредност placeholder-а ће се појавити у пољу за унос текста.

Form атрибути

Навели смо неке важне и често коришћене input атрибуте. Сада ћемо се вратити и поразговарати о неким важним атрибутима <form> тага.

Action атрибут

Атрибут action у обрасцу дефинише који URL ће се позвати када се кликне на дугме submit. Улазне вредности или одговори се испоручују на наведен URL.

Method атрибут

Такође је неопходно навести HTTP метод када се шаље форма. Атрибут method се користи за спецификацију методе или начин на који претраживач треба да пошаље резултате на назначену URL адресу. Може бити или POST ( претраживач шаље податке обрасца у засебној HTML поруци) или GET (претраживач враћа податке обрасца веб серверу на крају URL-а који је дат атрибутом action у ознаци <form>).

Novalidate атрибут

Ознака <input> има неколико атрибута за валидацију, као што је required атрибут. Образац се неће предати све док се све у форми не провери и валидира. Међутим, постоји начин да занемаримо валидацију користећи novalidate атрибут.

Novalidate је логички атрибут тако да не захтева никакву вредност.

Закључак

● Форме се користе да сакупе уносе од корисника.

● <form> таг се користи да дефинише форму, а <input> таг начин на који ће корисник извршити унос у форму.  

● Постоји неколико типова уноса у HTML. <input> таг има атрибуте који дефинишу врсту поља за унос. Те врсте укључују text, radio, checkbox атрибуте и још много тога.

● За креирање дугмади користи се <input type=”submit”> tag. Ово ће креирати submit дугме у форми.

● value атрибут даје вредност пољу за унос.

● Имамо неколико других атрибута као checked, disabled, placeholder, итд који су корисни за презентацију и валидацију.

● action атрибут <form> описује која радња треба да се предузме када се кликне на дугме пошаљи или submit, док method описује начин акције.

● Уколико вам се учини да сте заглавили, да не разумете неке делове, увек је добро консултовати поуздане изворе. Најискреније препоручујем да посетите, рецимо, MDN сајт и поставите упит. Људи који су одговорни за креирање Mozilla, сигурно имају одговор.

Пример форме за регистрацију

Претходно:

HTML листе