Блокиране на формуляри - Медийното изображение - Уебсайтът се развива

Разработете схема за оформление на формуляр, която ще ви позволи лесно да оформите формуляр с всякаква сложност в съответствие със следните изисквания:

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

Първо, отказваме да използваме универсалния селектор за нулиране на отстъпи, за да избегнем някои грешки. За целта използваме reset.css.

След това използваме следната HTML структура:

  • като "линии" на формуляра използваме блокове ( )
  • предписваме стилове на основните елементи на формата:

Можете да научите повече за метода в статията „Как да научим IE6 да разбира типовете в CSS“.

Например формата за влизане в сайта:

Нека усложним формата:

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

задължително поле, отбелязано със звездичка

редът на формуляра с грешката изглежда така:

Добавяне към CSS:

За да се подобри използваемостта на формуляра, свойството maxlength трябва да се добави към полетата, така че потребителят да не може да въвежда повече знаци, отколкото полето е позволено в базата данни (трябва да бъде съгласувано с програмистите). Освен това, ако редът на полетата може да се промени, трябва да добавите tabindex, за да поддържате последователно заобикаляне на раздели.

За да се запази стандартният външен вид на бутоните, беше необходимо да се използва дефиницията на типовете полета в CSS (input[type=text], input[type=submit], input[type=checkbox] и др.), което доведе до използването наизраз за IE6.

Недостатъци на метода поради използването на израз:

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

  • задайте основния дизайн за въвеждане
  • за checkbox, submit, radio полета създаваме отделни класове (.checkbox, .submit, .radio)

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