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="" - определя стойността, която ще бъде изпратена за обработка, ако се отнася до радио бутони или радио бутони. Стойността на този атрибут като част от текстово поле или бутон ще бъде показана като, например, John или Login в примера по-горе.

Примерен HTML формуляр | Коментари в сайта

Тагове, атрибути и стойности

• action="http://site/comments.php" - определя url, на който ще се изпращат данните от формата.
• id="" - определя името, идентификатора на елемента от формата.
• name="" - определя името на елемента от формата.
• - дефиниране на текстово поле във формата.
• cols="" - определя броя на колоните на текстовото поле на формата.
• rows="" - Указва броя на редовете за текстовото поле на формуляра.

Ако между постави текст, той ще бъде показан в полето като пример, който лесно се премахва.

Примерен HTML формуляр | Падащ списък

Тагове, атрибути и стойности

• - дефинирайте списък с елементи, от които да избирате.
• size="" - определя броя на видимите позиции в списъка. Ако стойността е 1, имаме работа с падащ списък.
• - дефиниране на позиции (точки) от списъка.
• value="" - съдържа стойността, която ще бъде изпратена от формуляра до посочения url за обработка.
• selected="selected" - избира елемента от списъка като пример.

Примерен HTML формуляр | Списък с лента за превъртане

Чрез увеличаване на стойността на атрибута size="" получаваме списък с лента за превъртане:

За тази опция използваме флага multiple="multiple", който прави възможно избирането на множество елементи. Липсата му ви позволява да изберете само един елемент.

Вижте допълнително:

Поздрави, скъпи читатели на сайта на блога. Днес искам да говоря за неща като HTML формуляри. Каквато и да е машината на вашия сайт (cms), той определено ще използва формуляри, създадени с помощта на таговете Form и Input, както и атрибутите и параметрите Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

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

Защо са необходими формуляри и как работят в съвременните сайтове

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

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

Да, искам също да ви напомня, че вече успяхме да разгледаме много материали по темата за езика за маркиране на хипертекст, например три ) и .

В основата си формулярите се състоят от елементи, за създаването на които се вмъкват различни тагове от таговете на формуляра вътре в основния контейнер - Checked, Value, Checkbox, Radio, Checkbox, Submit и т.н. Просто трябва да поставим неговия код на всяко удобно място за този шаблон на сайт, като указва как трябва да изглежда с помощта на тагове и техните атрибути.

Това може да бъде текстово поле с бутон за изпращане за въведената заявка, избор на радио бутон (където можете да оставите натиснат само един от предоставените бутони), множество текстови полета с бутон за изпращане () и др.

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

Например в случая обратна връзкапотребителят, след като попълни полето с името си, въведе своя E-mail и текст на съобщението и след това щракне върху бутона за изпращане, ще има право да се надява да изпрати данните от формата на E-mail на сайта автор. Но да се приложи това, като се използва само един език за маркиране на хипертекст (), за съжаление, не е възможно.

За тези цели е необходима специална програма за обработка, която, след като потребителят щракне върху бутона за изпращане, ще вземе всички данни от полетата за обратна връзка и ще ги изпрати на собственика на ресурса по имейл. Коя програма ще направи това, трябва да посочите сами чрез атрибута Action.

Обикновено програмата за обработка е написан скрипт PHP език. Следователно в атрибута Action на етикета Form ще трябва да посочите пътя до файла на този скрипт, разположен на сървъра на вашия хостинг. Ще дам за пример абонамент за RSS каналмоя блог чрез имейл:

Малко неясно вероятно изглежда в началото, но мисля, че всичко ще стане по-ясно с напредването на историята.

Тагове за формуляр и въвеждане за създаване на бутони, полета за отметка и радио бутони

Всяка форма трябва да бъде затворена в отварящи и затварящи тагове форма. Това е един вид контейнер за тяхното създаване. Този етикет има редица задължителни и незадължителни атрибути:

1. Име - уникално име, което трябва да бъде посочено, ако html файлкъдето правите нещо, ще се използват множество уеб формуляри
2. Действие - задължителен атрибут, указващ пътя до скрипта, към който ще бъдат прехвърлени данните от него за по-нататъшна обработка
3. Метод - като го използвате, можете да промените метода за предаване на данни от този уеб формуляр към файловия скрипт на манипулатора. Ако не го посочите, по подразбиране ще бъде get метод, който всъщност е предназначен главно за променливи и кратки съобщения и освен това отворен пътпредаване на данни адресна лентабраузър. За да предадете данни от формуляр към скрипта на манипулатора, все още е по-добре да използвате POST метод, предназначен специално за прехвърляне на текстови съобщения по затворен начин

Нека да разгледаме останалите тагове, които ви позволяват да създавате различни уеб формуляри. Най-универсалният е Вход. Вътре в него трябва да бъде записан атрибутът Type, който определя каква точно ще бъде HTML формата, създадена с този таг.

С Input and Type можете да създадете следните елементи:

1. едноредови текстови полета (Type="Text")
2. полета за парола (Type="Password")
3. квадратчета за отметка (Type="Checkbox")
4. радио бутони (Type="Radio")
5. скрити полета (Type="Hidden")
6. обикновени бутони (Type="Button")
7. бутони за подаване на данни към манипулатора (Type="Submit")
8. бутони, за да доведете уеб формуляра Първоначално състояние(Напишете = "Нулиране")
9. полета за качване на файлове на сървъра (Type="File)
10. бутони за изображения (Type="Image")

Въведеното няма затварящ етикет. Каква точно ще бъде създадената с него уеб форма зависи изцяло от зададения параметър в атрибута Type. Ако Типът не е зададен, по подразбиране ще бъде създадено текстово поле.

Примери за формуляри, създадени на Input с различни стойности за Type

Други атрибути на входния таг и примери за тяхното използване

Помислете за какво служат останалите атрибути:

1. Име – ако данните трябва да бъдат изпратени до скрипта на програмата за манипулиране, тогава трябва да посочите параметър за атрибута Име. Под това име данните, подадени от формуляра, ще се показват в програмата за обработка на информация.
2. Размер - с него се задава размерът на полето на създадената уеб форма. Стойността е посочена в броя знаци, които могат да се поберат в това поле. Ако размерът не е зададен, ширината по подразбиране ще бъде 24 знака.
3. Maxlength - по подразбиране броят знаци, които могат да бъдат въведени в Html формата, не е ограничен, но с помощта на Maxlength можете да зададете това ограничение. Повече знаци, отколкото ще бъдат посочени, няма да можете да въведете в полето
4. Стойност - с нея можете да зададете какво точно да се изписва по подразбиране в полето или на бутона за изпращане на данни
5. Отметнато е атрибут на флаг, който може да бъде вмъкнат във входа за радио бутони (радио) или за квадратчета за отметка (чекбокс). В този случай този бутон за избор или отметка ще бъде активен, когато страницата с уеб формуляра се зареди (те вече ще имат отметка)

Сега нека разгледаме всичко формирайте примери с Input. Външният вид на текстовото поле е подобен на външния вид на полето за парола, така че ще разгледаме само опцията за създаване на текст, например за въвеждане на имейл адрес:

Сега нека да разгледаме създаването на уеб формуляр с радио бутони (радио):

Обърнете внимание, че този формуляр използва етикета за въвеждане два пъти, веднъж за създаване на всеки от двата радио бутона. Освен това всеки от тях има атрибут Name с еднаква стойност (resultat), а стойността Value е различна (YES и NO).

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

Разгледайте примера за създаване на уеб формуляр с квадратчета за отметка (поле за отметка):

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

Избор, опция, текстово поле, етикет, набор от полета, легенда - падащи списъци, текстови области и други елементи на уеб формуляр

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

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

Освен това всички негови съставни елементи (като Select, Option, Textarea, Label, Fieldset, Legend) вече са готови заготовки (контейнери), за вмъкване на които ще бъде достатъчно просто да използвате желания етикет с необходимите атрибути и параметри.

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

Че. Оказва се, че уеб формулярите в Html са опит за прехвърляне на ключ елементи, използвани във всяка операционна система, към страниците на уебсайта. Но защо може да са необходими на страниците на сайта?

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

Въпреки това, данните могат да се изпращат не само до сървъра, но и, например, по електронна поща на адреса, посочен в атрибута Action на етикета Form. При изпращане на данни от Html към имейл, потребителят, който попълва полетата, след като щракне върху бутона за изпращане на данни, ще стартира пощенска програмаизползвани на неговия компютър по подразбиране.

Отварящият таг Form трябва да изглежда така:

Select и Option са падащи тагове

Всички елементи на webform, които създават полета с падащи списъци, се формират по същия начин. Първо, контейнерът на комбинираното поле се дефинира с помощта на отварящите и затварящите Html Select тагове. И след това, вътре в този контейнер, се създават отделни контейнери с елементи (елементи) от този списък. Това става с отварящи и затварящи тагове Option.

Оказва се нещо подобно:

Но това е опростен дизайн, т.к Select и Option имат редица атрибути, които определят свойства и външен видполе за падащ списък, което трябва да бъде създадено.

1. Име - Трябва да предоставите уникално име за този елемент на уеб формуляр, създаден с помощта на Select. Това име ще бъде предадено на сървъра в програмата за обработка на данни като име за променливата. Стойността на атрибута Value (зададена в Option за всеки елемент) на елемента от падащия списък, който потребителят избира, ще бъде предадена като стойност на тази променлива.
2. Размер - с него можете да зададете броя на показваните артикули. С други думи, като използвате Размер, можете да зададете височината на списъка, измерена в броя на показаните редове. Ако не посочите изрично стойността на размера в тага Избор, тогава ще се използва височината по подразбиране на падащия списък, докато тя ще бъде различна при отсъствието или присъствието на атрибута Множество в Избор:
   1. Ако Multiple присъства в Select, тогава височината на падащия списък в уеб формуляра по подразбиране ще бъде равна на броя на неговите елементи. Тези. ще бъдат показани всички елементи в падащия списък с множество избори. Вижте примера за множествено число по-долу. Ако атрибутът Размер в Избор е зададен на по-малко от броя на елементите, тогава вдясно ще се появи лента за превъртане.
   2. Ако няма Multiple в Select, тогава височината на падащия списък в уеб формуляра по подразбиране ще бъде един ред. Тези. само един ред ще бъде видим, а останалите елементи ще бъдат достъпни само чрез натискане на бутона на асансьора (вдясно). Вижте примера по-долу
3. Множество - присвояването на този атрибут на тага Select ще ви позволи да създадете падащ списък с възможност за избиране на няколко елемента едновременно. Прочетете повече за този атрибут по-долу.

Формулярите с падащи списъци могат да бъдат разделени на две опции. При първата опция можете да изберете само един елемент (ред) от полето с падащ списък, при втората опция, като задържите Ctrl или Shift, можете да изберете няколко от наличните елементи едновременно.

В този случай, във втората опция, данните за всички избрани точки ще бъдат изпратени на сървъра. Кой падащ списък ще бъде създаден се определя от наличието или отсъствието на атрибута Multiple в тага Select.

Множество е указано в Select без параметър, защото пише се просто Multiple и това е. Ако е налице, ще бъде създаден уеб формуляр с падащ списък с опция за множествен избор (задържане на Ctrl или Shift).

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

Вдясно е пример за уеб формуляр с падащ списък с множество избори, базиран на кода по-горе. Както можете да видите, задържането на Ctrl или Shift може да избере няколко елемента едновременно.

Ако в тага Select няма атрибут Multiple, тогава може да бъде избран само един елемент от този падащ списък (ред).

Пример, при който може да бъде избран само един елемент, можете да видите тук:

Етикет Изберете SelectED Легенда за уебсайт

Атрибути на етикета за опции

В създадения падащ списък (с помощта на Select и Option) можете да добавите нещо като разделители към заглавието на групата, което ще се различава от останалите елементи на менюто по стил на шрифта.

За да създадете група от елементи от падащ списък, трябва да ги оградите в отварящия и затварящия тагове на формуляра Optgroup, а в отварящия таг Optgroup да посочите атрибута Label, като параметър на който ще трябва да въведете име на желаната група.

Например така:

Избор на етикет
Легенда на избрания уебсайт на ED

Textarea - създаване на текстово поле във форма

Има още един елемент на уеб формуляр, който не сме разгледали - Textarea (поле с възможност за въвеждане многоредов текст). Създаден е с помощта на сдвоен HtmlТаг за текстово поле. Освен това в него можете да прехвърляте текст към нова линияи ще бъде прехвърлен към сървъра, като се вземат предвид направените трансфери.

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

Какво можете да кажете за себе си?

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

Но как да се връзвам HTML елементформи и текст? За да направите това, трябва да добавите ID с уникален параметър към атрибута, а текстът трябва да бъде заобиколен от отварящи и затварящи тагове Label. И това не е всичко. В отварящия таг Label трябва да напишете атрибута For, чийто параметър трябва да е точно същият като атрибута ID в Html тага на елемента на формуляра. Оказва се нещо подобно:

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

Fieldset и Legend - разделяне на формата на части

Вероятно често сте виждали, че големите формуляри в Html са разделени на групи (Fieldset), които са оградени в рамка и всяка такава група има свой собствен хедър (Legend). Това се реализира само с помощта на два тагова: Fieldset и Legend. Те са сдвоени, т.е. трябва да имат отваряне и затваряне.

Така че, за да създадете група от съставни частитрябва да затворите всички тези части в отварящи и затварящи тагове Fieldset. И за да зададете заглавие (Легенда) за тази група, трябва веднага след началния Fieldset да напишете конструкция от началната и затварящата легенда, между които трябва да вмъкнете текста на заглавието на групата.

Ето пример за създаване на групи с помощта на Fieldset и Legend:

Късмет! Ще се видим скоро на сайта на страниците на блога

Може да се интересувате

Избор, Опция, Текстово поле, Етикет, Набор полета, Легенда - HTML таговепадащи и текстови форми
Оферти в html код- UL, OL, LI и DL тагове
MailTo - какво е това и как да създадете имейл връзка в Html
Как се задават цветовете в Html и CSS кода, избор на RGB нюанси в таблици, резултати от Yandex и други програми
Какво е Html Hypertext Markup Language и как да изброите всички тагове в W3C валидатора
Как да поставите HTML връзкаи картинка (снимка) - IMG и A тагове
Таблици в Html - тагове Table, Tr и Td, както и Colspan, Cellpadding, Cellspacing и Rowspan за създаването им
Шрифтът (лице, размер и цвят), Blockquote и Pre етикетите са наследено форматиране на текст в чист HTML (без Използване на CSS)
Как да създадете хипервръзка (A, Href, Target blank), как да я отворите в нов прозорец на сайта и също така да направите изображение връзка в Html код

Благодарение на етикета стана възможно създаването на падащ списък и списък с множествен избор. Ако ще изпращате данни към сървъра, тогава етикетът трябва да се постави във форма (таг

Какви са атрибутите на маркера за избор?

Етикет има три полезни атрибута (няма да разглеждаме останалите, вече говорих за тях). Първият атрибут е множествен, благодарение на който можете да направите възможно избирането на множество елементи от списъка. За да изберете няколко елемента, трябва да задържите shift или ctr и да щракнете върху желаните елементи с мишката. Следва пример за използване на множествения атрибут:

Какви имена харесвате?
Нито един
Иван
Петър
Никола

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

Третият атрибут е size, който може да се използва за указване на броя елементи от списъка за показване. Атрибутът size може да съдържа само цяло число. Атрибутът size трансформира списъка, например, ако е равен на 1, тогава етикетът се показва като „падащ списък“ и ако атрибутът size е по-голям от 1, тогава падащият списък се показва като „превъртащ се списък“. Ето два примера за използване на атрибута размер:

Да или не?
да
Не

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

Днес ще разгледаме най-простият начинсъздаване на скрити блокове със съдържание на страниците на сайта и в отделни съобщения, които се отварят, когато щракнете върху определен елемент от текста, като използвате само CSS3 свойства. Като превключвател може да служи една дума, избрана фраза, цяло изречение или информативна икона.
Такива блокове често се използват на страници с голямо количество съдържание, за да го направят по-структурирано и компактно, докато цялото съдържание е разделено на така наречените групи, в които само заглавията се представят на потребителя, целият текст е скрит от по подразбиране и може да се види, като щракнете върху конкретен елемент (вижте по-горе).

Нека се опитаме да се справим без излишната вода, да разгледаме целия този прост механизъм в действие, нататък добър пример, можете също да редактирате нещо, ако желаете:

Пример #1

В ролята на превключватели на падащи блокове с Допълнителна информацияне се използва подчертан или маркиран текст, с недвусмислено предложение да кликнете върху него, което трябва да направите без страх и съмнение, за да видите)))

Както можете да видите, всичко работи повече от добре, скритото съдържание се появява без проблеми и изчезва с леко щракване на мишката, като в същото време използвахме минималния изпълним код, както в html рамката, така и във формацията на css стилове. Без връзка допълнителен javascriptбиблиотеки, с вечно безпокойство и дали са деактивирани от страна на потребителя.
За да се приложи цялото това действие, стана възможно благодарение на псевдокласа CSS3 :провереноприложен към интерфейсни елементи като радио бутони (). Какво всъщност направихме, в етикета присвоихме на атрибута type стойността на квадратчето за отметка, както и идентификатора id="hd-1", съответстващ на уникалния идентификатор за = "hd-1"превключване на текущия блок. Нека скрием квадратчетата за отметка напълно и завинаги, като настроим свойството display: none в класа .hide;
Всъщност тук няма какво специално да се обяснява, целият механизъм за включване и изключване на скрити блокове се състои от три елемента:

• Checkbox - таг със смисъл отметкаатрибут Типи със специфичен идентификатор за свързване
• Заглавие (текст радио бутон) - етикет с уникална идентификаторна стойност за атрибута за, (идентификаторът трябва да е същият като идентификатора на етикета входсъс смисъл отметкаатрибут Тип).
• Блокът за съдържание е div таг, който ще съдържа различно скрито съдържание (текст, изображения и т.н. и т.н.) до по-добри времена, докато потребителят щракне.

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

От всичко това следва важна забележка:

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

И така, с думи, ние подредихме какво отива къде и защо, сега нека да разгледаме html-рамката на цялата структура:

Щракнете тук, за да отворите!

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

1. CSS

/* скриване на квадратчета за отметка и блокове със съдържание */ .hide, .hide + label ~ div ( display: none; ) /* изглед на текст на етикет */ .hide + label, .hide:checked + label ( padding: 0; цвят: зелен ; курсор: показалец; border-bottom: 1px пунктирано зелено; ) /* изглед на текст на етикета, когато бутонът за избор е активен */ .hide:checked + label (цвят: червен; border-bottom: 0; ) /* показване на квадратчета при отметка е активен със съдържание */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; кутия-сянка: вмъкване 3px 3px 10px #7d8e8f; подложка: 10px; )

Всичко това за аскетичен пример е достатъчен минимум. Но в края на краищата ние изобщо няма да сме ние, ако не окачим поне някои екстри и е по-добре потребителят визуално да предложи къде да щракне.
Във втория пример добавих прост символ под формата на плюс, който ясно показва, че тук е скрито нещо друго, при натискане моментално се превръща в минус, а за скрити блокове със съдържание прецаках малко анимация, когато те се появяват и всичко това изключително с помощта на CSS3 магия.

2. CSS

/* скриване на квадратчета за отметка и блокове със съдържание */ .hide, .hide + label ~ div ( display: none; ) /* изглед на текст на етикет */ .hide + label ( марж: 0; padding: 0; цвят: зелен; курсор: показалец; дисплей: inline-block; ) /* изглед на текст на етикета, когато радио бутонът е активен */ .hide:checked + етикет (цвят: червен; border-bottom: 0; ) /* когато квадратчето за отметка е активно, показва блокове със съдържание */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box- сянка: вмъкване 3px 3px 10px #7d8e8f; margin-left: 20px; padding: 10px; /* малка анимация, когато се появи */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease-in 0,5s; анимация: леко избледняване 0,5s; ) /* анимация, когато се появят скрити блокове */ @-moz-keyframes избледняват (от (непрозрачност: 0; ) до (непрозрачност: 1)) @-webkit-keyframes избледняват ( от (непрозрачност: 0;) до (непрозрачност: 1)) @ключовите рамки избледняват (от (непрозрачност: 0;) до (непрозрачност: 1 ) ) .hide + label:before ( цвят на фона: #1e90ff; цвят: #fff; съдържание: "\002B"; дисплей:блок; поплавък: наляво; размер на шрифта: 14px; тегло на шрифта: удебелен; височина: 16px; височина на реда: 16px; поле: 3px 5px; подравняване на текст: център; ширина: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; радиус на границата: 50% ) .hide:checked + label:before ( съдържание: "\2212"; )

По всичко личи, че методът несъмнено е добър, но както винаги, дори не е изненадващо, възникват проблеми с вечната спирачка на прогреса, IE браузъра, псевдокласа провереноподдържа само 9-та и по-нова версия на този браузър. За по-старите версии на IE е същото като преди, трябва да използвате javascript.

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

С цялото си уважение, Андрю

Атрибути на формуляра:

• Атрибутът за действие указва сървърен файлсъс скрипт, отговорен за основната обработка на данните, изпратени от формата. Обикновено кодът за този файл е написан на език за програмиране от страна на сървъра, като напр phpили perl.
• Атрибутът enctype показва вида на информацията, изпратена до сървъра, ако това са само текстови данни - text/plain, ако файловете се изпращат с формуляра, тогава трябва да се посочи multipart/form-data.
• Атрибутът на метода указва и дефинира формата на трансфер на данни. Няма да се спираме на това подробно, но трябва да се каже, че за по-надежден трансфер трябва да се посочи методът на пощата.

елементи на html форма

<тип вход = "текст" име = "вход" размер = "20" стойност = "(!LANG:Вход" maxlength = "25" > !}

Резултат:

• Стойността на атрибута type - text - показва, че това е текстово поле
• размер - размерът на текстовото поле в символи
• maxlength - максималният брой символи, които се побират в полето
• стойност - началният текст в текстовото поле
• име - името на елемента, необходимо за обработка на данни във файла манипулатор

Резултат:


Вместо текст в полето се показва маска - звездички или кръгчета

<входен тип="изпращане" стойност= „Изпращане на данни“>

Резултат:

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

<input type = "reset" value = "(!LANG:Clear form" > !}

Резултат:

Бутонът връща състоянието на всички контроли към оригинала (изчиства формуляра)

<input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <тип вход = "кутия за отметка" име = "js" стойност = "(!LANG:да" checked = "checked" > !} javascript<br > <тип вход = "кутия за отметка" име = "php" стойност = "(!LANG:да" > !} PHP<br > <input type = "checkbox" name = "html" value = "(!LANG:yes" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML



Резултат:

A.S.P.
javascript
PHP
HTML

В html поле за отметка се използва за организиране на множествен избор, т.е. когато е необходимо и възможно да изберете няколко отговора

<тип вход = "радио" име = "книга" стойност = "(!LANG:asp" > !} A.S.P.<br > <тип вход = "радио" име = "книга" стойност = "(!LANG:js" > !} javascript<br > <тип вход = "радио" име = "книга" стойност = "(!LANG:php" > !} PHP<br > <входен тип = "радио" име = "книга" стойност = "(!LANG:html" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




Резултат:

A.S.P.
javascript
PHP
HTML

бутон за избор html служи за един избор от множество опции

Атрибутът checked незабавно настройва елемента като checked

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

HTML падащ списък

Помислете за пример за добавяне на падащ списък:

A.S.P. JavaScript PHP HTML

Резултат:

• Падащият списък се състои от главния таг - select - който има затваряща двойка, а всеки елемент от списъка е таг с опции, вътре в който се показва текстът на елемента
• размер атрибут със стойност "един"показва, че списъкът в свита форма показва един елемент, а останалите се отварят, когато щракнете върху стрелката на менюто
• Избраният атрибут на елемента (опция) показва, че този конкретен елемент ще бъде първоначално видим, а останалите елементи са „свити“

За големи и сложни списъци има опция добавете субтитри- таг optgroup с атрибут label (надпис):

A.S.P. JavaScript PHP HTML ASP на руски JavaScript на руски

Да предостави възможност изберете няколко елемента едновременнотрябва да добавите множествения атрибут. Но в този случай атрибутът size също трябва да бъде зададен на стойност, по-голяма от 1:

Текст

Резултат:

• Ширината на елемент зависи от атрибута cols, който указва колко знака се побират хоризонтално.
• Атрибутът rows указва броя на редовете в даден елемент.

Други елементи

Допълнителни елементи и атрибути

• За контроли радиои отметкаудобно е да използвате допълнителни елементи, които, първо, правят текста закотвен към самия елемент на радиото или полето за отметка и второ, добавят черта при щракване:

<input type="checkbox" id="book1"> <етикет за = "book1"> A.S.P.</етикет>

A.S.P.

В примера е създаден етикет (таг за етикет) за елемента на квадратчето за отметка. Свързването се извършва чрез атрибута id, чиято стойност е посочена в атрибута for на етикета.

Резултат:



• Атрибутът disabled ви позволява да деактивирате елемент, което го прави нередактиран от потребителя:

<тип вход = "текст" име = "вход" размер = "20" стойност = "(!LANG:Вход" maxlength = "25" disabled = "disabled" >!} <input type = "checkbox" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <тип вход = "кутия за отметка" име = "js" стойност = "(!LANG:да" checked = "checked" disabled = "disabled" > !} javascript<br >


A.S.P.
javascript