HTML формуляри. Етикети за полетата на формуляра. Пример: Обикновен HTML формуляр

Оставете коментар 6,950

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

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

Не всички браузъри поддържат типовете, добавени в HTML5.
Ако браузърът не поддържа един от новите типове, той ще приеме, че това е . Как да организирате поддръжка за по-стари браузъри е описано с помощта на примера за дата.

Autocomplete="off" Деактивира автоматичното довършване за това поле. Много полезно за полета за въвеждане на еднократен код, captcha и др. .setAttribute("autocomplete","off"); автофокус Автоматично получава фокус, когато страницата се зареди. Стойността може да бъде зададена по три начина: ... ... ... Пример за емулиране на свойството автофокус за по-стари браузъри. disabled Прави елемента недостъпен. Недостъпните елементи не се изпращат на сървъра. име Име на поле. Всяко поле за въвеждане, което създавате, трябва да има свое собствено уникално име, в противен случай скриптът няма да определи към кои полета се прилагат получените стойности. Разбира се, името на полето за въвеждане трябва да съвпада с името, което е описано за него в обработващата програма. стойност Стойността по подразбиране на полето или етикета на бутона. size Размерът на полето тип. maxlength Ограничение на броя знаци, които могат да бъдат въведени в поле от тип. readonly="readonly" или "" Предотвратява модифицирането на елемента. задължително Автоматично проверява дали полето е попълнено.
За да маркирате правилно попълнено задължително поле, можете да използвате следната стилова конструкция: min Минимална числова стойност в полето тип номер. max Максимална числова стойност в поле за тип номер. стъпка Стъпка за промяна на номера в полето тип номер. шаблон Шаблон за поле за въвеждане. Проверка на коректността на въвеждане на данни. Примери за шаблони за шаблон за въвеждане на формуляр html5. placeholder Текст на подсказка в поле на формуляр, който изчезва автоматично, когато полето получи фокус.
Пример за настройка на стила на подсказката:

В IE и Firefox (до версия 18) контейнерсе счита за псевдоклас, а в останалите - за псевдоелемент.

РЕЗУЛТАТ:

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

Типове елементи INPUT

Бутон БУТОН

Бутон БУТОНе предназначен за онези случаи, когато трябва да изпълните някакъв скрипт. Тоест към бутона е прикачено събитие OnСlickи търсената функция се извиква. Атрибут стойностзадава етикета на бутона. Атрибут onclickуказва манипулатор на JavaScript, който се извиква при щракване върху бутона. Атрибут имеслужи за JavaScript именуване на бутона (не се предава на сървъра).

Пример

РЕЗУЛТАТ:

Бутон ИЗПРАЩАНЕ

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

Атрибут onclickза бутон ИЗПРАЩАНЕпрактически не се използва, тъй като е по-добре да се използва манипулатор на събития onsubmit, посочени в тага

. В крайна сметка, за да прехвърлите данните, въведени във формуляра, в общия случай изобщо не е необходимо да щракнете върху бутона ИЗПРАЩАНЕ. Можете просто да натиснете клавиш на клавиатурата ENTERдокато сте във всяко поле за въвеждане на текст. Това ще доведе до прехвърляне на данни.

Пример

РЕЗУЛТАТ:

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

Пример

РЕЗУЛТАТ:

Атрибут formnovalidateможе да се използва за предотвратяване на валидирането на стойности на формуляра.

Пример


РЕЗУЛТАТ:

Бутон за рестартиране

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

Съвет: Бъдете внимателни при избора на етикет на бутона НУЛИРАНЕ. Нещо като „Изчистване“, „Започнете отначало“, „Изтриване на въвеждане“ и т.н. би било доста ясно (и най-важното, интуитивно дори за манекените на манекените). Като цяло е необходимо потребителят да няма дори сянка на съмнение относно целта на този ключ.

Пример

РЕЗУЛТАТ:

Поле за въвеждане на ТЕКСТ

Полето за въвеждане на текст е най-често използваното поле за въвеждане във формуляри. Освен това, той с право може да се счита за основен и най-важен елемент на формулярите. Този тип се използва от етикета по подразбиране може да се пропусне, за да се покаже текстово поле. Въпреки това, ако има нужда от стилизиране на селектора вход, след това атрибута тип="текст"не може да се пропусне.
Име на поле, посочено от атрибута име, винаги се изисква, тъй като въз основа на този параметър браузърът предава двойката име=стойност към скрипта.

Пример

РЕЗУЛТАТ:

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

Поле за въвеждане на число NUMBER

Полето е предназначено за въвеждане на числа. При въвеждане дробната част може да бъде разделена или с точка (2.5), или със запетая (2.5). Ако потребителят въведе букви, формулярът няма да бъде изпратен до сървъра.

Пример

РЕЗУЛТАТ:

Можете да зададете минималните и максималните стойности на полето и стъпката на промяна на номера. Стойността на стъпката може да бъде положителна или отрицателна, но трябва да е по-голяма от 0. Ако числото, въведено в полето, не отговаря на посочените ограничения, тогава изпращането до сървъра няма да се извърши.

Пример

РЕЗУЛТАТ:

За да посочите която и да е стъпка, използвайте стъпка="всеки".

Пример

РЕЗУЛТАТ:

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

Парола

Скрито поле HIDDEN

Това е специален (скрит) тип текстово поле. Ако един скрипт обработва няколко различни формуляра, можете да посочите ID в скрито поле на всеки формуляр, за да идентифицирате с кой формуляр работите.

Пример
...Други елементи на формата....
...Други елементи на формата...

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

Пример

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

Полето за въвеждане на имейл адрес

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

Пример

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

Няколко изпращания в рамките на един формуляр

Доскоро можехте да вмъкнете само един бутон за изпращане във формуляр, в противен случай формулярът обработваше само последния бутон. Чрез добавяне на method="post" и url към елемента на формуляра "form" получихме работеща форма.

Сега ситуацията се промени - към HTML бяха добавени нови свойства "formmethod" и "formaction". Те ви позволяват да добавите метод за публикуване и url директно към бутона „изпращане“, така че не е необходимо да добавяте нищо към формуляра. Прикрепването на тези параметри към бутона „изпращане“, а не към формуляра, добавя повече гъвкавост към формуляра. Сега можете да направите толкова бутони, колкото са необходими за формата.

Сега всеки бутон „изпращане“ принадлежи на различни url адресии всичко това премахва необходимостта от писане javascript код. Всичко това работи добре и сега, когато щракнете върху бутон, формулярът ще получи formmethod и formation, които ще презапишат стандартния метод и параметри за действие. Ако формулярът съдържа обикновен бутон "изпращане" без нови параметри, той ще върне стойностите на формуляра, зададени за елемента на формуляра.

Свойствата formmethod и formaction се поддържат от всички популярни браузъри

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

Общоприет факт е, че всички елементи на една форма, които й принадлежат, трябва да се намират вътре в елемент

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

Днес атрибутът на формата се поддържа от всички популярни браузъри, с изключение на Internet Explorer (до версия 10).

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

Тук трябва да се отбележи, че самите HTML форми ви позволяват само да въвеждате информация, но HTML не може да я обработва (в края на краищата това е език за маркиране, а не език за програмиране). Езици като javascript, php и други се използват за обработка на информация.

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

И така, в html формаопределени от тагове

. Всички други елементи на формуляра са разположени между тези тагове.

На етикета

има няколко параметъра:

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

Текстово поле

Обикновено текстово поле от един ред, в което можете да въвеждате и редактирате текст. Задаване по етикет

Резултат:

Настроики:

  • име- име на елемента,
  • Тип- тип на елемента (в този случай - текст),
  • размер- размерът на текстовото поле в знаци, които ще се виждат едновременно, когато въведете повече знаци, те ще се превъртат;
  • максимална дължина - максимална сумазнаци, които могат да бъдат въведени в полето, ако пропуснете този параметър, броят на знаците ще бъде неограничен,
  • стойност- текстът, който ще се показва (може да се изтрие, ако този параметър липсва, полето ще бъде празно).
Възможни са още два варианта:
  • хора с увреждания- блокира полето от всякакви промени,
  • Само за четене- прави полето само за четене.
Пример:

Резултат:

Текстово поле за въвеждане на парола

Това е същото текстово поле като предишен елемент. Единствената разлика е, че текстът, който въвеждате, не се показва; вместо него се появяват специални знаци, като звездички. Най-често се използва при въвеждане на пароли. Всички параметри са същите като за обикновено текстово поле, с изключение на параметъра тип="парола".

Пример:

Въведете паролата:

Резултат:

Въведете паролата:
Опитайте да въведете нещо в това поле.

Квадратчета за отметка

Със сигурност сте виждали нещо подобно:

Какви езици говорите:
Английски Немски испански Френски

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

Пример:

Какви езици говорите:
Английски Немски испански Френски

Нека разгледаме неговите параметри:

  • Тип- тип елемент (в този случай поле за отметка),
  • име- име на елемент, показва на процесора за обработка на формуляри кой елемент е избрал потребителят,
  • стойност- стойност на елемента, показва на процесора на формуляра стойността на избрания от потребителя елемент. В нашия пример английският елемент е избран, следователно програмата за обработка ще получи: lan1="английски",
  • проверено- те обикновено маркират най-вероятните елементи, които трябва да бъдат избрани;

    Превключватели

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

    Моля, посочете вашия пол:
    мъжки женски пол

    Резултат:

    Моля, посочете вашия пол:
    мъжки женски пол

    Бутони

    Има четири вида бутони:

    • Изпращане- бутон за изпращане на съдържанието на формуляра към уеб сървъра. Параметрите му:
      • тип="изпращане"- тип бутон,
      • име- име на бутона,
      • стойност- надпис върху бутона.
    • изображение- графичен бутон за изпращане на съдържанието на формата към уеб сървъра. За да го използвате, трябва да подготвите изображение на бутон и след това да го използвате като бутон. Параметрите му:
      • тип="изображение"- тип графичен бутон,
      • име- име на бутона,
      • src- адрес на изображението за бутона.
    • нулиране- бутон, който ви позволява да възстановите всички стойности по подразбиране във формуляра. Параметрите му:
      • тип="нулиране"- тип бутон за изчистване,
      • име- име на бутона,
      • стойност- надпис върху бутона.
    • бутон- произволен бутон, действията му се задават от вас, т.е. Тя не знае как да направи нищо сама. Параметрите му:
      • тип="бутон"- тип персонализиран бутон,
      • име- име на бутона,
      • стойност- надпис върху бутона.
      • onclick- показва какво да се направи, когато се щракне върху бутона. По принцип този тип бутони имат и други събития (например двойно щракване), но няма да ги разглеждаме тук.
    Ако във формата има няколко бутона, те трябва да имат различни имена.

    Примерен код:

    Резултат:

    Бутоните могат да бъдат зададени по друг начин, като се използват тагове . Възможностите на такива бутони са малко по-широки, те могат да имат съдържание под формата на текст или снимки. Този етикет има следните параметри:

    • Тип- тип бутон, може да приема стойности:
      • нулиране- бутон за изчистване на формата,
      • Изпращане- бутон за изпращане на данни,
      • бутон- бутон за произволно действие.
    • име- име на бутона,
    • стойност- надпис върху бутона.
    Примерен код:
    Изпратете

    Резултат:

    Изпратете
  • физически- прехвърляне както на екрана, така и при пристигането на сървъра.
  • хора с увреждания- неактивно поле,
  • Само за четене- разрешено е само четене.
    • Пример:

    Резултат:

    Опитайте да въведете текст и вижте разликата в стойностите на параметрите обвивам.

    Падащи списъци

    Списъците могат да бъдат с единичен елемент или с множество избори. И двете ще бъдат засегнати с помощта на тагове , вътре в който се намират елементи от стойности, посочени от етикета . Нека да разгледаме параметрите на тези тагове:

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

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

      Ориз. 1. Подобрени уеб формуляри с HTML5

      Създаване на HTML5 формуляр

      1. Елемент

      Основата на всяка форма е елементът ...

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

      Таблица 1. Атрибути на тагове
      Атрибут Значение/Описание
      приемам-charset Стойността на атрибута е разделена с интервал списък с кодировки на знаци, който ще се използва за изпращане на формуляра, например, .
      действие Задължителен атрибут, който указва URL адреса на манипулатора на формуляра на сървъра, към който се изпращат данните. Това е файл (например action.php), който описва какво трябва да се направи с данните от формуляра. Ако стойността на атрибута не е посочена, след като страницата се презареди, елементите на формуляра ще приемат стойностите си по подразбиране.
      В случай, че цялата работа ще бъде извършена от страна на клиента JavaScript скриптове, тогава атрибутът за действие може да бъде зададен на #.
      Можете също така да организирате формуляра, попълнен от посетителя, да ви бъде изпратен по имейл. За да направите това, трябва да направите следния запис:
      автоматично довършване

      енктип Използва се за обозначаване MIME-тип на данните, изпратени заедно с формуляра, например enctype="multipart/form-data" . Посочва се само в случай на method="post" .
      application/x-www-form-urlencoded е типът съдържание по подразбиране, което показва, че предадените данни представляват списък от URL-кодирани променливи на формуляр. Знаците за интервал (ASCII 32) ще бъдат кодирани като +, а специален знак като ! ще бъде кодиран в шестнадесетичен като %21.
      multipart/form-data - използва се за изпращане на формуляри, съдържащи файлове, не-ASCII данни и двоични данни, състои се от няколко части, всяка от които представлява съдържанието на отделен елемент от формуляра.
      text/plain - показва, че се предава обикновен (не html) текст.
      метод Указва как се изпращат данните от формуляра.
      Методът get предава данни на сървъра през адресната лента на браузъра. Когато генерирате заявка към сървъра, всички променливи и техните стойности образуват последователност като www.anysite.ru/form.php?var1=1&var2=2 . Имената и стойностите на променливите добавени ли са към адреса на сървъра след знака? и са разделени с &. Всички специални символи и нелатински букви са кодирани във формат %nn, интервалът се заменя с +. Този метод трябва да се използва, ако не прехвърляте големи количества информация. Ако трябва да изпратите файл заедно с формуляра, този метод няма да работи.
      Методът post се използва за изпращане на големи количества данни, както и поверителна информация и пароли. Данните, изпратени чрез този метод, не се виждат в заглавката на URL адреса, защото се съдържат в тялото на съобщението.
      име Комплекти име на формуляр, който ще се използва за достъп до елементи на формуляр чрез скриптове, като например name="opros" .
      новалидирам Деактивира проверката в бутона за изпращане на формуляр. Атрибутът се използва без посочване на стойност
      мишена Указва прозореца, до който ще бъде изпратена информацията:
      _blank - нов прозорец
      _self - същата рамка
      _parent — родителска рамка (ако съществува, ако не, тогава към текущата)
      _top е прозорецът от най-високо ниво спрямо тази рамка. Ако повикването не идва от дъщерен кадър, тогава към същия кадър.

      2. Групиране на елементи от формата

      елемент

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

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

      . Името на групата се появява в лявата горна граница
      . Например, ако в елемент
      Информацията за контакт се съхранява:

      Информация за връзка


      Ориз. 2. Групиране на елементи на формуляр с помощта

      Таблица 2. Атрибути на тагове
      Атрибут Значение/Описание
      хора с увреждания Ако атрибутът присъства, тогава група от свързани елементи на формуляр, разположени вътре в контейнера
      , забранено за попълване и редактиране. Използва се за ограничаване на достъпа до определени полета на формуляр, съдържащи предварително въведени данни. Атрибутът се използва без посочване на стойност -
      .
      форма
      в същия документ. Показва една или повече форми, към които принадлежи тази групаелементи. Атрибутът в момента не се поддържа от нито един браузър.
      име Определя Име, който ще се използва за препращане към елементи в JavaScript или за препращане към данни от формуляр, след като формулярът бъде попълнен и изпратен. Той е аналогичен на атрибута id.

      3. Създайте полета на формуляр

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

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

      Таблица 3. Атрибути на тагове
      Атрибут Значение/Описание
      приемам Определя типа файл, разрешен за изпращане към сървъра. Посочва се само за . Възможни стойности:
      file_extension - позволява изтегляне на файлове с посоченото разширение, например accept=".gif" , accept=".pdf" , accept=".doc"
      audio/* - позволява изтегляне на аудио файлове
      video/* - позволява изтегляне на видео файлове
      image/* - позволява зареждане на изображения
      media_type - показва вида на носителя на изтеглените файлове.
      алт Определя алтернативен текстза изображения, посочени само за .
      автоматично довършване Отговаря за запомнянето на стойностите, въведени в текстовото поле, и автоматичното им заместване при следващото въвеждане:
      включено - означава, че полето не е защитено и стойността му може да се съхранява и извлича,
      изключено - деактивира автоматичното попълване за полетата на формуляра.
      автофокус Позволява ви да се уверите, че във формата за зареждане едно или друго поле за въвеждане вече има фокус (избрано е), като е готово за въвеждане на стойност.
      проверено Атрибутът проверява дали квадратчето за отметка по подразбиране е маркирано при зареждане на страницата за полета като type="checkbox" и type="radio".
      хора с увреждания
      форма Стойността на атрибута трябва да е равна на атрибута id на елемента в същия документ. Идентифицира един или повече формуляри, към които принадлежи това поле на формуляр.
      образуване Указва url на файла, който ще обработва данните, въведени в полетата при подаване на формуляра. Задайте само за полета type="submit" и type="image". Атрибутът заменя стойността на атрибута за действие на самия формуляр.
      formenctype Определя как ще бъдат кодирани данните от полетата на формуляра, когато бъдат изпратени до сървъра. Заменя стойността на атрибута enctype на формуляра. Задайте само за полета type="submit" и type="image". Настроики:
      application/-x-www-form-urlencoded е стойността по подразбиране. Всички знаци се кодират преди изпращане (интервалите се заменят със знака +, специалните знаци се преобразуват в ASCII HEX стойности)
      multipart/form-data - знаците не са кодирани
      text/plain - интервалите се заменят със символа + и специалните знаци не се кодират.
      formmethod Атрибутът указва метода, който браузърът ще използва за изпращане на данни от формуляра към сървъра. Задайте само за полета type="submit" и type="image". Заменя стойността на атрибута на метода на формуляра. Настроики:
      get е стойността по подразбиране. Данните от формуляра (двойка име/стойност) се добавят към URL адреса и се изпращат на сървъра: URL?name=value&name=value
      Данните от постформуляра се изпращат като http заявка.
      formnovalidate Указва, че данните от полетата на формуляра не трябва да се проверяват, когато формулярът е изпратен. Заменя стойността на атрибута novalidate на формуляра. Може да се използва без посочване на стойност на атрибут.
      formtarget Определя къде да се покаже отговорът, получен след изпращане на формуляра. Задайте само за полета type="submit" и type="image". Заменя стойността на целевия атрибут на формуляра.


      _parent – ​​​​зарежда отговора в родителския кадър
      _top – зарежда отговора на цял екран
      framename – зарежда отговора в рамка с указаното име.
      височина Стойността на атрибута съдържа броя на пикселите, без да посочва мерна единица. Задава височината на поле на формуляр от тип type="image" , например, . Препоръчително е да зададете едновременно височината и ширината на полето.
      списък Е препратка към елемент , съдържа своя id Позволява ви да предоставите на потребителя няколко опции за избор, когато той започне да въвежда стойност в съответното поле.
      макс Позволява ви да ограничите разрешеното числово въвеждане до максимална стойност; стойността на атрибута може да съдържа цяло число или дробно число. Препоръчва се този атрибут да се използва заедно с атрибута min. Работи със следните типове полета: номер, диапазон, дата, дата и час, местна дата и час, месец, час и седмица.
      максимална дължина Атрибутът определя максималния брой знаци, въведени в полето. Стойността по подразбиране е 524288 знака.
      мин Позволява ви да ограничите разрешеното цифрово въвеждане до минимална стойност.
      многократни Позволява на потребителя да въвежда множество стойности на атрибути, разделени със запетая. Отнася се за файлове и имейл адреси. Посочено без стойност на атрибут.
      име Указва името, което ще се използва за достъп до елемента , например в таблици css стилове. Той е аналогичен на атрибута id.
      модел Позволява ви да определите използването регулярен израз синтаксиса на данните, които трябва да бъдат разрешени за въвеждане в определено поле. Например pattern="(3)-(3)" — квадратни скобизадайте диапазона от валидни знаци, в този случай - всякакви малки букви, числото във фигурни скоби показва, че са необходими три малки букви, последвани от тире, след което три числа, вариращи от 0 до 9.
      контейнер Съдържа текста, който се показва в полето за въвеждане преди да бъде попълнено (най-често това е подсказка).
      Само за четене Не позволява на потребителя да променя стойностите на елементите на формуляра; изборът и копирането на текст все още са налични. Посочено без стойност на атрибут.
      изисква се Показва съобщение, което показва, че това поле е задължително. Ако потребителят се опита да изпрати формуляра без да въведе необходимата стойност в това поле, на екрана ще се покаже предупредително съобщение. Посочено без стойност на атрибут.
      размер Задава видимата ширина на полето в знаци. Стойността по подразбиране е 20. Работи със следните типове полета: текст, търсене, телефон, url, имейл и парола.
      src Указва URL адреса на изображението, използвано като бутон за изпращане на формуляр. Посочва се само за полето .
      стъпка Използва се за елементи, които изискват въвеждане числови стойности, показва количеството за увеличаване или намаляване на стойностите по време на регулиране на диапазона (стъпка).
      Тип бутон - създава бутон.
      отметка - превръща поле за въвеждане в отметка, която може да бъде отметната или изчистена, напр.
      имам кола
      цвят - Генерира цветови палитри в поддържащи браузъри, позволявайки на потребителите да избират цветови стойности в шестнадесетичен формат.
      дата — позволява ви да въведете дата във формат дд.мм.гггг.
      рожден ден:
      datetime-local - позволява ви да въведете дата и час, разделени с главна английска буква T, като използвате модела dd.mm.yyyy hh:mm.
      Рожден ден - ден и час:
      имейл - браузъри, които поддържат този атрибут, ще очаква потребителят да въведе данни, които съответстват на синтаксиса на имейл адресите.
      Електронна поща:
      файл - позволява ви да изтегляте файлове от компютъра на потребителя.
      Изберете файл:
      скрит - Скрива контролата, която не се показва от браузъра и не позволява на потребителя да променя стойностите по подразбиране.
      изображение - създава бутон, който ви позволява да вмъкнете изображение вместо текст върху бутона.
      месец - Позволява на потребителя да въведе годината и номера на месеца, като използва шаблона гггг-мм.
      номер - предназначен за въвеждане на цели числа. Неговите атрибути min , max и step определят съответно горната, долната граница и стъпката между стойностите. Тези атрибути се приемат за всички елементи, които имат цифрови индикатори. Техните стойности по подразбиране зависят от типа на елемента.
      Моля, посочете количество (от 1 до 5):
      парола - създава текстови полета във формуляра, докато въведените от потребителя символи се заменят със звездички, куршуми или други икони, инсталирани от браузъра.
      Въведете паролата:
      радио - създава превключвател - контрол под формата на малък кръг, който може да се включва или изключва.
      вегетариански:
      диапазон - ще ви позволи да създадете интерфейсен елемент като плъзгач, min / max - ще ви позволи да зададете диапазона за избор
      нулиране - създава бутон, който изчиства полетата на формуляра от въведените от потребителя данни.
      търсене - обозначава поле за търсене, по подразбиране полето за въвеждане е с правоъгълна форма.
      Търсене:
      подавам - създава стандартен бутон, активиран с щракване на мишката. Бутонът събира информация от формата и я изпраща за обработка.
      текст – Създава текстови полета във формуляр, като извежда едноредово текстово поле за въвеждане на текст.
      време - позволява ви да въведете време в 24-часов формат, като използвате модела чч:мм. В поддържащите браузъри се появява като контрола на цифрово поле за въвеждане със стойност, която може да се редактира с мишката, и позволява да се въвеждат само стойности за време.
      Посочете час:
      url—полето е предназначено за посочване на URL адреси.
      Начална страница:
      седмица - Съответният инструмент за показалец позволява на потребителя да избере една седмица от годината, след което ще осигури въвеждане на данни във формат nn-yyyy. В зависимост от годината броят на седмиците може да бъде 52 или 53.
      Посочете седмица:
      стойност Определя текста, който се появява на бутон, в поле или в свързан текст. Не е посочено за полета от тип файл.
      ширина Стойността на атрибута съдържа броя на пикселите. Позволява ви да зададете ширината на полетата на формуляра.

      4. Полета за въвеждане на текст

      елемент използва се вместо елемент когато трябва да създадете големи текстови полета. Текстът, показан като оригинална стойност, се поставя вътре в етикета. Размерите на полето се задават чрез атрибутите cols - хоризонтални размери, rows - вертикални размери. Височината на полето може да се зададе с помощта на свойството height. Всички размери се изчисляват на базата на размера на един знак в моноширинен шрифт.

      Таблица 4. Атрибути на тагове

      7. Бутони

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

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

      Таблица 9. Атрибути на тагове
      Атрибут Значение/Описание
      автофокус Поставя фокус върху бутона, когато страницата се зареди.
      хора с увреждания Деактивира бутона, което го прави невъзможен за кликване.
      форма Показва една или повече форми, към които принадлежи този бутон. Стойността на атрибута е идентификаторът на съответната форма.
      образуване Стойността на атрибута съдържа URL адреса на манипулатора на данни на формуляра, изпратен при щракване върху бутона. Само за тип бутон type="submit" . Заменя стойността на атрибута за действие, посочен за елемента .
      formenctype Задава типа кодиране на данните от формуляра, преди да ги изпрати на сървъра, когато се щракнат върху бутони като type="submit". Заменя стойността на атрибута enctype, указан за елемента . Възможни стойности:
      application/x-www-form-urlencoded е стойността по подразбиране. Всички знаци ще бъдат кодирани преди изпращане.
      multipart/form-data - знаците не са кодирани. Използва се, когато файловете се качват чрез формуляр.
      text/plain - знаците не се кодират, а интервалите се заменят със символа +.
      formmethod Атрибутът указва метода, който браузърът ще използва за изпращане на формуляра. Заменя стойността на атрибута на метода, указан за елемента . Указва се само за бутони от типа type="submit". Възможни стойности:
      get - данните от формата (двойка име/стойност) се добавят към url и се изпращат на сървъра. Този методима ограничения за размера на изпращаните данни и не е подходящ за изпращане на пароли и поверителна информация.
      post - данните от формата се добавят като http заявка. Методът е по-надежден и сигурен от get и няма ограничения за размера.
      formnovalidate Атрибутът указва, че данните от формуляра не трябва да бъдат валидирани при изпращане. Указва се само за бутони от типа type="submit".
      formtarget Атрибутът указва в кой прозорец да се покаже резултатът след изпращане на формуляра. Указва се само за бутони от типа type="submit". Заменя стойността на целевия атрибут, посочен за елемента .
      _blank - зарежда отговора в нов прозорец/таб
      _self - зарежда отговора в същия прозорец (по подразбиране)
      _parent - зарежда отговора в родителския кадър
      _top - зарежда отговора на цял екран
      framename - зарежда отговора в рамка с посоченото име.
      име Задава името на бутона, стойността на атрибута е текст. Използва се за връзка към данни от формуляра, след като формулярът е бил изпратен, или за връзка към даден бутон(и) в JavaScript.
      Тип Определя типа бутон. Възможни стойности:
      бутон - бутон, върху който може да се кликне
      reset — бутон за нулиране, връща първоначалната стойност
      submit - бутон за изпращане на данни от формата.
      стойност Задава стойността по подразбиране, изпращана при щракване върху бутона.

      8. Полета за отметка и радио бутони във формуляри

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

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

      елемент

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

      Ако не посочите стойност, бутонът ще има етикет по подразбиране, избран от потребителски агент. Този етикет вероятно ще бъде нещо подобно на „Изпращане“ или „Изпращане на заявка“. Ето пример за бутон за изпращане с етикет по подразбиране във вашия браузър:

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

      formenctype

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

      Application/x-www-form-urlencoded Това, стойността по подразбиране, изпраща данните от формуляра като низ след URL кодиране на текста с помощта на алгоритъм като . multipart/form-data Използва FormData API за управление на данните, позволявайки изпращане на файлове към сървъра. Вие трябва даизползвайте този тип кодиране, ако вашият формуляр включва някакъв елемент, който се използва за създаване на интерактивни контроли за уеб базирани формуляри, за да се приемат данни от потребителя; голямо разнообразие от типове входни данни и контролни модули са налични в зависимост от устройството и потребителския агент."> елементи от тип файл ( ). текст/обикновен обикновен текст; най-вече полезни само за отстраняване на грешки, така че можете лесно да видите данните, които трябва да бъдат изпратени.

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

      formmethod

      Низ, указващ HTTP метода, който да се използва при подаване на данни от формуляра; тази стойност отменя всеки атрибут на метода, даден на притежаващия формуляр. Разрешените стойности са:

      Получаване на URL адрес се създава, като се започне с URL адреса, даден от атрибута formation или action, като се добави знак за въпросителен знак ("?"), след което се добавят данни на формуляра, кодирани, както е описано от formenctype или атрибута enctype на формуляра. След това този URL адрес се изпраща на сървъра чрез HTTP заявка. Този метод работи добре за прости форми, които съдържат само ASCII знаци и нямат странични ефекти. Това е стойността по подразбиране. post Данните на формуляра са включени в тялото на заявката, която се изпраща до URL адреса, даден от атрибута formation или action, като се използва HTTP заявка за публикуване. Този метод поддържа сложни данни и прикачени файлове. dialog Този метод се използва, за да посочи, че бутонът просто затваря диалоговия прозорец, с който е свързан входът, и изобщо не предава данните от формуляра.

      formnovalidate

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

      formtarget

      Низ, който указва име или ключова дума, която показва къде да се покаже отговорът, получен след изпращане на формуляра. Низът трябва да е името на a контекст на сърфиране(т.е. раздел, прозорец или ) представлява вложен контекст на сърфиране, вграждайки друга HTML страница в текущата.">