Создание динамических форм с помощью JavaScript

www.WebZ.ru

Очень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта.

Автор: Дмитрий Верещака
Без использования JavaScript эту задачу можно решить двумя путями:

Ограничить количество полей ввода каким-либо максимально разумным числом. Например, количество людей, у которых число детей больше 5, относительно невелико. Однако этот способ несколько некрасивый - во-первых, мы изначально загромождаем форму большим числом полей ввода, причём, большинству пользователей понадобятся от силы два - три первых, а во-вторых, мы всё-таки ограничиваем пользователя в возможности указать полную информацию о себе - так, если форму пожелает заполнить человек, у которого 10 сыновей, то некоторыми из них ему придётся пожертвовать.
Осуществлять ввод информации поэтапно. Например, на первом этапе предложить пользователю ввести количество фотографий, которые он желает загрузить на сервер, а на втором этапе при помощи скрипта на сервере сформировать форму с нужным количеством полей ввода.
Однако, используя JavaScript, мы можем облегчить пользователю ввод информации о себе. Сделать это можно, например, следующим образом:
Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 4.0+ с установленой поддержкой DHTML, Konqueror 2.2+, Netscape 6, Mozilla начиная с M16.

Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы. В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода информации. Во второй строке таблицы мы разместим сами поля ввода информации плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было отличить строку данных от строки названий, добавим в тэг.

Чтобы вся эта конструкция заработала, необходимо еще написать две функции на JavaScript: добавление новой строки и удаление ошибочно добавленной строки. Причём, в данном примере предполагается, что количество строк с данными может быть и нулевым, кроме того, у данной реализации динамической формы есть недостаток: если удалить все строки, то добавить строки уже будет нельзя. Впрочем, далее в коде программы есть вариации, которые запрещают удалять строку, если она осталась одна.

результат выполнения браузером вышеуказанного примера выглядит так: Сведения о детях Имя Дата рождения добавить
удалить
Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме

rubxpsx 30-07-2011    Yz7Gne , [url=http://dusggvjnpiyo.com/]dusggvjnpiyo[/url], [link=http://trujkqiohqwd.com/]trujkqiohqwd[/link], http://kqfkunnkzyfz.com/

cotdctgc 27-07-2011    GKh99h <a href="http://dnxbppwstfhe.com/">dnxbppwstfhe</a>

djaundlva 26-07-2011    kYmdLL , [url=http://hmxtqxrmrerv.com/]hmxtqxrmrerv[/url], [link=http://zcmmgfsjnoyv.com/]zcmmgfsjnoyv[/link], http://svwdceoujlkz.com/

eugpuvyo 26-07-2011    XG8KAa <a href="http://ndwwwcfecthj.com/">ndwwwcfecthj</a>

Malerie 25-07-2011    THX thats a great aswner!

Живые меню или Как сделать красиво с помощью CSS и JavaScript

14-03-2009

Наверное, никто не сможет поспорить с утверждением, что главное в любой web-страничке - удобство для пользователя. После того, как мы выложили наше творение в сеть, мы сразу начинаем предпринимать массу усилий для того, чтобы привлечь на свой сайт максимум посетителей... подробнее Комментарии: 0 Кол. просмотров: общее - 5624 сегодня - 0

Локальная баннерная система

14-03-2009

Этот скрипт поможет вам организовать на своем сайте или страничке баннерную систему. Первый фрагмент вы вставляете в любое место странички... подробнее Комментарии: 0 Кол. просмотров: общее - 4746 сегодня - 0

Локальная реклама

14-03-2009

В Internet Zone-154 была небольшая заметка Локальная баннерная система. Автор - Вадим Беляков (http://tuta.da.ru) предлагал поставить на страничку баннер, используя небольшой javascript. Я прочитал этот номер лишь в середине апреля. Мне сразу же пришло в голову использовать его для текстовой рекламы... подробнее Комментарии: 0 Кол. просмотров: общее - 5099 сегодня - 0

Использование JS для создания «умных» форм

14-03-2009

JS, или JavaScript язык сценариев, которые выполняются на стороне клиента и не требует перезагрузки страницы. JavaScript был разработан компанией Netscape в 1995 году... подробнее Комментарии: 0 Кол. просмотров: общее - 4927 сегодня - 0

Обманщик спам-роботов

14-03-2009

Как известно, бичом современного Интернета является спам - непрошенная рассылка рекламных и прочих сообщений. По данным некоторых аналитиков, он составляет более 50% всех сообщений в Сети... подробнее Комментарии: 0 Кол. просмотров: общее - 5168 сегодня - 0