HTML форме

Објави Душко

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

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

form таг

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

HTML форме - <form> таг

input таг

1. Input text поље

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

HTML форме - <input> таг

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

HTML форме - <input> таг

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

HTML форме - <input> таг

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

HTML форме - <input> таг

2. Radio buttons

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

HTML форме - Radio buttons

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

HTML форме - Radio buttons

3. Checkboxes

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

HTML форме - Checkboxes

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

HTML форме - Checkboxes

4. Date

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

HTML форме - Date атрибут
HTML форме - Date атрибут

5. Email

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

HTML форме - Email атрибут

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

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

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

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

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

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

Дугмад

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

HTML форме - дугмад

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

HTML форме - дугмад
Пример понуде једног ресторана HTML
HTML форме - дугмад
Пример понуде једног ресторана у претраживачу

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

Value атрибут

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

HTML форме - Value атрибут

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

HTML форме - Value атрибут

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

Checked атрибут

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

HTML форме - Checked атрибут

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

HTML форме - Checked атрибут

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

HTML форме - Checked атрибут

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

HTML форме - Checked атрибут

Disabled атрибут

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

HTML форме - Disabled атрибут

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

HTML форме - Disabled атрибут

Required атрибут

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

HTML форме - Required атрибут

Placeholder атрибут

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

HTML форме - Placeholder атрибут

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

HTML форме - Placeholder атрибут

Form атрибути

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

Action атрибут

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

HTML форме - Action атрибут
HTML форме - Action атрибут

Method атрибут

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

HTML форме - Method атрибут

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 листе

Категорије: HTMLWeb дизајн

0 коментара

Оставите одговор

Avatar placeholder

Ваша адреса е-поште неће бити објављена.