Форми в HTML

Какво представляват формите в HTML?

HTML формите представляват съвкупност от елементи. Те могат да съдържат текстови полета (input fields), бутони (buttons – register, login, search…),  менюта (menus), слайдъри (sliders) и др.

Формите са готови HTML елементи, които събират информация от потребителя при попълване от негова страна. Тази информация в най-общия случай след това се записва в база от данни или се предава до съответния получател (в случай, че потребителят е използвал контактна форма от даден уеб сайт).

Стандартен запис на контактна форма в HTML:

forms_basic

Съществуват два типа методи, чрез които могат да се изпращат данните от формата. Това са: „POST“ и „GET“ методите. Разликата между тях е, че при метода GET информацията се изпраща през URL адреса, като при това браузъра извършва URL кодиране. Този метод е подходящ при изпращане на малко количество данни, защото повечето сървъри ограничават размера на GET заявките до 256 символа. Метода POST отваря директен комуникационен канал между клиента (браузъра) и сървъра. Тук не се извършва URL кодиране и големината на предаваната информация не е ограничена (в някои случаи от съображения за сигурност ограничения има и при този метод), тъй че той е подходящ за изпращане на файлове и форми с много информация. Освен това изпращането на пароли с метода GET не е особенно удачно, тъй като всеки може да разбре вашата парола виждайки какво е изпратил браузърът като URL. Ако се използва POST това не може да се случи, поради това, че данните се предават директно и не преминават през полето за адреси на браузъра.

Атрибутът „action“ посочва къде да се изпратят данните на клиента. В конкретния случай това е: „path/to/some-script.php“.

<form> не визуализира никакви полета в браузъра, а служи само за контейнер. За тази цел се използват следните тагове : <input>, <select>, <textarea> и <option>. Най-често използвания от тях е <input>, който има няколко атрибута, като най-важният е атрибута type=“…“. Чрез него се задава типа на елемента. а ето и най-често срещаните атрибути на <input>:

Атрибути на <input>

  • <input type=“text“ name=“FirstName“ value=“This is a text field“ />

Едноредово поле;

  • <input type=“password“ name=“pass“ />

Специализирано поле за парола;

  • <input type=“reset“ name=“resetBtn“ value=“Reset the form“ />

Бутон, чрез който формата се връща в първоначалното й състояние (т.е. празно);

  • <input type=“submit“ value=“Apply Now“ />

Бутон, чрез който се изпраща формата;

  • <input type=“image“ src=“submit.gif“name=“submitBtn“ alt=“Submit“ />

Също като Submit бутон, но с разликата, че бутонът е картинка;

  • <input type=“button“ value=“click me“ />

Просто бутон…използва се най-често с Javascript (JS);

  • <input type=“checkbox“ name=“fruit“ value=“apple“ />

Отметка;

  • <input type=“radio“ name=“title“ value=“Mr.“ />

Радио бутон;

  • <input type=“hidden“ name=“Account“ value=“This is a hidden text field“ />

Скритите полета съдържат информация, която не е видима за потребителя;

  • <label for=“textId“>First Name</label>
    <input type=“text“ id=“textId“ />

Label ни дава възможност да използваме целият запис, за да влезем вътре в полето и да запишем своето име;

fieldsets

Освен атрибута type=“…“, тага <input> има и още няколко атрибута, специфични за всяка една от неговите стойности:

Други атрибути на <input>

  • align=“…“

Дефинира подравняването на дадения елемент. Специфичен за image.

  • alt=“…“

Дефинира алтернативен надпис, който се визуализира ако браузъра не може да показва изображения или са изключени. Специфичен за image.

  • border=“…“

Дефинира дебелината на границата около изображението.Специфичен за image.

  • checked

Маркира дадения елемент. Специфичен за checkbox и radio.

  • disabled

Елемент е такъв атрибут се визуализира в сив цвят и вътре не може да се въвежда информация.

  • maxlength=“…“

Установява максималната големина на информацията въведена е текстовите полета.

Когато броя на символите на информацията е по-голяма от максималната, то повече символи не могат да бъдат въведени.

  • name=“…“

Дефинира име на елемента. При изпращане на информация чрез името може да се диференцират отделните елементи.

  • readonly

Когато един елемент е дефиниран като readonly, стойностите му не могат да се променят от потребителя. Скриптовете обаче могат да променят този елемент.

  • size=“…“

Установява големината на текстовите полета в пиксели.

  • src=“…“

Дефинира пътя към изображението използвано за бутон. Специфичен за image.

  • type=“…“

Установява типа на елемента.

  • value=“…“

Установява стойността на елемента, която се изпраща от формата чрез двойката име/стойност.

Други често-използвани тагове

Чрез тага <select> могат да се създават падащи менюта в един WEB документ. Елементите на това меню се създават с помощта на тага <option>. Атрибутите на <select> са: 

  • align=“…“

Дефинира подравняването на дадения елемент.

  • multiple

Позволява на потребителя да маркира повече от една опция.

  • name=“…“

Дефинира име на групата.

  • size=“…“

Дефинира редовете, които ще се показват. Ако стойността е 1, то ще се визуализират като падащо меню. В противен случай се визуализират само толкова реда, колкото е зададено. Стойността по подразбиране е 1.

Тагът <option> има следните атрибути:

  • disabled

Забранява дадения елемент;

  • label=“…“

Дефинира заглавие на елемента, което предефинира текста след тага (който ако не се постави този атрибут служи за заглавие).

  • selected

Маркира дадения елемент. Ако се използва multiple, е възможно използването на повече от един елемент с този атрибут.

  • value=“…“

Дефинира стойноста на елемента. Изпращаната информация се формира от името, дефинирано в тага <select>, и стойноста на този атрибут.

Тагът <textarea> е подобен на текстовото поле с тази разлика, че тук редовете са повече от един. Този таг има множество атрибути, но най-често използваните са :

  • align=“…“

Дефинира подравняването спрямо другите елементи на страницата.

  • cols=“…“

Дефинира колоните, които ще има текстовото поле.

  • rows=“…“

Дефинира колоните, които ще има текстовото поле.

  • name=“…“

Дефинира име на елемента.

  • style=“…“

Дефинира каскаден стил за текстовото поле.

  • wrap=“…“

Установява начина по който ще се пренасят символите на нов ред. Възможните стойности са physical и virtual. В първият случай редовете завършват със знак за нов ред и така се изпращат, а във втория случай пренасянето е виртуално и информацията се изпраща като едно цяло. По подразбиране пренасянето е изключено. Ако се зададе само WRAP (без стойност) се активира виртуалното пренасяне.

  • readonly

Не позволява въвеждането на информация в текстовото поле от потребителя. Скриптовете, обаче могат да променят информацията.

  • disabled

Деактивира елемента. Не е възможно въвеждането на иформация от потребителя.

Примери:

Бих Ви посъветвал да изпробвате всеки един таг от посочените в тази статия, тъй като това е и единствения начин да се научите да ги ползвате правилно.

  • <select name=“gender“>
    <option value=“Value 1″
    selected=“selected“>Male</option>
    <option value=“Value 2″>Female</option>
    <option value=“Value 3″>Other</option>
    </select>

  • <select name=“products“ multiple=“multiple“> // Многоредово меню;
    <option value=“Value 1″
    selected=“selected“>keyboard</option>
    <option value=“Value 2″>mouse</option>
    </select>

  • <textarea name=“Comments“>This is a multi-line text field</textarea>

Fieldsets

fieldsets

Fieldsets ни дават възможност да разделим семантично различни части от нашата форма, както в примера по-горе за: Client Details и Order Details.

В раздел: Форми – Проекти съм ви подготвил примерен проект, чрез който може да се упражнявате.

Sliders and spinboxes


<input type=“range“ min=“0″ max=“100″ />

Slider – представлява графичен слайдър, който можем да манипулираме чрез мишката – от 0 до 100;

  • <input type=“number“ min=“0″ max=“100″ />

Spinbox – има същата функционалност като слайдъра, но с тази разлика, че параметрите от 0 до 100 се променят чрез бутони.

Допълнителни атрибути на тага <input> в HTML5

  • Autocomplete

Попълва автоматично предишно записани от вас данни в input полета на различни форми;

  • Autofocus

Клавиатурният фокус върху дадено поле;

  • <input type=“text“ name=“firstName“ autofocus=“autofocus“ />
  • *Required

Поле, което задължително трябва да бъде попълнено от потребителя;

  • Tab index

Указва чрез натискане на бутон ТАБ от клавиатурата кое поле да бъде на фокус, за да можем да вписваме информация вътре.

  • <input type=“text“ name=“second“ tabindex=“10″ />
  • <input type=“text“ name=“first“ tabindex=“5″ />

HTML Frames – <frameset>, <frame> and <iframe>

Framesets осигуряват възможността на повече от една страница да се визуализират в един HTML файл. Страницата може да бъде разделена на няколко фрейма – както хоризонтални, така и вертикални.

Framesets не се използват в днешно време, тъй като не всички браузъри ги поддържат и като цяло чупят концепцията на HTML и на това, че на един адрес трябва да има един HTML файл, а не 3 или повече например.

framesets_code

framesets

iFrame в днешно време се използва като замества т.нар. <frameset>, като по този начин не чупи концепцията на WWW (World Wide Web) за множество HTML страници на един URL и освен това може да се сложи, където пожелаем на нашата уеб страница, без това да пречи по някакъв начин на подредбата на нашите елементи.

iframes

Напред към: Форми – Проекти, където ще научим как се създава регистрационна форма, както и форма с включени тагове <fieldset> за семантична подредба на нашето съдържание.

Вашият коментар