Формуляри

1. Формуляри

1. Предназначение

Използват се както за отправяне на запитвания за конкретна информация (мнения за сайта, потребителски регистрации, отговори на анкети) към потребителите, така и за предоставяне на възможност за обратна връзка, за изпращане на въпроси и искания. Формулярите (Forms) служат като контейнери за обекти, които потребителя използва за въвеждане или селектиране на информация; също така определят какво става с данните при изпращането им.

2. Основни елементи

Формулярите съдържат полета за въвеждане на информация. Те могат да бъдат текстови полета, радиобутони, полета за отметка, менюта, списъци и др. Данните от Forms обикновено се изпращат до БД на сървър, до email адрес или до приложение, което ги обработва. Обработката на Forms може да се осъществи чрез динамични страници (които използват езици като PHP, JSP, ColdFusion) или чрез CGI (Common Gateway Interface) скриптове. CGI е стандартен протокол, който служи като комуникационна връзка между данните от Forms и сървъра.

3. Изграждане

1) Лента Insert, категория Forms, бутон Form (Insert/Form/Form)
Областта, която заема Forms, е обозначена с червени пунктирани линии в прозореца Document. Тя е дефинирана от двойката тагове form и /form в кода. Големината на областта за Forms зависи от съдържанието му и може да се разширява хоризонтално до пълния достъпен размер, а вертикално толкова, колкото е необходимо, за да се събере съдържанието. Forms се разширява така, че да изпълни ширината на контейнера, независимо дали той е div, клетка на таблица или самата страница.
– View/Visual Aids/Invisible Elements – за да се покаже червената пунктирана линия
– Edit/Preferences, категория Invisible Elements, избутон Form delimiter
На една страница могат да се разположат повече от един Form. В HTML не е възможно да се влагат Forms.
2) селектирайте Forms (щракнете върху червената пунктирана линия; ако курсорът е във Forms може да използвате Tag Selector)
3) панел Properties, поле Form Name – задайте име на Form (уникално име без специални знаци)
4) вмъкнете таблица във Form – тя улеснява подравняването на текст и изображения с полетата на Form, които ги идентифицират.
Възможно е таблицата да се разположи във Form, както и обратното. Условието е таблицата да бъде изпълнена изцяло от Form или от своя страна да го запълва изцяло.

4. Групиране на съдържанието на Form

След като планирате информацията, която ще изисквате от потребителите на сайта, е препоръчително да я разделите в логически групи (секции) на база подобност. Секциите се създават с набори от полета (fieldsets) 1) Лента Insert, категория Forms, бутон Fieldset
2) отваря се диалогов прозорец Fieldset поле Legend – въвеждате легенда (текст – служи като заглавие на секцията и трябва да отразява точно съдържанието на съответния набор от полета.); ОК
Наборът от полета се разширява и заема цялото пространство, достъпно за него. Той може да се разположи в таблица, както и обратно. Условието е таблицата да го изпълва изцяло или тя самата да бъде запълнена със съответния набор. Около наборите от полета има светлосива линия.

2. Добавяне на обекти във формуляр

Всички обекти трябва да бъдат разположени в пространството, заградено от червените пунктирани линии. Те трябва да бъдат вмъкнати в набора от полета, но не и в легендата. Затова селектирайте тага legend в Tag Selector, натиснете клавиш стрелка надясно, натиснете клавиш Enter. Обектите на Forms не работят в прозореца Document. За да се провери ефекта Form трябва да се отвори в браузър.

 

1. Едноредови текстови полета

а) предназначение – служат за събиране на информация, която потребителят въвежда в тях. Използват се за кратки, точни отговори, състоящи се от една дума или фраза. Използват се за въвеждане на имена, адреси, email адреси; търсене на проста информация по въведена дума.
б) добавяне
1) лента Insert, категория Forms, бутон TextField (Insert/Form/TextField)
2) отваря се диалогов прозорец Input Tag Accessibility Attributes
Ако диалогов прозорец не се отвори: Edit/Preferences, категория Accessibility, □Form Objects; OK
– поле Label – въведете етикет – осигурява ясна информация за предназначението на обектите във Forms. Потребителите ще знаят каква информация да въведат в тези полета
– секция Style
o Wrap With label tag – огражда обектите на Forms с тагове за етикет. Текстовото поле винаги остава в близост до текстовия етикет в прозореца Document. Ако обектът на Form бъде преместен, тази опция няма да позволи той да бъде отделен от тага label.
o Attach Label Tag Using For Attribute – създава самостоятелен етикет, който се идентифицира със съответното текстово поле чрез id. Тази опция позволява обектът на Form да се раздели от текста на етикета му в прозорец Document, а това понякога е необходимо за оптимизиране на разположението.
o No Label Tag – изключва етикета. Етикети могат да се добавят по-късно чрез бутон Label от л.Insert, категория Forms
– секция Position
o Before from item
o After from item
– допълнителни атрибути за достъпност
поле Access Key – въведете знак, който потребителят използва съвместно с Alt за достигане до желания обект върху Form. Внимавайте да не използвате знаци, които съвпадат със стандартни клавишни комбинации. Ако използвате клавиши за достъп уведомете потребителя за това – добавете инструкции най-отгоре на Form или в изскачащ прозорец.
поле Tab Index – определя последователността на преместване при натискане на клавиш Tab. Това става чрез присвояване на числа към обекти на Form.
3) ОК – текстовото поле се разполага във Form заедно с текстовия етикет. И двата са селектирани автоматично.
4) селектирайте само текстовото поле
5) панел Properties
поле TextField – въведете име. Не използвайте интервали и специални знаци, имената са чувствителни към регистъра на буквите, когато се използват заедно със скриптове.
поле Char Width – брой видими знаци в текстовото поле
поле Max Chars – максималния брой знаци, които потребителят може да въведе. Ако е празно текстовото поле могат да се въведат неограничен брой знаци. Ако Max Chars>Char Width потребителите могат да въвеждат и извън видимата част на полето. Въвеждането приключва при достигане на стойността на Max Chars.
6) панел Properties, поле Init Val (първоначална област) – текст, който се появява в текстовото поле при зареждане на страницата в браузър. Дава на потребителя пример за типа информация, която се изисква. Оказва се недостатък, ако потребителят се обърка и пропусне полета, които изглеждат вече попълнени.
За да приложите CSS към текстовото поле, изберете желаният стил от меню Class на панел Properties при селектирано поле.

2. Поле за парола

1) добавете едноредово текстово поле
2) панел Properties, опция Type – ○ Password
При въвеждане на данни в полето на екрана се появяват * или ●

3. Група от радиобутони

а) предназначение – използват се когато от потребителя се изисква да избере само една от няколко предварително определени възможности. При избор на една от тях, останалите автоматично се деактивират. б) добавяне
1) лента Insert, категория Forms, бутон RadioGroup (Insert/Form/RadioGroup)
2) отваря се диалогов прозорец Radio Group – поле Name – въвеждате име за групата
Всички радиобутони от дадена група трябва да имат еднакви имена
– в областта на списъка Radio buttons въведете едно и също име в Label и Value за всяка инстанция Radio.
– Добавяне и изтриване на записи – чрез бутони (+) и (-)
– Промяна на последователността на записите – чрез бутони (▲) и (▼)
– Област Lay out using
o Line breaks – радиобутоните се поставят в документа на отделни редове
o Table – всеки бутон е на отделен ред от таблицата
3) ОК

4. Полета за отметка

а) предназначение – позволяват на потребителите да избират една или повече опции от група свързани обекти. Използват се, когато целта е потребителят да има възможност да избере толкова от изброените опции, колкото пожелае.
б) добавяне
1) лента Insert, категория Forms, бутон Checkbox (Insert/Form/Checkbox)
2) отваря се диалогов прозорец Input Tag Accessibility Attributes
– поле Label – въведете етикет
– секция Style – избирате ○Wrap with label tag
– секция Position – избирате ○ after from item
3) ОК – във Form се добавя поле за отметка, заедно със съответния етикет
4) селектирайте само полето за отметка
5) панел Properties, поле Checkbox Name – въведете име
6) панел Properties, поле CheckedValue – въведете стойност
Обединяването в група на определен брой полета се извършва чрез въвеждане на едно и също име за всяко от тях. Задължително е полетата да имат различаващи се, ясни и точни стойности. Ако в Tag selector се вижда само тагът , може да добавите знак за край на ред (Shift+Enter), като част от подготовката за следващото поле за отметка.

5. Списъци и менюта

а) предназначение – превъртащите се менюта (scrolling list) позволяват на потребителите да изберат няколко съседни или несъседни опции. В менютата може да се избира само една. И в двата случая избраните опции се маркират.
б) добавяне
1) лента Insert, категория Forms, бутон List/Menu (Insert /Form /List/Menu)
2) отваря се диалогов прозорец Input Tag Accessibility Attributes
– поле Label – въвеждате етикет
– секция Style – избирате ○ Wrap With Label Tag
– секция Position – избирате ○ Before From item
3) ОК – във формата се добавя малко меню със съответния му етикет. Dreamweaver вмъква по подразбиране падащо меню.
4) добавяте знак за край на ред между текста и етикате на менюто; селектирайте само менюто.
5) панел Properties
опция Type ○ List – превъртащ списък; ○ Menu – меню;
поле Height – ако искате да създадете списък, задължително въведете стойност по-голяма от 1. Тя определя броя на желаните видими редове.
опция Selections – избран □ Allow multiple – важи само за списъци – позволява на потребителя избирането на няколко записа. Ctrl + ляв бутон на мишката – за несъседни записи; Shift + ляв бутон на мишката – за съседни записи;
поле List/MenuName – въведете име
бутон ListValues – отваря се диалогов прозорец ListValues – еднакъв за списъци и менюта.
– поле Item Label – въведете етикет – той се показва на екрана
– поле Value – въведете стойност
Ширината на списъците или менютата се определя от най-дългия запис в полето List Values. Не е възможна промяна на големината чрез издърпване с мишката или чрез посочване на пикселите.
– добавяне и изтриване на записи – чрез бутоните (+) и (-)
– промяна на последователността на записите – чрез бутоните (▲) и (▼).
поле Initially Selected – осигурява маркирането на даден запис от списъка още при зареждането на страницата. Тази опция не е много подходяща за списъци за превъртане, но е полезна за менютата.

6. Многоредови текстови полета (текстови области)

а) предназначение – многоредовите текстови полета (multiline text fields) се използват за събиране на по-голямо количество информация от потребителите. Тези полета представляват текстови области с повече от един ред, в които посетителите на страницата могат да въвеждат информация. Стандартните многоредови полета се използват най-често за получаване на коментари и обратна връзка от посетителите.
б) добавяне
1) лента Insert, категория Form, бутон TextArea (Insert/Form/TextArea)
2) отваря се диалогов прозорец Input Tag Accessibility Attributes
– поле Label – въведете етикет
– секция Style – изберете ○ Wrap with label tag
– секция Position – избирате ○ Before from item
3) ОК – във формата се появяват многоредово текстово поле и етикетът към него.
4) селектирайте полето, натиснете клавиша (←) и добавете знак за край на ред между текста на етикета и многоредовото поле;
Селектирайте само многоредовото поле.
5) панел Properties, поле Name – въведете име
6) панел Properties, поле Char Width – брой видими знаци в полето
7) панел Properties, опция Wrap – определя как ще бъде показван въведения в полето текст, когато той надвишава пространството на видимата област. Възможните настройки са:
– Default – използва се подразбиращата се настройка на браузъра. Тази опция е избрана автоматично при щракване върху настройката multi line на опцията Type
– Оff – не позволява пренасяне на текста на следващия ред. Той продължава на същия ред до натискане на Enter. Когато въвеждането продължи извън видимата област, по-старият текст се скрива от лявата страна
– Virtual – пренася текста на следващия ред, без това да се отразява на данните при изпращането на Form
– Physical – пренася текста на следващия ред, като пренасянето се прилага и върху данните при изпращането на Form
8) панел Properties, поле Num Lines – броя на редовете в областта. Не ограничава броя на въведените от потребителя редове. Текстът се превърта нагоре, когато се въвеждат повече редове, отколкото настроените да се показват.

7. Бутони

а) предназначение – Forms съдържат два бутона: Submit – за изпращане на данни, Reset – за изтриване и възстановяване в изходно състояние на всички полета.
б) добавяне
1) лента Insert, категория Forms, бутон Button (Insert/Form/Button)
2) отваря се диалогов прозорец Input Tag Accessibility Attributes
– поле Label – празно
– секция Style – избирате ○No label tag
– секция Position – избирате ○Before from item
3) ОК – към Form се добавя бутон Submit. Настройките му са подразбиращите се и не е необходимо да ги променяте в панел Properties
4) за да добавите бутон Reset, повторете стъпки 1),2),3) и от панел Properties:
– опция Action – изберете ○ Reset Form Под действието на този бутон всички обекти от Form се изтриват и се възстановява изходното им състояние (т.е. при първоначално зареждане на страницата в браузър)
○ None – на бутоните не се присвоява конкретно действие. Може да се използва в комбинация със скрипт за осъществяване на друга задача (например извършване на изчислителни операции)
– поле Value – въведете стойност (например Clear Form)
– поле Button Name – въведете име(например Reset)

8. Скрити полета

а) предназначение – използват се за въвеждане на информация, която да е невидима за посетителите на страницата и да не може да се попълва от тях. Те не се показват в браузърите.
б) добавяне
1) л. Insert, категория Forms, бутон Hidden Field
В документа се появява скрито поле. Иконата му е само визуална помощ и не се вижда в браузъра.
2) селектирайте скритото поле
3) панел Properties
– поле Hidden Field – въведете име
– поле Value – въведете True – заглавието на Form е включено като предварително дефинирана стойност за скритото поле.

9. Меню за преход (jump menu)

a) същност – съдържа хипервръзки към други страници в същия или в други сайтове. Когато менюто за преход е вградено във Form, в браузър изглежда като списъчно меню. За него не е необходимо действие или метод, тъй като то не предизвиква изпращане, получаване или обработка на данни.
б) добавяне
1) лента Insert, категория Forms, бутон Jump Menu (Insert/Form/Jump Menu)
2) отваря се диалогов прозорец Insert Jump Menu
– поле Text – въведете име за запис (команда) от менюто
– поле When Selected, go to URL – въведете адрес на html страница
Първият запис от списъка на менюто се показва на първия му ред. Този запис е видим за потребителя още в началото и е най-добре да представлява кратко описание на списъка или инструкция, че това е меню за преход. Затова в полето му When Selected, go to URL въведете знака #.
– област Options – изберете опция Select first item after URL change.
По този начин на горния ред на менюто се появява неговия първи запис при връщане към тази страница. В противен случай списъкът ще показва последно избраната опция.
– бутони (▲) и (▼) – за промяна на последователността на записите в менюто
– опция Insert go button after menu – добавя бутон Go към списъка
3) ОК
При добавяне на меню за преход Dreamweaver вмъква автоматично необходимия Form. При избор на запис от меню в браузър, той отвежда до съответната страница. Дадена хипервръзка се активира, когато потребителя кликне върху отговарящия й запис от менюто.
4) панел Properties, бутон List Value – за редактиране на менюто: промяна на текста, последователността на записите в списъка и др.

3. Форматиране на формуляри

Forms могат да се съгласуват с външния вид на сайта чрез използване на CSS.

1. Създаване на стил за нобор от полета

1) позиционирайте курсора в легенда в първия набор от полета. В Tag selector изберете тага fielset
2) панел CSS Styles, икона New CSS Rule, ○Tag, изберете fieldset,○This document only; ОК
3) отваря се диалогов прозорец CSS Rule Definition for fieldset
– категория Box – секция Padding, полеTop – въведете стойност, □Same for all Уплътняването (Padding) осигурява определено пространство за обектите на Form, така че да не прилягат плътно към очертанията на набора от полета
– категория Border

– секция Style, Top – solid, □Same for all

– секция Width, Top – 1, мерни единици – pixels, □Same for all

– секция Color, Top – въведете цвят, □Same for all

4) ОК – сега всеки набор от полета е ограден с рамка

2. Създаване на стил за легендите, отбелязващи различни секции на Form

1) панел CSS Styles, икона New CSS Rule, ○Tag; от менюто вдясно от поле Tag изберете формат; ○This document only; ОК
2) отваря се диалогов прозорец CSS Rule Definition – категория Type – настройте цвят; ОК
3) селектирайте текст на легенда; панел Properties – променете формата му като този от 1).

4. Тестване на формуляри

1. Изпращане на forms на email адрес

Извършва се чрез хипервръзка mailto за действието на form и е препоръчително да се прилага само в тестови условия. Този метод притежава редица слабости, включително грешки, възникващи, когато браузърът не е конфигуриран за изпращане на ел.поща или не може да се свърже с email програма.
1) селектирайте form
2) панел Properties
– поле Action – въведете mailto: и след това email адреса си, без интервали след двоеточието
– меню Method – изберете POST
– поле Enctype – въведете text/plain
Enctype определя кодирането на данните във form. При стойност text/plain информацията от всеки елемент на formсе форматира на отделени редове.

2. Прикрепване на данни към URL адреса в полето Address на прозореца на браузъра

1) селектирайте form
2) панел Properties – поле Action – празно – меню Method – изберете GET