Поля для ввода изображений, как это видно из названия, позволяют загружать изображения. Вообще, данное поле (input) позволяет загружать любые файлы, поэтому во избежании ошибки, а так же в целях безопасности, применяются дополнительная настройка в виде атрибута accept, указывающего, какие именно файлы (с каким расширением) можно загружать на сайт. Атрибут type определяет действие для , name позволяет идентифицировать элемент обработчику формы.
99 <!-- Поля для ввода изображения -->
100 <div class='img_mess_1'>
101 <span class='hdr_sel'><b>Изображение № 1: </b></span>
102 <input id='mess_img' type="file" name="mess_img_1" accept="image/jpeg,image/png">
103 <img src='/components/com_feedback_form/images/0001.png'>
104 <span class='hdr_recipe_info'> Размер: max 600px*400px</span>
105 </div>
106 <div class='img_mess_1'>
107 <span class='hdr_sel'><b>Изображение № 2: </b></span>
108 <input id='mess_img' type="file" name="mess_img_2" accept="image/jpeg,image/png">
109 </div>
110 <div class='img_mess_1'>
111 <span class='hdr_sel'><b>Изображение № 3: </b></span>
112 <input id='mess_img' type="file" name="mess_img_3" accept="image/jpeg,image/png">
113 </div>
Как видно из кода, перед полем input присутствует надпись Изображение №...; в конце первого поля дополнительно установлено небольшое изображение, после которого следует информация о размерах изображений. Обратите внимание: так как span, input и img являются строчными элементами, они устанавливаются в одну строку, поэтому в результате получается три строки, образованные тегами <div> (строки 100-105, 106-109, 110-113).
Принцип работы поля для ввода прост: пользователь кликает на поле, при этом открывается окно для выбора изображения, находящегося где-либо на компьютере. Пользователь находит нужное изображение и кликает на него. При отправке формы изображение и все необходимые сопроводительные данные передаются обработчику формы.
Пропишите указанный код в создаваемом файле, сохраните, перейдите на сайт и перезагрузите страницу. При необходимости настройте вид созданного элемента.
Далее осталось установить кнопку для отправки изображения, но это будет сделано уже в следующей главе.
