HTML5 елементи за формуляри и данни

Съдържание
HTML5 включва нови елементи, за да улесни създаването на полета с данни, които в много случаи трябваше да бъдат програмирани с javascript или да добавят външна библиотека на език, който би позволил разширяване на възможностите на елементите xhtml и html4.
Много програмисти продължават да работят по традиционния начин, тъй като се поддържа от повечето браузъри, а последните подобрения се поддържат само от по -новите версии.
HTML5 предлага набор от нови атрибути за атрибута type на входния елемент, тоест повечето елементи на формуляр, като текстови полета.
Някои от тези добре известни html атрибути са:
Тип на въвеждане = текст - Текстово поле
тип на въвеждане = парола - Поле за парола, което скрива паролата със звездички.
Тип на въвеждане = изпращане - Бутон за изпращане на формуляри
НОМЕР ТИП АТРИБУТЕН РЕГИСТЪР
Елементът, който съдържа атрибута номер на тип, позволява не само да се определи, че въведената стойност е цифрова, но и да се ограничи между максималната и минималната, можем да видим в изображението как тя също има валидиране, без да е необходимо да програмирате нещо

Изходният код за примера за използване на този атрибут е както следва
 Тип номер

Тип номер

Номер на пасаж (1-40):
ДАТА ТИП АТРИБУТ (ДАТА)
Атрибутът тип дата се използва за полета, където е необходимо да съдържа дата. В зависимост от браузъра и поддръжката, която предлагат, контролата на календара ще изглежда в състояние да избере дата.

ЦВЕТЕН ТИП АТРИБУТ
Атрибутът тип цвят се използва за полета, където е необходимо да съдържа цвят. В зависимост от браузъра и поддръжката, която предлагат, изглежда, че контролът за избор на цвят може да избере цвят или да напише цвета в шестнадесетичен формат. Селекторът ще се появи като изскачащ прозорец, когато щракнете върху цвета.

Цветен тип

Изберете цвят:

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

Тип имейл

Въведете имейл:

URL ТИП АТРИБУТ
Атрибутът тип url се използва за полета, където е необходимо да съдържа домейн, url. В зависимост от браузъра и поддръжката, която предлагат, той ще потвърди, че въведеният текст има формата на домейн, но ще се появи съобщение за грешка, което ще улесни валидирането на формуляр без програмиране. Не е необходимо да съдържа http или www, в този случай, ако го изискваме, ще трябва да го потвърдим чрез програмиране.

Тип URL адрес

Въведете имейл:

АТРИБУТИ И СВОЙСТВА ЗА HTML5
1. Атрибут за автоматично довършване
Когато пишем в поле на формуляра, откриваме, че като цяло браузърът ще ни даде възможност за автоматично довършване на това, което пишем в този момент с текст, с който вече сме писали преди, това може да създаде проблеми със сигурността, тъй като, например, ако пишем няколко имейла, защото компютърът е бил използван от различен потребител, можем да пишем, за да видим информация, която друг потребител е въвел. В примера деактивираме автодовършването по пощата, но не и в другите полета. Тя може да бъде деактивирана и от браузъра, но много потребители не знаят дали опцията съществува или как да деактивирате автодовършването.

Атрибут за автоматично довършване

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

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

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

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

Продукт:
Описание:

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

Наличност:
Можем да видим в изходния код на HTML, че сме създали формуляр за въвеждане на данните за даден продукт, след това някакъв пояснителен текст и накрая поставяме текстово поле за запаса извън формуляра, но го свързваме с този формуляр чрез неговия идентификационен идентификатор = "FormA" в текстовото поле за запас ще поставим, че го свързваме с form form = "formA", по този начин при изпращане на формуляра също ще бъдат изпратени всички свързани елементи.
4. Атрибут FormAction
Този атрибут е много полезен за изпращане на един и същ формуляр до различни страници, нещо, което преди това трябваше да бъде програмирано в javascript и да изпраща параметри на всички елементи на формуляра, за да може да го препраща, в някои случаи става много тромаво, особено ако имаше няколко форми, които зависеха една от друга.
Вземаме примера за предишния случай с бутон, който изпращаме формуляра на страницата record.php, а с другия на stock.php

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

Продукт:
Описание:

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

Lorem Ipsum е просто фиктивен текст на печатната и наборната индустрия.

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

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

Продукт:
Описание:

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

Списък и атрибут тип данни

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

Така ще помогнете за развитието на сайта, сподели с приятелите си

wave wave wave wave wave