reForm: CSS шаблон дизайна формы для любого макета (часть 2)

Пару недель назад я опубликовал статью о проекте formReForm . formReForm — это методология для стилизации HTML-форм без огромного количества разметки (или [удушья] макета на основе таблицы). Сделав еще один шаг вперед, в этой статье обсуждается, как использовать библиотеку javascript formReForm для создания удобных, доступных и красивых пользовательских интерфейсов ввода.

[Примечание: мне стало известно, что название проекта «реформа» уже используется. Таким образом, «форма »была переименована в« FormReForm »… что на самом деле и делает. — Джо]

Чтобы увидеть formReForm в действии, взгляните на демонстрацию . Сначала вы увидите нестандартную форму с входными элементами по умолчанию. Нажмите кнопку «reForm this form GUI», чтобы увидеть formReForm в действии.

[img_assist | nid = 1840 | title = formReForm стилизует ваши формы. | desc = | link = none | align = right | width = 275 | height = 242] Все элементы формы (input, select, textarea и т. д.) имеют фиксированный размер по умолчанию. Итак, каждый новый веб-проект передается нам с неприятными товарами:

• Элементы формы не меняются в разметке. Это часто приводит к несбалансированному графическому интерфейсу, в котором все сгруппировано в левой части экрана.
• Если окно браузера слишком маленькое, могут появиться полосы прокрутки влево-вправо из-за статических элементов формы.
• Повторное использование кода формы затруднено, потому что стиль и расположение отличаются между проектами
• Требования к макету формы из 4 столбцов часто приводят к коду таблицы.

Первоначальная публикация вызвала несколько положительных комментариев на других сайтах (таких как CSS-Tricks.com , usabilita.blongosfere.it и публикация в группе Google ). Были некоторые проблемы, и, надеюсь, этот пост ответит на эти вопросы.

Как работает библиотека formReForm.js

В прошлый раз мы смотрели, как взаимодействуют DIV и CSS. Эта публикация содержит некоторые основные снимки экрана и примеры того, как Javascript модифицирует HTML DOM для создания желаемого эффекта.

Для использования formReForm требуется всего несколько строк JavaScript в вашем HTML:

// you have the option of dynamically loading the formReForm.css file:
formReForm.loadformReFormCss();
 				
// create the formReForm object and pass
// it the name of the form's DIV container:
formReForm = new FormReForm('fieldForm');

// apply the reForm to your GUi, 
formReForm.doReForm();

// done!

Затем создайте основную форму HTML:

<div class="fieldForm" id="fieldForm">
	<label for="givenName">First Name</label>
	<input name="givenName" id="givenName" value="Joe" type="text"/><br/>

	<label for="sirName">Last Name</label>
	<input name="sirName" id="sirName" value="Lippeatt" type="text"/><br/>

	<label for="phone">Phone</label>
	<input id="phone" name="phone" value="905 555 1212" type="text"/><br/>

	<!-- deleted for brevity -->

</div> 

что обычно приводит к минимально отформатированному графическому интерфейсу, например:

[img_assist | nid = 1806 | title = GUI формы в минимальном стиле | desc = reForm «До» image | link = popup | align = none | width = 339 | height = 267]

Хотя это не очень красиво, эта форма полностью доступна и пригодна для использования. Вот как будет выглядеть блок формы formReForm, если Javascript был отключен.

formReForm работает волшебно после загрузки страницы, вызывая javascript метод formReForm.doReform (). Это может быть вызвано любой техникой обработки событий, такой как событие onload тела. Демонстрационный файл использует событие щелчка для драматического эффекта.

formReForm.doReform () манипулирует DOM так, что код выглядит так:

<label for="givenName">First Name</label>
<input name="givenName" id="givenName" value="Joe" type="text"/><br/>

«преобразован», чтобы выглядеть так:

<div class="field50Pct">
	<div class="fieldItemLabel">
		<label for="givenName">First Name</label>
	</div>
	<div class="fieldItemValue">
		<input id="givenName" type="text" value="Joe" name="givenName"/>
	</div>
</div>

Несмотря на то, что в нем слишком много тегов div, учтите, что это гораздо более желательно, чем макет на основе таблицы. Оригинальная разметка является функциональной и семантической; formReForm.js и formReForm.css делают всю тяжелую работу.

Результаты

Все эти скриншоты из одной и той же разметки формы. Единственное, что изменилось, это ширина окна браузера:

[Img_assist | NID = 1807 | название = 800px | убывание = | ссылка = всплывающее окно | Align = нет | ширина = 97 | высота = 100]