Web forms using Lightbox

Square

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

Някои от основните положения в примера са:
1. Използване на тага <label>. Това е т.нар. етикет, който в случая се прикрепя към полето за въвеждане на данни от потребителя, като се използва неговото ID (<label for=“name“>Name</label><input type=“text“ value=““ id=“name“/>). Това позволява при клик върху текста на етикета, фокуса да се пренася директно в полето за въвеждане на данни.
2. Използване на разпознаване на браузъра и версията му(за Internet Explorer) и добавяне на отделни стилове за някои от елементите в страницата, с основна цел фиксиране на проблеми в позиционирането на HTML елементите. Основния проблем който се решава с този похват е неправилното интерпретиране от страна на IE6 на стойността на CSS свойството „margin“.
Пример:
<!–[if lte IE 6]>
<style type=“text/css“>
input.btn { margin: 0.5em 0 0 5.7em;}
</style>
<![endif]–>

Демо: HTML form
Download: HTML form (.zip)
Оригинален пример: http://www.muttmansion.com/lightbox/text_lightbox/

Постове от същата категория:
[catlist=10]

Вашият коментар

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