Персонализиране на формата
Създадохме HTML документ, който съдържа прост формуляр и използвахме Node.js за показване на данните, които се изпращат на сървъра. Сега е време да ви покажем основните настройки, които могат да бъдат приложени към формата и нейното съдържание.
Персонализиране на формуляра с атрибута за действие
Атрибутът action определя къде браузърът да изпраща данните, получени от потребителя след изпращане на формуляра. Искам данните да бъдат изпратени на моя скрипт Node.js, т.е. искам формулярът да бъде изпратен на url /form на порт 8080 на моя титан сървър. Можете да видите, че вече съм рендирал това във формуляра в листинг 12-1 по този начин:
Базовият елемент засяга всички относителни URL адреси в HTML документ, а не само елемента на формуляра.
Използване на атрибута на HTTP метода
Атрибутът на метода указва кой HTTP метод ще се използва за изпращане на данните от формуляра към сървъра. Валидни стойности са get и post, които съответстват на HTTP методите GET и POST. Ако атрибутът на метода не е приложен, тогава по подразбиране е get, което не е съвсем жалко, тъй като повечето формуляри изискват HTTP POST. Можете да видите, че в този пример съм указал стойността на публикацията за елемента на формуляра по следния начин:
Имаме нужда от втори входен елемент, за да съберем две части от данни от потребителя. Както може би се досещате, ние изграждаме форма, която ще позволи на потребителите да гласуват за любимите си плодове. Новият входен елемент ще се използва за събиране на техните имена. Можете да видите от този списък, че съм задал стойността на името на този елемент на име. За да демонстрирам ефекта от използването на различни кодировки, добавих атрибут enctype към формуляра и го зададох на всеки от поддържаните типове кодиране. Във всички случаи добавих едни и същи даннив текстови полета. В първото текстово поле написах Apples , а във второто Адам Фрийман (с интервал между собственото и фамилното име).
приложение за кодиране/x-www-form-urlencoded
За кодиране това е стойността по подразбиране и е подходяща за всички видове форми, с изключение на тези, които качват файлове на сървъра. Името и стойността на всеки елемент от данни се кодират с помощта на същата схема, използвана за URL кодиране (следователно urlencoded е част от името). Ето как кодирането се прилага към примерните данни:
Специалните символи се заменят с техните HTML двойници. Името и стойността на единицата са разделени със знак за равенство ( = ), а връзките данни/стойност са разделени с амперсанд ( & ).
multipart/form-data кодиране
Кодирането на multipart/form-data използва различен подход. Това кодиране е по-подробно и трудно за работа, поради което обикновено се използва само за формуляри, които трябва да качват файлове на сървъра, което не може да се направи с кодирането по подразбиране. Ето как са кодирани данните от нашия примерен формуляр:
текстово/обикновено кодиране
Това кодиране трябва да се използва внимателно. Няма официална спецификация за това как трябва да се кодират данните, когато се използва тази схема. Основните браузъри кодират данните по различен начин. Например Google Chrome кодира данните по същия начин, както използва схемата application/x-www-form-urlencoded, докато Firefox кодира данните, както следва:
Всеки елемент от данни е поставен на един ред и специалните знаци не са кодирани. Препоръчвам да избягвате това кодиране. Разликите между браузърите го правят непредвидим
Управление на попълване на формуляри
Браузърите помагат на потребителя чреззапомня данните, въведени от потребителя във формуляра, и предлага повторно използване на тези данни автоматично, когато се срещне подобен формуляр. Този метод намалява необходимостта потребителят да въвежда едни и същи данни отново и отново. Добър пример за това биха били името и данните, които потребителят въвежда, когато купува стоки или услуги онлайн. Всеки уебсайт има своя собствена пазарска количка и процес на регистрация, но моят браузър използва данните, които съм въвел в други форми, за да ускори процеса. Браузърите използват различни методи, за да разберат какви данни могат да бъдат въведени повторно, но често срещаният подход е да се търси атрибутът name на входните елементи.
Като цяло автоматичното попълване на формуляри е полезно за потребителите и не се променя много в уеб приложение. Но има моменти, когато не искаме браузърът да попълни формуляра. Списък 12-5 показва как това може да се направи с помощта на атрибута за автоматично попълване на елемента на формуляра.
Списък 12-5: Деактивиране на атрибута за автоматично попълване на елемента на формуляр
Има две валидни стойности за атрибута за автоматично довършване: включено и изключено. Стойността на позволява на браузъра да попълни формуляра и е стойността по подразбиране; т.е. предполага се, че се използва, ако не приложите атрибута.
Можете да прецизирате задачата, като приложите атрибута за автоматично довършване към отделни входни елементи, както е показано в списък 12-6.
Списък 12-6: Прилагане на атрибута за автоматично довършване към входни елементи
Атрибутът за автоматично довършване на елемента на формуляр задава стойността по подразбиране за елементите за въвеждане на формуляр. Но както е показано в списъка, можете да промените тази политика за отделни елементи. В този пример атрибутът на елемента на формуляра деактивира автоматичното довършване, но същият атрибут се прилага закъм първия входен елемент, го включи отново, но само за този елемент. Вторият входен елемент, който няма приложен атрибут за автоматично довършване, зависи от настройките на формуляра.
Посочване на цел за отговор на формуляр
По подразбиране браузърът замества страницата, съдържаща формуляра, с отговора, който сървърът връща след изпращането на формуляра. Можете да промените това поведение с атрибута target на елемента на формуляра. Този атрибут работи по същия начин като целевия атрибут на a елемента и можете да избирате от показаните в таблица 12-6.
Таблица 12-6: Стойности на целевия атрибут на елемента на формуляра
| Атрибут | Описание |
| _празно | Отваря отговора на сървъра в нов прозорец (или раздел) |
| _parent | Отваря отговора на сървъра в родителския кадър |
| _самостоятелно | Отваря отговора на сървъра в текущия прозорец (това е поведението по подразбиране) |
| _Горна част | Отваря отговора на сървъра в цял прозорец |
| Отваря отговора на сървъра в посочения кадър |
Всяка от тези стойности представлява контекст на браузъра. Значенията на _blank и _self са очевидни. Други се занимават с използването на рамки, което ще обясня в глава 15. Листинг 12-7 показва как атрибутът target се прилага към елемента на формуляра.
Списък 12-7: Използване на целевия атрибут
В този пример съм посочил целта _blank, която казва на браузъра да покаже отговора на сървъра в нов прозорец или раздел. На фигура 12-3 можете да видите резултата от тези промени.
Фигура 12-3: Показване на отговора на сървъра в нов раздел
Задаване на името на формата
Атрибутът name ни позволява да дадем на формуляра уникален идентификатор, така че можемразграничаване на формуляри при работа с Document Object Model (DOM). Представям DOM в глава 25. Атрибутът name е различен от атрибута global id и в повечето случаи HTML документите използват атрибута id за CSS селектори. Списък 12-8 показва елемента на формуляра с приложените атрибути име и идентификатор. За простота използвах една и съща стойност и за двата атрибута.
Списък 12-8: Използване на атрибутите name и id на елемента на формуляра
Стойността на атрибута name не се изпраща на сървъра с формуляра, така че този атрибут има само DOM стойност и не е толкова важен, колкото атрибута name на входния елемент. Ако входният елемент няма атрибут за име, тогава данните, въведени от потребителя, няма да бъдат изпратени до сървъра, когато формулярът бъде изпратен.