Статьи

Установка HTML-флажка и значения по умолчанию для переключателя HTML

Если вы программировали в Интернете более нескольких минут, вы использовали одну или две формы с флажками и переключателями. Рассмотрим следующий код:

<form action="." method="post">
<label><input name="mycheckbox" type="checkbox" value="1" /> checkbox</label>
<label><input name="myradio" type="radio" value="1" /> radio 1</label>
<label><input name="myradio" type="radio" value="2" /> radio 2</label>
<button type="submit">Submit</button>
</form>

<!-- output -->
<p>Value of mycheckbox: <?php echo $_POST['mycheckbox']; ?></p>
<p>Value of myradio: <?php echo $_POST['myradio']; ?></p>

Какое значение отображается для mycheckbox и myradio, когда вы нажимаете Отправить, не устанавливая флажок?

Ответ: возникла ошибка. Это будет зависеть от ваших настроек PHP, но, если включен строгий отчет об ошибках, вы увидите «Примечание: неопределенный индекс» для обоих полей.

Если флажок снят или переключатель не выбран, для этих полей в HTTP POST ничего не отправляется. В отличие от других полей ввода, здесь нет значения по умолчанию — поле POSTed просто не существует. Для правильной работы необходимо проверить его наличие на сервере, например,

 <?php
$mycheckbox = isset($_POST['mycheckbox']);
$myradio = (isset($_POST['myradio']) ? (int) $_POST['myradio'] : 0);
?>

Это нормально, если вы знаете, какие поля следует ожидать в форме. Однако, если сама форма была сгенерирована каким-либо образом, вы не могли бы определить, какие поля она содержала, посмотрев на значения POSTed.

Я никогда не сомневался в таком положении вещей, пока Энди Кирк не прокомментировал мою недавнюю статью « Как создать тумблер в CSS3» . Он создал пример, который использовал скрытые значения формы с тем же именем, что и флажки и переключатели, чтобы установить значение по умолчанию (не проверено), например

 <input name="mycheckbox" type="hidden" value="0" />
<label><input name="mycheckbox" type="checkbox" value="1" /> checkbox</label>
<input name="myradio" type="hidden" value="0" />
<label><input name="myradio" type="radio" value="1" /> radio 1</label>
<label><input name="myradio" type="radio" value="2" /> radio 2</label>

Поэтому значения для mycheckbox и myradio всегда публикуются независимо. Энди обнаружил это в среде PHP Zend и использовал с тех пор. Мне стыдно признаться, что я никогда не видел трюк раньше или работал для себя.

Хорошее решение?

Трюк со скрытым полем по умолчанию прост, хотя он немного неудобен. Вы добавляете ненужные элементы на страницу HTML и данные в HTTP POST для решения специфической для сервера проблемы. В качестве альтернативы вы можете использовать JavaScript, чтобы найти все флажки и переключатели, а затем создать скрытые поля, но, если этот код не работает или был отключен, это может вызвать проблемы с сервером.

Мое предложение: если вы знаете, какие поля содержит форма, вам не нужны скрытые поля для установки значений по умолчанию. Однако в тех редких случаях вам нужен универсальный синтаксический анализатор, который может анализировать любую форму, это разумное решение причудливой проблемы.

Возможно, это не модный учебник по HTML5, но это отличный совет. Спасибо Энди — ты научил старую собаку новому трюку!

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. Есть вопрос по HTML? Почему бы не спросить об этом на наших форумах ?