Създаване на HTML формуляри с таг INPUT

Създаване на HTML формуляри: тагът INPUT

Етикетът се използва за създаване на повечето полета на формуляр. Атрибутът TYPE на този етикет указва кое поле се създава, а останалите атрибути определят параметрите за това поле. Има следните типове полета: текстово поле, поле за парола, поле за отметка, бутон за избор, скрито поле и поле за файл. Етикетът също така създава бутони за изпращане и нулиране. По-долу ще разгледаме всичко това по-подробно.

Сега искам да говоря за атрибутите NAME и VALUE, които всички полета имат. Когато данните се изпращат до сървъра, те се организират в двойки име-стойност. Атрибутът NAME ви позволява да идентифицирате (именувате) всяко поле във формуляра. Най-общо казано, формата служи за асоцииране на всяко поле (име) с някаква стойност. Атрибутът VALUE ви позволява предварително да зададете тази стойност. Значението на този атрибут зависи от типа на полето.

Полето на формуляра е текстово по подразбиране. Можете да въведете текст в това поле като един ред. Когато създавате поле, можете изрично да посочите неговия тип, като зададете атрибута TYPE в тага.

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

Атрибутите SIZE и MAXLENGTH показват показваната ширина на полето и максималния брой знаци, които могат да бъдат въведени в него. Трябва да посочите разумна стойност за атрибута MAXLENGTH, но не можете да разчитате на стойността му във вашите CGI програми. Посетителят на вашата страница може да подава данни към програмата без да използва формуляр и вие трябва да вземете това предвид при програмирането. Има няколко начина за предаване на данни към програмата, без да се спазват ограниченията, наложени от формата. Например, потребителят може да качи формуляр, да го промени ипрехвърляне на данни. В допълнение, той може просто да напише програма и да предаде данни на вашата CGI програма без помощта на браузър изобщо.

Ето пример за таг, който създава текстово поле:

Ето как се изпълнява този код:

Полето за парола е подобно на текстово поле, с изключение на това, че маскира въведеното от потребителя, така че външен човек да не може да види паролата ви, като погледне през рамото ви. Но трябва да имате предвид, че данните в това поле не са кодирани по никакъв начин, когато се предават на браузъра.

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

Можете да създадете полета за парола, като зададете атрибута TYPE на password. Останалите атрибути се задават по същия начин, както при обикновено текстово поле. Ето примерен код и веднага пример за неговото изпълнение:

парола " NAME=" password " size="10" maxlength="10">

Флагът служи като двоичен избор - или се проверява, или се изчиства. Когато потребителят щракне върху отметката, стойността й се обръща. Ако квадратчето е отметнато, то се изчиства и обратното. Ако флагът е зададен при подаване на данни към формуляра, неговата двойка име-стойност се предава на сървъра, ако е изчистен, нищо не се предава на сървъра.

За да създадете квадратче за отметка, трябва да зададете атрибута TYPE на поле за отметка. Атрибутът VALUE трябва да бъде зададен на някаква стойност, в противен случай няма да можете да проверите състоянието на това квадратче за отметка, защото няма да има достатъчно данни за формиране на двойка име-стойност. Няма значение каква стойност присвоявате на атрибута VALUE, това е просто условна стойност, която може да бъде проверена в CGI програма. Обикновено негов проблемкато да или не.

Чекбоксът може да има още един атрибут - ОТМЕТЕН. Няма значение, просто ако има отметка, отметката ще бъде отметната при отваряне на страницата, ако не е поставена отметката няма да е отметната. Ето примерен код и веднага пример за неговото изпълнение:

Вашите интереси: квадратче за отметка " NAME="books" value="yes">Книги квадратче за отметка " NAME="music" value="yes">Музика

Бутонът за избор е предназначен за избор от няколко възможни отговора. Когато изберете една от опциите, избраната преди това се нулира. На английски превключвателят се нарича радио бутон, т.е. радио бутон (подобно на старите автомобилни приемници, при които при натискане на бутона на определена радиостанция изскача предишният натиснат бутон).

Радио бутон се създава с таг, чийто атрибут е зададен на радио. Всеки таг създава само един бутон за избор, така че ако трябва да създадете няколко свързани бутона, трябва да приложите тага няколко пъти и да давате на атрибута NAME едно и също име всеки път.

Както при квадратчетата за отметка, радиобутонът може да бъде предварително избран с помощта на атрибута CHECKED. Ако присвоите атрибута CHECKED на няколко бутона в една група бутони наведнъж, тогава само последният бутон в групата ще бъде отметнат при отваряне на страницата. Ето примерен код и пример за неговото изпълнение:

Вашият месечен доход: $100 $250 $500++

Има един вид сфера, от която на пръв поглед няма никаква полза. Скритите полета може да съдържат данни, които потребителят не може да променя. Освен това скритото поле изобщо не се показва на страницата. Въпреки това данните, записани в това поле, съществуват и се предават на браузъра заедно с всички други данни. А браузърът от своя страна изпращатехния сървър.

За да създадете скрито поле, трябва да посочите атрибута TYPE със стойност hidden. В допълнение към този атрибут скритото поле може да има атрибути NAME и VALUE. Скритото поле се създава по следния начин:

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

Файловите полета са предназначени да позволят на потребителя да изпрати своя файл на сървъра чрез формуляра. За да създадете такова поле, атрибутът тип на полето получава файла със стойност. В това поле потребителят може да посочи файл на своя компютър и при прехвърляне на данни този файл ще бъде изпратен заедно с тях. Формуляр, който има файлови полета, трябва да използва метода за подаване POST и типа кодиране на данни от много части/формуляр.

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

Ето кодовия фрагмент, който създава файловото поле:

Бутонът Нулиране е предназначен да нулира всички въведени от потребителя данни. Ако атрибутът VALUE е зададен за определено поле, тогава когато се щракне върху бутона за нулиране, стойността на този атрибут се въвежда в полето. Ако не е зададен такъв атрибут, тогава полето просто се изчиства. За да създадете бутон за нулиране, атрибутът TYPE е зададен на нулиране.

Атрибутът VALUE на самия бутон определя етикета му. Ето пример за създаване на бутон за нулиране:

Бутонът Изпрати се използва за изпращане на данниформуляри към сървъра. Как точно ще се прехвърлят данните и къде, се определя в тага при създаване на формата. За да създадете бутон за изпращане, атрибутът TYPE е настроен да се нулира.

Атрибутът VALUE определя неговия етикет. Ето пример за създаване на бутон за изпращане: