Формуляри от html. HTML форми
Здравейте, скъпи читатели на сайта на блога. Продължавайки нашето проучване, преминаваме към разглеждане на формуляра и етикетите за въвеждане с техните атрибути (), с които можете да създадете голямо разнообразие от формуляри за сайта.
Каквато и да е темата и съдържанието на даден уеб ресурс, той най-вероятно ще съдържа формуляри в една или друга форма: текстови полета, падащи менюта, различни бутони или превключватели. Между другото, в една от публикациите вече говорих за елементи, които помагат за разнообразяване на формите.
Каква е практическата цел на цялото разнообразие от възможни форми? На първо място, те са необходими за изпращане на въведени от потребителя данни към сървъра с цел по-нататъшна обработка с помощта на специално създаден скрипт (манипулатор).
HTML формуляри - как се създават с помощта на формуляр и въвеждане
Както казах в началото, някакъв вид уеб формуляр или дори няколко наведнъж трябва да присъства на всеки повече или по-малко развит уебсайт. За да разберете колко важни са те в светлината на съответствието на уеб ресурса със съвременните изисквания, е достатъчно да ви дадем набързо три обекта, които използват формуляри, базирани на формуляра и тагове за въвеждане, които само с името си не оставят съмнение относно тяхната необходимост от проект в една или друга посока:
Ако следвате например връзка към статия за създаване на обратна връзка (позволяваща на всички потребители да изпращат съобщения до администрацията на сайта), тогава HTML кодът с формуляр, който има отваряне (
) Част:
Тук формулярът играе жизненоважна роля, тъй като инициира инсталирането на уеб формуляра. Самият той не показва област на уеб страница, а служи като контейнер, съдържащ други тагове.
В нашия случай (вижте екранната снимка по-горе), те включват няколко вход(този HTML таг е единичен, с други думи, няма затварящ компонент), а също текстово поле, с различни набори от атрибути. Всеки от тях определя свой собствен елемент, включен във формата.
16. Автофокус(без параметри) е логически атрибут, който поставя фокуса върху полето незабавно при зареждане на уеб страницата, в резултат на което можете да въвеждате данни, без да щракнете върху тях. Не може да се приложи само към input type="hidden".
17. хора с увреждания(без стойности) - деактивира за потребителя елемента от формуляра, към който е добавен. Най-често се използва заедно със скриптове, където се посочват условия, при които ще се активира недостъпен елемент.
18. Форма— свързва елемента с формата, когато се намира извън контейнера
. За да се свърже, глобален id атрибут се добавя към маркера на формуляра и атрибут на формуляр се добавя към входния таг, чиито стойности са еднакви (например id="data" и form="data") .19. Многократни(без параметри) - комплекти опция с множество избориза потребителя и се използва само във връзка с type="file" и type="email".
Ако използвате полето за качване на файл, можете да изберете няколко файла от вашия компютър наведнъж, като използвате клавишите Ctrl или Shift. Ако се покаже поле за въвеждане на имейл адрес (type="email"), тогава имейлите трябва да се въвеждат разделени със запетаи.
20. Задължително(няма стойности) – активира изискването потребителят да въведе данни. Поради това браузърът блокира изпращането на уеб формуляра, ако задължително поле е оставено празно и показва съответното съобщение за необходимостта от попълването му.
Този атрибут не се използва за графични и стандартни бутони (type="button | image"), както и за скрити полета за въвеждане (type="hidden").
21. Размер— определя ширината на текстовото поле в символи (подходящо само за типови елементи с параметри "имейл | парола | търсене | тел | текст | url"). Стойността по подразбиране е 20 знака.
Следващите четири атрибута (22-25) за тага за въвеждане носят почти същата функционалност като за , но за пълнота ще спомена и тях накратко.
22. Максимална дължина— налага ограничение на максималния брой знаци, които могат да бъдат въведени при попълване на текстово поле. Ако се опитате да надвишите това ограничение, по-нататъшното въвеждане ще бъде блокирано. Този атрибут е приложим само за текстови елементи с type="email | password | search | tel | text | url".
23. Минимална дължина— налага ограничение на минималния брой знаци, необходими за въвеждане в текстовата област. Ако се направи опит за изпращане на данни, съдържащи по-малко знаци, ще се появи кратко съобщение за необходимостта от допълване на съдържанието на формуляра и ще бъде предоставена информация за броя на вече въведените знаци. Условията за използване са абсолютно същите като в случая с maxlength.
24. Заместител— можете да поставите подсказка (тя ще служи като параметър) директно в текстовото поле, която ще изчезне в момента, в който потребителят започне да въвежда знаци. Само за полета, които се формират с помощта на параметри имейл, парола, търсене, текст, телефон, url type атрибут на тага за въвеждане.
25. Само за четене(без параметри) - показва, че текстът, въведен преди това в полето, е достъпен само за четене и копиране. Обикновено се използва във връзка със скриптове, където са посочени условия, които, когато са изпълнени, могат да активират този елемент на формуляра.
И накрая, още няколко атрибута, които допълват функционалността на различни елементи на формата:
26. модел— като стойност отразява регулярен израз, въз основа на който се задават правилата за въвеждане на информация. В този случай се препоръчва допълнително да добавите глобален атрибут за заглавие, като параметър на който можете да добавите обяснителен текст, за да помогнете на потребителите да попълнят полетата. Моделът се прилага само към имейл, парола, търсене, текст, телефон, url елементи. Нека го разберем с пример. Ето кода за опростен формуляр за регистрация (с ):
|
Влизам Парола |
За полето за вход (type="text") като стойност на шаблона е зададен регулярен израз (5,), което предполага използването на латински символи, като трябва да бъдат въведени поне пет знака.
По отношение на текстовата област за паролата (type="password"), стойността е зададена на (8,), което определя въвеждането на изключително латински символи във всеки случай (главни и малки букви), както и цифри, докато общият брой на всички символи не трябва да бъде по-малък от осем.
Ако посочените условия за въвеждане са нарушени, браузърът няма да ви позволи да изпращате данни и ще покаже подходящо предупреждение:
27. Src— определя пътя до изображението (URL, което е неговата стойност) за показване на графичния бутон „изображение“ (вижте таблицата с параметри на типа вход по-горе).
28. стъпка— задава стъпката за елементи, които предоставят избор на числови стойности (въведен тип="дата | дата и време-местен | месец | номер | диапазон | тел | време | седмица.").
Може да приема всяко цяло число или дробно число като параметър. Стъпка по подразбиране="1". За да зададете крайния диапазон на въвеждане, можете отново да използвате атрибутите min и max, споменати малко по-горе. За по-голяма яснота ще включим 2 елемента type="number" в тестовата форма. За първия задайте step="2", а за втория step="0,1":
|
Въведете стойност от -10 до 10: Въведете стойност между 0 и 1: |
29. Стойност— задава стойността на елемента на формуляра, която ще бъде предадена на манипулатора. Двойка име-параметър се изпраща на сървъра, където името се определя от атрибута name на входния таг, а параметърът се определя от атрибута value. Освен това за различни елементи на формата стойността ще играе различни роли:
- for type="button | reset | submit" - задава текстовия етикет на бутоните;
- for type="checkbox | radio | image" - идентифицира всяко поле за отметка, превключвател или графичен бутон при изпращане и обработка на данни на сървъра;
- за тип="парола | текст" - веднага при зареждане на формата извежда предварителен текст в полето, който може да бъде променен или напълно изтрит от потребителя;
- за type="file" (качване на файл) не се прилага, защото не засяга този елемент.
Примерна употреба за всяка от горните опции:
|
Изберете CMS: W.P. Joomla |
Тук стойност атрибут стойностдефинира следните компоненти на всеки елемент: показва текстов фрагмент за полето type="text" ("Вашето име"), идентифицира всеки от радио бутоните ("1" и "2"), зададен с помощта на type="radio", и също така активира надпис на бутона ("Изпрати").
Пример за създаване на красива HTML форма
След това ще се опитам да ви представя примерен уеб формуляр, чийто код включва не само комбинации от типове въвеждане с различни стойности, които формират стандартни текстови полета и бутони, но също така, например, които ви позволяват да инициирате фокусиране върху елемент не само с директен клик на мишката, но и чрез клик върху текст.
Моля, имайте предвид, че за да получите уникален дизайн, се поставят отделни компоненти на формуляра, всеки с комплекти от:
Отзад (max-width:350px; margin:50px auto 0; padding:20px; background:#f3ebe1; font-family:"Oswald", sans-serif;) .form-1, .form-2, .form-3 , .form-4 (padding:15px; border:4px double #909090) .form-1, .form-2, .form-3 (border-bottom:none) .form-1 input (display:block; margin- bottom:10px; width:100%).in (padding-left:40px) .in input (width:100%) ..png) no-repeat;background-position:10px 10px) ..png) no-repeat; background-position:10px 10px) .form-4 input (display:block; height:50px; font-size:24px; width:100%; cursor: pointer)
В резултат на това такъв уеб формуляр придобива следната схема:
По-пълна информация за създаването на този конкретен формуляр можете да намерите на тази страница(между другото, там можете не само да тествате функционалността на отделните текстови области, като въвеждате данни в тях, но и да експериментирате с уеб формуляра, като редактирате HTML кода и/или CSS свойствата, напълно или частично променяйки външния му вид).
Целта ми беше да ви запозная с алгоритъма за използване на различни стойности на атрибута type и тага form за създаване на различни HTML форми на сайта. Надявам се задачата да е изпълнена. Във всеки случай, споделете вашите мисли по тази разнообразна тема в коментарите.
Естествено, в следващите публикации ще продължа да описвам основните тагове на хипертекстово маркиране, така че не забравяйте да се абонирате за актуализации на блога по имейл. Също така, за да затвърдите това, вижте друг урок от Евгений Попов за създаване на контактна форма.
Формулярите са предназначени да изпращат данни от потребителя към уеб сървъра. Формулярите в HTML могат да се състоят от текстови полета и текстови области, квадратчета за отметка и радио бутони и падащи списъци. Всичко това са елементи на формата. Всеки елемент служи за предаване на някакъв смисъл на сайта.
В основата си HTML формулярът е уеб страница, на която виждате области за въвеждане на вашата информация. След като попълните формуляра и щракнете върху изпращане, информацията от формуляра се пакетира и изпраща на уеб сървъра за обработка от страна на сървъра (файл манипулатор). След обработката ви се връща друга уеб страница като отговор. Следващата фигура ясно показва как работи формулярът:
Няма нищо трудно в създаването на HTML формуляри. Най-лесният начин да добиете представа за формулярите е да анализирате малко HTML код и след това да видите как работи. Следващият пример показва синтаксиса за създаване на прост HTML формуляр:
Пример: Обикновен HTML формуляр
- Опитайте сами"
Първата ми форма:
Име:
Фамилия:
елемент
Формулярите се вмъкват в уеб страници с помощта на елемента . Той предоставя контейнер за цялото съдържание на формуляра, включително елементи като текстови полета и бутони, както и всякакви други HTML тагове. Той обаче не може да съдържа друг елемент
.
За да изпратите формуляра до сървъра, използвайте бутона „Изпращане“, същият резултат ще се получи, ако натиснете клавиша „Enter“ във формуляра. Ако бутонът „Изпращане“ не присъства във формуляра, можете да използвате клавиша „Enter“ за изпращане.
Повечето атрибути на елемента засягат обработката на формуляра, а не неговия дизайн. Най-често срещаните от които са действиеИ метод. Атрибут действиесъдържа URL адреса, на който информацията във формата ще бъде изпратена за обработка от сървъра. Атрибут методе HTTP методът, който браузърите трябва да използват за изпращане на данни от формуляра.
елемент
Почти всички полета на формуляр се създават с помощта на елемента (от английския вход - вход). Външен вид на елемента се променя в зависимост от стойността на неговия атрибут Тип:
Ето някои стойности на атрибути Тип:
Въвеждане на текст и парола
Един от най-простите видове елементи на формуляр е текстово поле, предназначено за въвеждане на текст на един ред. Този тип въвеждане на текст е зададен по подразбиране и следователно това е едноредовото поле, което ще се покаже, ако забравите да посочите атрибута Тип. За да добавите едноредово поле за въвеждане на текст към формуляр, трябва да вътре в елемента регистрирайте атрибута Типс текстова стойност:
Полето за въвеждане на парола е вид обикновено текстово поле. Поддържа същите атрибути като едноредово текстово поле. Атрибут имезадава името на полето за въвеждане на парола, което ще бъде изпратено до сървъра заедно с паролата, въведена от потребителя. За да създадете поле за парола, трябва да зададете атрибута за парола на Тип(парола (на английски) - парола):
Пример за създаване на формуляр с поле за парола:
Пример: поле за парола
- Опитайте сами"
Вашият вход:
Парола:
Можете да използвате атрибута заедно с този атрибут максимална дължина, чиято стойност определя максималния брой знаци, които могат да бъдат въведени в даден низ. Можете също да зададете дължината на полето за въвеждане, като използвате атрибута размер. По подразбиране повечето браузъри ограничават ширината на текстово поле до 20 знака. За да контролирате ширината на новите елементи на формуляра, вместо атрибут размер, препоръчваме да използвате каскадни стилови таблици (CSS).
Атрибут стойностуказва стойността, която се показва по подразбиране в текстовото поле при зареждане на формуляра. Като въведете стойност по подразбиране в полето, можете да обясните на потребителя точно какви данни и в какъв формат искате потребителят да въведе тук. Това е като пример, защото е много по-удобно за потребителя да попълни формуляра, виждайки пример пред себе си.
Превключватели (радио)
елемент Тип радиосъздава превключватели, които използват логическия принцип "ИЛИ", което ви позволява да изберете само една от няколко стойности: ако изберете една позиция, всички останали стават неактивни. Основният синтаксис на превключващ елемент е:
Атрибут имеза превключватели е необходим и играе важна роля при комбинирането на няколко елемента на превключвател в група. За да комбинирате радио бутони в група, трябва да зададете същата стойност на атрибута имеи различна стойност на атрибута стойност. Атрибут стойностзадава стойността на избрания радио бутон, който да бъде изпратен на сървъра. Стойността на всеки елемент с радио бутон трябва да бъде уникален в рамките на групата, така че сървърът да знае коя опция за отговор е избрал потребителят.
Наличие на атрибут проверено(от англ. - инсталиран) при превключващия елемент показва коя от предложените опции трябва да бъде избрана по подразбиране при зареждане на страницата, ако е необходимо. Този атрибут може да бъде зададен само за един елемент с радио бутон от групата:
- Опитайте сами"
На колко години си?
- под 18
- от 18 до 24
- от 25 до 35
- повече от 35
Атрибутът на действието.
Основен за елемент е атрибут действие, който указва манипулатора на данни за формуляра. Манипулаторът на данни е файл, който описва какво да се прави с данните от формуляра. Резултатът от тази обработка е нова HTML страница, която се връща в браузъра. С други думи, в атрибута действиеуказва URL пътя към манипулатор файл на сървъра (понякога наричан скриптова страница) за обработка на формуляра. Синтаксисът е както следва:
Файлът за обработка се намира на сървъра mytestserver.comв папка папка с именаи името на сървърния скрипт, който ще обработва данните - obrabotchik.php. Всички данни, които сте въвели във формата на уеб страницата, ще бъдат прехвърлени към него. Разширението .php показва, че посоченият формуляр се обработва от скрипт, написан на PHP. Самият манипулатор може да бъде написан на друг език, например може да е скриптовият език Python, Ruby и др.
Препоръчително е винаги да задавате стойността на атрибута действие. Ако формулярът трябва да предава стойности на същата страница, където се намира, предоставете празен низ като стойност на атрибута за действие: action="".
атрибут на метода
Атрибут методопределя как информацията трябва да бъде прехвърлена към сървъра. Избраният от вас метод за подаване на формуляр зависи от данните, които искате да изпратите с формуляра. Обемът на тези данни играе важна роля тук. Най-популярните са два метода за прехвърляне на изходните данни на вашия формуляр от браузъра към сървъра: ВЗЕМЕТЕИ ПУБЛИКУВАНЕ. Методът може да бъде зададен на който и да е избран и ако не го посочите, ще се използва стандартният ВЗЕМЕТЕ. Нека разгледаме използването на всеки от тях.
POST метод
Метод ПУБЛИКУВАНЕпакетите формират данни и ги изпращат на сървъра, без потребителят да забележи, тъй като данните се съдържат в тялото на съобщението. Уеб браузър, когато използвате метода ПУБЛИКУВАНЕизпраща заявка до сървъра, състояща се от специални заглавки, последвани от данни от формуляра. Тъй като съдържанието на тази заявка е достъпно само за сървъра, методът ПУБЛИКУВАНЕизползвани за предаване на поверителни данни като пароли, данни за банкови карти и друга лична информация на потребителите. Метод ПУБЛИКУВАНЕподходящ и за изпращане на големи обеми информация, тъй като за разлика от метода ВЗЕМЕТЕ, няма ограничения за броя на предаваните знаци.
GET метод
Както вече знаете, основната задача на браузъра е да получава уеб страници от сървъра. Така че, когато използвате метода ВЗЕМЕТЕ, вашият браузър просто извлича уеб страницата, както винаги. Метод ВЗЕМЕТЕсъщо обвива данните от формуляра, но ги добавя към края на URL адреса, преди да изпрати заявката до сървъра. За да разберете как работи методът ВЗЕМЕТЕ, нека го видим в действие. Отворете първия пример от този урок (Пример: Проста HTML форма) в Notepad (например Notepad++) и направете малка промяна в HTML кода:
Атрибути
Задава кодирането, в което сървърът може да получава и обработва данни. Адресът на програмата или документа, който обработва данните от формуляра. Разрешава автоматично попълване на полетата на формуляра. Методът за кодиране на данните от формуляра. Метод на HTTP протокол. Име на формуляра. Отменя вградената проверка на данните от формуляра за коректност на въвеждането. Името на прозореца или рамката, където манипулаторът ще зареди върнатия резултат.Затварящ етикет
Задължително.
HTML5 IE Cr Op Sa Fx
Резултатът от този пример е показан на фиг. 1.
Ориз. 1. Изглед на елементи на формуляр в прозорец на браузър
HTML тагове, които дефинират HTML форми на сайта
Създаваме сайтове и отделни страници в Интернетза комуникация с посетителите.
HTML формисе използват за регистриране на посетители на сайта, за интерактивни проучвания и гласуване, позволяват ви да изпращате съобщения, да правите покупки и т.н. HTMLФормулярът е създаден с една цел: събиране и последващо предаване на информация за обработка чрез софтуерен скрипт или по имейл.
Примерен HTML формуляр | Влезте в сайта
Тагове, атрибути и стойности
- - определяне на формата.
- name="" - определя името на формата.
- method="" - определя метода за изпращане на данни от формата. Стойности: "get" (по подразбиране) и "post" . Методът "post" често се използва, тъй като позволява прехвърлянето на големи количества данни.
- action="" - дефинира url адреса, на който се изпращат данните за обработка. В нашия случай - enter_data.php ..
- - дефинирайте такива елементи на формата като бутони, превключватели, текстови полета за въвеждане на данни.
- type="text" - определя текстово поле за въвеждане на данни.
- type="password" - дефинира поле за въвеждане на парола, като текстът се показва под формата на звездички или кръгчета.
- type="checkbox" - дефинира радио бутон.
- type="hidden" - дефинира скрит елемент от формата - използва се за прехвърляне на допълнителна информация към сървъра.
- size="25" - дължина на текстовото поле в символи.
- maxlength="30" - максимално допустимият брой въведени символи.
- value="" - дефинира стойността, която ще бъде изпратена за обработка, ако се отнася до радио бутони или превключватели. Стойността на този атрибут като част от текстово поле или бутон ще бъде показана като например Vasya или Login в примера по-горе.
Примерен HTML формуляр | Коментари в сайта
|
|