Исходники
Статьи
Языки программирования
.NET Delphi Visual C++ Borland C++ Builder C/С++ и C# Базы Данных MySQL MSSQL Oracle PostgreSQL Interbase VisualFoxPro Веб-Мастеру PHP HTML Perl Java JavaScript Протоколы AJAX Технология Ajax Освоение Ajax Сети Беспроводные сети Локальные сети Сети хранения данных TCP/IP xDSL ATM Операционные системы Windows Linux Wap Книги и учебники
Скрипты
Магазин программиста
|
Создание динамических форм с помощью JavaScriptОчень часто при создании HTML-форм возникает потребность узнать у пользователя значения однотипных параметров, количество которых заранее неизвестно. Например, если это форма добавления сообщения в форум с возможностью прикрепить один или несколько файлов, например, с фотографиями. Другим примером может служить форма с анкетой, в которой есть сведения о детях. И в том и другом случае невозможно заранее предположить количество полей, которые пожелает заполнить посетитель сайта. Без использования JavaScript эту задачу можно решить двумя путями:
Пусть, для определённости, пользователю необходимо ввести информацию о детях, а для упрощения примера - только имя и дату рождения. Со стороны пользователя нам понадобится браузер, понимающий тэг <span> и регулярные выражения, поддерживающий функцию getElementById объекта document, а также понимающий свойство innerHTML, например, Internet Explorer 5.5 Оформим ту часть формы, которая содержит информацию о детях, в виде таблицы.
В самой первой строке таблицы мы разместим названия столбцов и добавим ещё одну
ячейку, в которой разместим ссылку на добавление ещё одной строки с полями ввода
информации. Во второй строке таблицы мы разместим сами поля ввода информации
плюс ячейку со ссылкой на удаление строки с информацией. Чтобы можно было
отличить строку данных от строки названий, добавим в тэг <tr> параметр
id="newline" и номер строки в квадратных скобках (чтобы было легче отличить
номер строки от символа 0) nomer="[0]". Затем поместим всю таблицу во внутрь
тэга span с каким-либо именем, например, table. И напоследок, добавим еще
поле ввода типа hidden для того, чтобы считать строки таблицы. результат выполнения браузером вышеуказанного примера выглядит так:
Таким образом, мы обнаружили, что использование регулярных выражений в JavaScript+DHTML открывает нам много новых возможностей для создания удобного пользовательского интерфейса. В частности, данный приём используется автором этих строк в интерфейсе администратора своего сайта для добавления нескольких картинок к странице в одной форме. |
Форум Программиста
Новости Обзоры Магазин Программиста Каталог ссылок Поиск Добавить файл Обратная связь Рейтинги
|