Урок №8 HTML5 Елементи на формите - 28 October 2014

Home » 2014 » Октомври » 28 » Урок №8 HTML5 Елементи на формите

3:58 PM

Урок №8 HTML5 Елементи на формите

HTML5 Нови елементи на формите.

HTML5 има следните нови елементи на формите.

<datalist>
<keygen>
<output>

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

HTML5 елемента <datalist>

<datalist> елемента задава списък от предварително дефинирани опции за <input> елемента.
<datalist> елемента се използва за осигуряване на "автоматично довършване" на функция на <input> елементи.
Потребителите ще виждат падащия списък с предварително дефинирани опции, както входните данни.
Използвайте атрибута лист от елемента <input>, за да го свърже заедно с <datalist> елемента.

Пример

<input> елемент с предварително определени стойности в <datalist>

<form action="" method="get">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

HTML5 елемента <keygen>

Целта на <keygen> елемента е да се осигури по-сигурен начин за идентификация на потребителите.
<keygen> тага определя поле за генератор на ключова двойка във форма.
Когато се представя формата,са генерирани 2 ключа,частен и публичен.
Частният ключ се съхранява на място,а публичния ключ се изпраща на сървъра.
Публичният ключ може да се използва за генериране на клиентски сертификат за удостоверяване на потребителя в бъдеще.

Пример

<form action="" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

HTML5 елемента <output>

<output> елемента представлява резултат от изчисление.

Пример

Извършване на изчисление и да се покаже резултата в <output> елемента:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :

Всички коментари: 0