РазделыСтатьиРазработка сайтов → Правильная разработка форм

Формы на сайтах применяются очень часто, но видит их прежде всего администратор, когда хочет внести или изменить информацию.
Форма отправки данных
Как же правильно разрабатывать формы для сайта?
Если посмотреть в руководства, учебники и записи в блогах, то это выглядит как-то так (пример взят с популярного ресурса http://myru...html.html).
Код: HTML

<div align "center">

  <
form name "form1" action "script/request.php" method "get">
    
Ваше имя: <input type "text" name "firstname" value "Тут Ваше имя">
    <
br>
    
Ваш пароль: <input type "password" name "pass" value "Тут Ваш пароль">
    <
br>
    
Выберите вариант:
    <
select name "choice">
      <
option value "1">Вариант 1
      
<option value "2">Вариант 2
      
<option value "3">Вариант 3
    
</select>
    <
br>
    
Напишите что-нибудь:
    <
br>
    <
textarea name "message" rows "10" cols "15">Сообщение</textarea>
    <
br>
    
Выберите что-нибудь одно:
    <
input type "radio" name "choiceradio" value "1">Вариант 1
    
<input type "radio" name "choiceradio" value "2">Вариант 2
    
<input type "radio" name "choiceradio" value "3">Вариант 3
    
<br>
    
Вы согласны с нашими правилами:
    <
input type "checkbox" name "terms" value "yes">
    <
br>
    
Выберите файл для загрузки:
    <
input type "file" name "path">
    <
br>
    <
input type "button" name "start" value "Начать">
    <
br>
    <
input type "submit" value "Отправить">
  </
form>
</
div>
На самом деле, формы у опытных веб разработчиков делаются по-другому. Пара замечаний.
1. В форме используются значения имен полей типа «name = "terms"», «name = "pass"» и т.д. В результате обработка на сервере всех этих значений требует больших временных затрат — надо проверить и перебрать все значения, прилетевшие с запросом, GET или POST. Да, в маленьких формах лучше так и делать, как в примере. Но при увеличении количества полей временные затраты становятся слишком большие, ведь каждое поле приходится проверять вручную. Опытный разработчик запихивает весь запрос в массив, а ключи массива называет заранее предопределёнными именами, желательно такими же, как будет сохраняться в таблице БД. Например, в таблице названо поле «title» — не следует в поле формы обзывать это поле «name = "name"», должно быть «name = "title"». Тогда на стороне сервера это легко принять и обработать, в том числе вставить дополнительную проверку на валидность — например, если поле должно быть числом, желательно это проверить дополнительно.
Вместо обычного ручного перечисления значений мы можем написать цикл, что особенно актуально для больших форм. И даже записать его в функцию.
Код: PHP

/**

* Обновления поля таблицы из массива
*/
function update_row($table,$arr_edit)    {
// Обработка массива для безопасного сохранения в БД
 
$arr_edit=array_map('mysql_real_escape_string',$arr_edit);
// Дополнительно вырезаем из id всё, что не число
 
$id=preg_replace("/[^0-9]+/",'',$arr_edit['id']);
 if (empty(
$id)) return false;
 unset(
$arr_edit['id']);
 
$edit='';
// Формируем строку для запроса «`ключ1` = "значение1",`ключ2` = "значение2",»
 
foreach ($arr_edit as $key=>$value) {
  
$edit.='`'.mysql_real_escape_string($key).'`="'.$value.'",';
 }
// Убираем лишнюю запятую в конце строки
 
$edit=substr($edit0, -1);
 return 
mysql_query('UPDATE `'.$table.'` SET '.$edit.' WHERE `id`="'.$id.'";');
}
На самом деле, обработок и проверок будет больше, код приведен лишь для понимания принципа.

С учётом, что мы в форме имеем ключи те же, что в таблице, отлов запроса на сервере и вызов функции сохранения в БД будет выглядеть примерно так.
Код: PHP

if (isset($_POST['editarticle'])) {

 
update_row('articles',$_POST['editarticle']);
}
А изначальная форма — как то так:
Код: HTML

<form action="save.php" method="POST">

Заголовок: <input type="text" value="" name="editarticle[title]"><br>
Описание для поисковых систем: <input type="text" value="" name="editarticle[description]"><br>
Ключевые слова: <input type="text" value="" name="editarticle[keywords]"><br>
Сообщение: <br>
<
textarea name "editarticle[text]" rows "10" cols "15"></textarea><br>
<
input type "submit" value "Отправить">
</
form>
Здесь значения в квадратных скобках — на сервере станут ключами массива $_POST['editarticle'], где мы их сможем спокойно перебрать.
2. На самом деле, опытные разработчики отделяют представление от модели и контроллера (шаблон программирования Model-View-Controller является самым используемым). В свете этого, формы обычно проектируют как класс, что создает дополнительные удобства.
В самом деле, структура формы (каркас) всегда одинакова, а уж какими тегами или классами изукрасить — дело другое и к программисту не относится. Это дело дизайнера и верстальщика.
В нашем движке такой класс тоже имеется. Вышеуказанная форма с использованием класса форм выглядела бы так:
Код: PHP

$frm = new InputForm ('''post''Сохранить');

$frm->addrow('Заголовок: ',$frm->text_box('editarticle[title]'''));
$frm->addrow('Описание для поисковых систем: ',$frm->text_box('editarticle[description]'''));
$frm->addrow('Ключевые слова: ',$frm->text_box('editarticle[keywords]''')); 
$frm->addrow('Сообщение'$frm->textarea('editarticle[text]'''1015), 'top');
$frm->show(true);
В итоге код формы более понятен, краток и создаст лишь каркас. А если дизайнер изменит шаблон, то внешний вид форм поменяется сразу на всём сайте.
3. Сравнение с аналогами.
Заметьте, класс форм есть во всех мало-мальски серьёзных системах управления, и это неспроста. Самый известный, пожалуй, Zend Form из Zend Framework. Он гибче нашего, но как следствие намного больше и сложнее. Если наш состоит менее чем 10 файлов, Zend Form содержит их более 70.
08.04.2016 10:52 Автор/источник: Den1xxx

Комментировать

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.