Доступ к элементам формы

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

<form name="mainForm">
...
</form>

Тогда она доступна с помощью элемента массива document.forms["mainForm"].

Обращение ко всем элементам формы также осуществляется по имени, которое служит в качестве индекса массива в свойстве elements формы. Допустим, например, что у первой формы на странице имеется элемент с атрибутом name=”element1″. Тогда доступ к этому элементу осуществляется с помощью следующего кода JavaScript:

document.forms[0].elements["element1"]

Имеется и более краткая форма доступа к информации формы. Например, сокращенная форма доступа к элементу “element1″ формы “mainForm” выглядит так:

document.mainForm.element1

Каждый элемент формы поддерживает свойство form, указывающее на ту форму, в которой находится данный элемент. Поэтому выражение this.form часто используется в коде для упрощения доступа к форме на уровне элементов полей данной формы, не прибегая к массиву document.forms.

Доступ к текстовым полям

window.alert(f.elements["textfield"].value);

В HTML поддерживаются три вида текстовых полей.

  • Однострочные текстовые поля: <input type=”text” />
  • Многострочные текстовые поля: <textarea>…</textarea>
  • Поля ввода паролей: <input type=”password” />

Несмотря на то что эти поля действуют по-разному в браузере, доступ к ним в JavaScript осуществляется практически одинаково. Атрибут value каждого из этих полей содержит текст внутри поля. Его можно использовать как для чтения, так и для записи текста в поле.

В приведенном ниже фрагменте кода демонстрируется два следующих приема: доступ к свойству поля и применение выражения this.form для упрощенного доступа к форме данного поля.

<script type="text/javascript">
function showText(f) {
  window.alert(f.elements["textfield"].value);
}
</script>
<form>
  <input type="text" name="textfield" />
  <input type="button" value="Show text" onclick="showText(this.form);" />
</form>

Доступ к флажкам

f.elements["chkbox"].checked ? "checked." : "not checked."

Флажок в HTML-форме может находиться в двух состояниях: установленном и сброшенном. Поэтому обращение к флажку их кода JavaScript чаще всего осуществляется для определения его состояния.

Свойство checked флажка возвращает логическое значение true, если флажок установлен, а в противном случае — логическое значение false.

<script type="text/javascript">
function showStatus(f) {
  window.alert("The checkbox is " +
    (f.elements["chkbox"].checked ? "checked." : "not checked."));
}
</script>
<form>
  <input type="checkbox" name="chkbox" />
  <input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>

Продолжение следует…

Как работают в IT

Любой русский программист после пары минут чтения кода, обязательно вскочит и произнесет, обращаясь к себе: “переписать это все нафиг”. Потом в нем шевельнется сомнение в том, сколько времени это займет, и остаток дня русский программист потратит на то, что будет доказывать самому себе, что это только кажется, что переписать — это много работы. А если взяться и посидеть немного, то все получится. Зато код будет красивый и правильный. Hа следующее утро русский программист свеж, доволен собой и без единой запинки докладывает начальству, что переписать этот кусок займет один день, не больше. Да, не больше. Hу, в крайнем случае, два, если учесть все риски. В итоге начальство даст ему неделю и через полгода процесс будет успешно завершен. До той поры, пока этот код не увидит другой русский программист.

А в это время, в соседних четырех кубиках, будет ни на секунду не утихать работа китайских программистов, непостижимым образом умудряющихся прийти раньше русского программиста, уйти позже, и при этом сделать примерно втрое меньше. Эта четверка, давно не пишет никакого кода, а только поддерживает код, написанный в свое время индусом, и дважды переписанный двумя разными русскими. В этом коде не просто живут баги. Здесь их гнездо. Это гнездо постоянно воспроизводит себя при помощи любимой китайской технологии реиспользования кода — copy/paste. Отсюда баги расползаются в разные стороны посредством статических переменных и переменных, переданных по ссылке (поскольку, китайский программист не может смириться с неудобствами, вызванными тем, что он не может изменить значение внешней переменной переданной в его функцию модулями, которые переписывает русский программист). Вспоминая об этой функции, русский программист, как правило, на время теряет дар английской речи и переходит к какой-то помеси русского и китайского. Он давно мечтает переписать весь кусок, над которым работают китайцы, но у него нет времени.

Hа китайцах висят серьезные баги, о которых знает начальство и постоянно их торопит. Китайцы торопливо перевешивают баги друг на друга, поскольку знают, что попытки их починить приведут к появлению новых, еще худших. И в этом они правы. Разобраться в том, в каком порядке меняются статические переменные, и как приобретают свои значения, способен только один человек на фирме — индус. Hо он пребывает в медитации.

Поэтому, когда всю четверку уволят во время сокращения… А кого еще увольнять? Русский — еще не переписал свой кусок, а индус — главная ценность фирмы — он редко обращает внимание на проект, но когда обращает, все понимают, что так как он, архитектуру никто не знает. Так вот, когда китайцев увольняют, у их кода возможны две основные судьбы. Первая — он попадет к русским и его перепишут. Вторая — он попадет к местному, канадскому программисту.

О, канадский программист это особый тип. Он, ни на минуту не задумываясь, как рыцарь без страха и упрека, бросится фиксить самый свирепый баг китайского кода. Этот Баг живет там уже три года, и китайцы уже четырежды (каждый по разу) сообщали начальству, что он пофиксен. Hо Баг каждый раз возвращался, как Бетмен в свой Готхем.

Итак, канадский программист сделает то, чего китайцы не рисковали делать в течение трех долгих лет. Он, при помощи дебагера, отследит место, где статическая переменная приняла значение -1 вместо правильного 0, и решительным движением заведет рядом вторую переменную с правильным значением. Баг погибнет в неравной схватке с канадским программистом. Hо победа будет достигнута тяжелой ценой. Работать перестанет все, включая только что переписанный русским программистом код. Это повергнет русского программиста в задумчивость на целых два дня, после чего он сделает, в общем-то, предсказуемый вывод о том, что дизайн с самого начала был неправильным, и все надо переписать. Hа это нам нужна неделя. Да, неделя, не больше.

Канадский программист смело бросится налаживать все, и станет еще хуже, хотя казалось бы… Эта суета выведет из медитации индуса, который придумает и вовсе гениальное решение — отбранчить код. Согласно его плану, мы теперь будем поддерживать две версии одного и того же кода — одну работающую, но с Багом, другую без Бага, но не работающую. Русский программист, услышав об этом плане, сломает линейку об стол и дома обзовет жену дурой, но на совещании возразить не решится.

К счастью, все это не сильно влияет на дела фирмы, поскольку продукт продается и так. Поэтому менеджеры ходят в целом довольные, и не устают напоминать всем, что они отобраны как лучшие среди лучших. И что мы давно доказали свою способность выпускать продукт тем, что выпускаем его иногда.

Защитное изображение для HTML-формы

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

<?php

// Ширина изображения
$width = 150;
// Высота изображения
$height = 50;
// Количество символов в коде
$sign = 5;
// Защитный код
$code = '';
 
// Стартуем сессию
session_start();
 
// Символы, используемые в коде
$letters = array('A','B','C','D','E','F','G','H','J','K','M','N',
                 'P','Q','R','S','T','U','V','W','X','Y','Z',
                 '2','3','4','5','6','7','8','9');
// Компоненты для RGB-цвета
$figures = array(70, 90, 110, 130, 150, 170, 190);
// Создаем пустое изображение
$img = imagecreatetruecolor($width, $height);
 
// Заливаем фон белым цветом
$fon = imagecolorallocate($img, 255, 255, 255);
imagefill($img, 0, 0, $fon);

// Ширина поля под один символ
$letterWidth = intval((0.9*$width)/$sign);

// Заливаем фон точками
for($j=0; $j<$width; $j++) {
  for($i=0; $i<($height*$width)/600; $i++) {
    // Формируем случайный цвет
    $color = imagecolorallocatealpha(
             $img,
             $figures[rand(0,count($figures)-1)],
             $figures[rand(0,count($figures)-1)],
             $figures[rand(0,count($figures)-1)],
             rand(10,30));
    // Устанавливаем случайную точку случайного цвета
    imagesetpixel($img, rand(0,$width), rand(0,$height), $color);
  }
}

// Накладываем защитный код
for($i=0; $i<$sign; $i++)
{
  //Рисуем
  $color = imagecolorallocatealpha(
           $img,
           $figures[rand(0,count($figures)-1)],
           $figures[rand(0,count($figures)-1)],
           $figures[rand(0,count($figures)-1)],
           rand(10,30));

  // Генерируем случайный символ
  $letter = $letters[rand(0,sizeof($letters)-1)];

  // Формируем координаты для вывода символа
  if( empty($x) ) {
    $x = intval($letterWidth*0.2);
  } else {
    if( rand(0,1) )
      $x = $x + $letterWidth + rand(0, intval($letterWidth*0.1));
    else
      $x = $x + $letterWidth - rand(0, intval($letterWidth*0.1));
  }
  $y = rand( intval($height*0.7), intval($height*0.8) );
 
  // Размер шрифта символа
  $size = rand( intval(0.4*$height), intval(0.5*$height) );
  // Угол поворота символа
  $angle = rand(0, 30) - 15;
  // Запоминаем символ в переменной $code
  $code .= $letter;
  // Выводим символ на изображение
  imagettftext($img, $size, $angle, $x, $y, $color, "arialbd.ttf", $letter);
}
 
// Помещаем защитный код в сессию
$_SESSION['code'] = $code;
 
// Выводим изображение
header ("Content-type: image/jpeg");
imagejpeg($img);

?>

Скрипт позволяет создать изображение шириной $width и высотой $height пикселов, содержащее $sign случайных символов случайного цвета. Символы задаются массивом $letters, компоненты цвета — массивом $figures. После этого изображение заливается белым цветом, на котором размещаются в случайном порядке множество цветных пикселов, а затем генерируется и выводится случайный код $code. Переменная $code, помимо всего прочего, помещается в сессию, для того чтобы обработчик формы имел возможность сравнить введенный пользователем и сгенерированный коды. Так как данные из сессии не покидают сервер, злоумышленники не имеют возможности украсть защищенный код, сталкиваясь со сложной задачей распознавания образов.

Пример использования:

<?php
// Стартуем сессию
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример защиты формы</title>
</head>
<body>
<?php
if(isset($_POST['code']) && isset($_SESSION['code'])) {
  if($_POST['code'] == $_SESSION['code'])
    echo '<p style="color:green">Защитный код верен!</p>';
  else
    echo '<p style="color:red">Неверный защитный код!</p>';
  unset( $_SESSION['code'] );
} else {
  echo '<form action="'.$_SERVER['PHP_SELF'].'" method="post">';
  echo '<img src="captcha.php" border="0" alt="" /><br/>';
  echo '<input type="text" name="code" value="" /><br/>';
  echo '<input type="submit" name="submit" value="Отправить" />';
  echo '</form>';
}
?>
</body>
</html>

Ссылки по теме: