Създаване и работа с формуляри в html. Създаване на формуляр в HTML Select, Option, Textarea, Label, Fieldset, Legend - падащи списъци, текстови области и други елементи на уеб формуляр

Признаци на бременност след имплантиране на ембрион

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

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

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

Възможно е също така да посочите CSS клас, вместо да използвате ID за стилизиране на падащия списък.

В следващия раздел ще покажа примери за използване на HTML падащ списък в JavaScript/JQuery. Примерите също ще ви покажат как да задавате стилове

Използване на атрибута стойност

Както бе споменато по-рано, стойността на атрибута value може да се различава от текста, показан на страницата. Например, можете да показвате имената на държавите или цветовете за потребителите и да използвате кратки кодове в атрибута стойност.

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

Вижте онлайн демонстрация и код

За етикет

Пример за достъп до избраната опция в JavaScript

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

Вижте онлайн демонстрация и код

За стойност на опция HTML се използва следният код:

Следният ред код се използва в JavaScript за достъп до стойността на атрибута стойност на опция значението е различно от текста. След като изберете цвят, jQuery показва видимия текст в предупреждението. Код на етикета

Ето как да получите достъп до тази стойност в Избрана опция за избор на HTML JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Можете също да получите достъп до стойността, като използвате метода JQuery $.val():

var selectedcolor = $("#jqueryselect").val();

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

Пример за получаване на стойност в PHP скрипт

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

И ето как PHP скриптът се използва за получаване на стойността на опцията за избор на HTML:

". $_POST["selfphp"].""; } ?>

Ако формулярът показва GET метод, след това използвайте PHP масив $_GET[“”].

Оформяне на падащ списък с CSS

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

  • type="text" - определя текстово поле за въвеждане на данни.
  • type="password" - дефинира поле за въвеждане на парола, като текстът се показва под формата на звездички или кръгчета.
  • type="checkbox" - дефинира радио бутон.
  • type="hidden" - дефинира скрит елемент от формата - използва се за прехвърляне на допълнителна информация към сървъра.
  • size="25" - дължина на текстовото поле в символи.
  • maxlength="30" - максимално допустимият брой въведени символи.
  • value="" - дефинира стойността, която ще бъде изпратена за обработка, ако се отнася до радио бутони или превключватели. Стойността на този атрибут като част от текстово поле или бутон ще бъде показана като например Vasya или Login в примера по-горе.

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

    <a href="https://skillmaker.ru/bg/news/rassuzhdeniya-o-semantike-koda-html-s-primerami-rassuzhdeniya-o-semantike-koda/">Примерен HTML</a>форми




    Име



    поща

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

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

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

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

    HTML форми

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

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

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

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

    Първа позиция Втора позиция Трета позиция Четвърта позиция

    HTML форми

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

  • type="submit" - дефинира бутон.
  • type="reset" - дефинира бутон за нулиране.
  • value="" - определя етикета на бутона.

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

    Благодарение на етикета трябва да се постави във формуляра (таг

    ). По-долу е даден пример:




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

    Етикет







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




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








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

    Тагът за избор и създаване на падащ списък

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

    Изберете животно

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

    Списъкът в html може да бъде нормален или с избор. За да направите възможно избирането на множество елементи, трябва да добавите празен множествен атрибут за избор. За да изберете няколко стойности, задръжте ctrlи натиснете левия бутон на мишката.

    Друг полезен атрибут е размерът. Тя ви позволява да изберете колко реда да се показват в падащия списък.

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

    Задължително – атрибут html5. Ако е зададено, формулярът няма да бъде изпратен, без да изберете стойност от падащия списък. Като цяло става задължителен избор. Докато атрибутът не работи във всички браузъри.

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

    Всъщност select служи само като контейнер за самите елементи от списъка, като се използва етикетът option. Той има стойностен параметър, както вече разбрахме, но освен него има и други. Например:
    Деактивирано – прави елемента от списъка недостъпен за избор. Ще се покаже, но не можете да щракнете върху него.

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

    Важно пояснение за правилна работа

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

    За какво се използва select?

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

    По подразбиране, когато щракнете върху списък, се появява синя рамка; тези елементи от списъка, върху които е поставен курсорът, се маркират със същия цвят. За да предотвратите появата на рамката при щракване или да бъде маркирана в различен цвят, можете да напишете следния селектор:

    Изберете: фокус (
    контур: 1px плътно оранжево;
    }

    Сега рамката ще бъде оранжева.

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

    опция(
    цвят: кафяв;
    фон: аква;
    }

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

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

    Точно затова трябва да използвате програмиране, а именно цикъл. Е, добре, това е тема за друг разговор, но за днес това е цялата информация, която исках да ви кажа. Можете да се запознаете с други основни тагове в html.

    Описание

    HTML таг може да съдържа два или повече етикета

    Ширината на падащото меню ще се определя от най-дългия текст, посочен в тага

    Атрибути

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

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

    Име: Определя името на падащия списък. Може да се използва за достъп до данните на формуляра, след като са били изпратени, или за препратка към елемент в JavaScript. размер: Указва броя на видимите опции в падащия списък. Ако стойността на атрибута size е по-голяма от 1, но по-малка от общия брой опции в списъка, тогава браузърът автоматично ще добави лента за превъртане, за да покаже, че има още опции за преглед.

    Публикации по темата