|
|||||||||
Автор: Alexander Suhhinin Практически на всех Web - сайтах применяются HTML формы для сбора информации о посетителях, клиентах. На коммерческих сайтах, реализующих Интернет-магазины, столы заказов, почтовые рассылки и прочие действия, где требуется ввод информации от пользователя, формы являются основными функциональными элементами сайта, остальные 90 процентов заполнения сайта - мишура, которая предназначена для завлечения клиента, чтобы он заполнил форму и нажал кнопку "Submit". Вся информация, введенная в форму, передается специальной программе на сервере, где она обрабатывается, и результат возвращается на машину клиента в виде HTML страницы.Часто формы используются для администрирования сайтов, форумов, чатов, баз данных и для прочих нужд. Также часто нужно в форме вводить довольно много однотипной информации, например при заполнении какой-нибудь базы данных. При этом, обычно предлагают ввести запись, нажать кнопку "Записать", затем информация передается на сервер, там обрабатывается, с сервера возвращается подтверждение об успешном сохранении данных, и снова передаетсяновая форма. Даже при хорошей связи (ping = 100 ms) время обработки формы может достигать t=20-30 секунд. Если вы заполнили форму один раз, и больше не собираетесь этого делать, время сполне удовлетворительно, но если вам нужно ввести num= 20-30 записей , то придется ждать SumT=(t*num)+(t_filling_form*n). Довольно долго.Не лучше ли заполнить за один раз 20-30 записей и сохранить? Лучше. Но сколько точно записей нужно? Это неизвестно. Тогда придется прибегнуть к возможностям Dynamic HTML + JavaScript для написания динамической формы. Предположим, что нам нужно внести в каталог ссылок на нашей домашней странице новую пачку линков. Сколько их, мы не знаем, может одну, а может десяток.В каталогое сохраняется такая информация:
<form name="links" method="post"><> <table id="tbl"> <tr> <td><input type="text" name="name" width="60"></td> <td><input type="text" name="URL" width="60"></td> <td><input type="text" name="category" width="30"></td> </tr> </table> <td><input type="submit"></td> <td><input type="reset"></td> </form>что даст нам в результате : А теперь попробуем немного разобраться в нашей страничке с точки зрения браузера (речь идет об IE 4.X и выше). В первую очередь у нас есть объект document, который содержит все остальные элементы странцы. В языке JavaScript так и принято обращаться к элементам:document.all.identifier.property, где identifier - идентификатор элемента. Если вы заметили, в листинге выше тэгу <table> присвоен идентификатор tbl. С его помощью в дальнейшем можно обращаться к таблице, как document.all.tbl.properties . properties, как вы уже догадались, свойства элемента, вместо них может быть вызов метода. Таблица в HTML состоит из строк, каждая строка - из ячеек. Ячейки (как и любой другой элемент HTML страницы) является контейнером для HTML кода, к которому можно доступится путем чтения/записи свойства innerHTML. Значит, добавив строку, ячейки, можно прописать в них нужное нам содержимое. Добавляется строка в таблицу методом insertRow(номер_строки); // добавляется строка insertCell(номер_ячейки); // добавляется ячейка. Это уже метод объекта rowЗначит, для добавления в форме строки ввода нужно написать что-то типа этого: <SCRIPT language = 'JavaScript'> var numb; numb = 1; // переменная для формирования идентификатора элемента function add_new_row() { var currrow; currow = document.all.tbl.rows.length; // вычислить количество строк в таблице numb++; document.all.tbl.insertRow(currow); // добавляем строку в таблицу document.all.tbl.rows[currow].insertCell(0); // добавляем ячейки document.all.tbl.rows[currow].insertCell(1); document.all.tbl.rows[currow].insertCell(2); document.all.tbl.rows[currow].insertCell(2); // вставляем в форму поля document.all.tbl.rows[currow].cells[0].innerHTML = '<input type=\"text\" name=\"name_'+ numb +'\">'; document.all.tbl.rows[currow].cells[1].innerHTML = '<input type=\"text\" name=\"url_'+ numb+'\">'; document.all.tbl.rows[currow].cells[2].innerHTML = '<input type=\"text\" name=\"category_'+ numb+'\">'; // кнопка для вызова функции для добавления следующей строки document.all.tbl.rows[currow].cells[3].innerHTML = '<input type=button name=\"btnNext\" value=\"+\" onClick=\"add_new_row()\">'; } </SCRIPT>В резульате получается такая форма: При нажатии на кнопку "+" добавляется новая строка, и можно заполнять форму столько, сколько требуется, и затем одним нажатием кнопки Submit отправить все данные на сервер. Автор: Alexander Suhhinin |
|||||||||
![]() |
![]() |