Url адрес для поля с изображением не может быть в формате – URL адрес — что это такое и как узнать урл веб-страницы сайта, изображения или видео | Создание сайтов и заработок в сети

Атрибуты HTML-формы

1. Атрибут name — позволяет присвоить форме уникальное имя. Это нужно в том случае, если на одной странице размещено несколько форм.
2. Атрибут enctype — позволяет задать способ кодирования информации из формы. Обычно его заполняют только тогда, когда при помощи формы происходит пересылка файлов. Вообще, здесь может быть три варианта — enctype= application/x—www—form—urlencoded | multipart/form—data | text/plain. Первый вариант application/x—www—form—urlencoded говорит о том, что происходит пересылка закодированного текста. Третий вариант text/plain используют для пересылки текста в формате «как есть». Второй вариант  multipart/form—data используют для файлов.
3. Атрибут формы autocomplete позволяет включить так называемое автозаполнение полей.

Поля ввода в HTML — форме

Теперь расскажем о том, какие элементы может содержать в себе форма. Прежде всего, это разного рода input’ы – элементы, предназначенные для ввода данных.

Текстовое поле — type=»text»

Самый распространенный input – обычное однострочное текстовое поле. В коде оно может выглядеть следующим образом:

<input type=»text» name=»t» maxlength=»10″ value=»Иван»>

В атрибуте type, как вы поняли, указывается тип поля. Атрибут name – это уникальное имя поля (оно нужно для последующей обработки данных). Атрибут maxlength задает максимальную длину вводимого текста. Value – это значение поля по умолчанию (после загрузки страницы в этом поле сразу же будет прописано слово «Иван»).

 Поле для пароля — type=»password»

Еще один популярный input – поле для ввода пароля. Выглядит оно вот так:

<input type=»password» name=»p»>

Ключевая особенность – вводимые символы будут отображаться как звездочки.

Чекбокс — type=»checkbox»

Следующий элемент – чекбокс. В коде он может выглядеть примерно так:

<input type=»checkbox» id=»ch» name=»c» value=»1″ checked>

Атрибут type здесь также задает тип. ID – это уникальный идентификатор, может использоваться для привязки к чекбоксу CSS—правил или текстовой надписи. Value – это значение, посылаемое на обработку в том случае, если в чекбоксе поставлена галочка. Атрибут checked автоматически ставит галочку в чекбоксе сразу при загрузке страницы. У checked не нужно указывать значение, так как оно совпадает с именем атрибута.

Надпись над элементом — тег label

Следующий элемент – текстовая надпись (элемент label). Как правило, текст привязывают к какому—то уже существующему input’у. В этом случае надпись может выглядеть вот так:

<label for=»ch»>Текст для чекбокса</label>

 Атрибут for осуществляет непосредственную привязку текста к элементу с id=»ch» (в нашем случае это чекбокс).

Переключатель — type=»radio»

Еще один интересный элемент – это радиопереключатель. Обычно его вставляют в форму, что бы предоставить пользователям возможность выбора из нескольких равнозначных вариантов. Конструкция, приведенная ниже, создаст радиопереключатель из двух input’ов.

<input type=»radio» name=»n» value=»qwe» checked> <input type=»radio» name=»n» value=»qwe2″>

Атрибут type задает тип input’а. Name – это имя. Все input’ы в пределах одного переключателя должны иметь одно имя, иначе форма не свяжет их друг с другом. Value –это значение, передающееся при выборе того или иного элемента. Атрибут checked позволяет установить один и только один из элементов в включенное по умолчанию состояние.

Выпадающий список — тег select

Элемент формы select позволяет создать выпадающий список. У него есть несколько атрибутов. Name задает уникальное имя. Size задает количество элементов, отображающихся в списке одновременно (при загрузке страницы). По умолчанию size=1. Атрибут без значения multiple позволяет выбирать сразу несколько элементов, предварительно зажав клавишу Ctrl. Чтобы создать непосредственные элементы списка, используется тег

<select name=»s» size=»3″ multiple> <optgroup label=»Список»> <option value=»1″>1 элемент</option> <option value=»2″>2 элемент</option> <option value=»3″ selected>3 элемент</option> <option value=»4″>4 элемент</option> </optgroup> </select>

 Многострочное текстовое поле — тег textarea

Довольно часто в формах используется многострочное текстовое поле. Обычно это делается при отправке почтовых сообщений и комментариев. Элемент, создающий такое поле, называется textarea. Вся конструкция может выглядеть примерно так:

<textarea maxlength=»1000″ name=»area» rows=»5″ cols=»30″> </textarea>

Атрибут maxlength задает максимальное количество символов, вводимых в поле. Атрибуты rows и cols – это число строк и символов в строке соответственно. Стоит помнить, что размеры формы не являются фиксированными – ее всегда можно расширить. Однако при загрузке страницы она будет появляться именно с размерами, указанными в rows и cols.

Кнопки в HTML — форме

Последние элементы, о которых мы поговорим – это кнопки. Типичная кнопка отправки формы может выглядеть так:

<input type=»submit» value=»Послать»>

В атрибуте value указывается надпись, которая будет отображаться на кнопке. Что касается type, то здесь может быть несколько вариантов. Submit создает кнопку подтверждения и отправки данных. Reset создает кнопку сброса всех введенных полей в изначальное состояние. Button

Source: web-sprints.ru

Читайте также

Поле с изображением | htmlbook.ru

Для отправки формы на сервер применяется кнопка Submit, которая имеет слабые средства по настройке своего вида. Чтобы не ограничивать дизайн и расширить возможности по оформлению форм, используйте поле с изображением, аналогичное по своему действию кнопке Submit. При нажатии на рисунок данные формы отправляются на сервер и обрабатываются программой, заданной атрибутом action тега <form>.

Поле с изображением создаётся следующим образом.

<input type="image" src="URL" alt="альтернативный текст"> 

Здесь URL это адрес изображения в формате JPEG, PNG или GIF, alt указывает альтернативный текст, который виден при отключении картинок в браузере. Вообще, это поле похоже на добавление в код изображения и работает подобно элементу <img>.

В примере 1 показано использование поля с изображением.

Пример 1. Кнопка с изображением

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Загрузка файла</title>
  <style>
   body { background:  #053f38; color: #98baba; }
   p.question { color: #ffd595; }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p>В  какую игру вы предпочитаете играть?</p>
   <p><input type="radio" name="game" value="1"> Руммикуб</p>
   <p><input type="radio" name="game" value="2"> Колонизаторы</p>
   <p><input type="radio" name="game" value="3"> Каркассон</p>
   <p><input type="radio" name="game" value="4"> Зельеварение</p>
   <p><input type="image" src="images/okbutton.png" alt="OK">
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Форма с графической кнопкой

В отличие от кнопки Submit на сервер также отправляются координаты точки щелчка по изображению в виде x и y. Отсчёт координат ведётся от левого верхнего угла картинки и указывается в пикселах. Если добавить к полю с изображением уникальное имя через атрибут name, например, ok, тогда координаты передаются в виде ok.x и ok.y, где впереди через точку стоит имя поля.

Простое добавление картинок | Web On Life

Не знаю как в других с CMS а у Drupala с вставкой картинок всегда было чуть сложнее чем могло быть. По моему, такие вещи как картинки и нормальная форма комментариев нужны любому сайту, и я бы хотел видеть всё это в базовой версии. Про комментарии есть отдельная статья, а мы сейчас займёмся картинками.
Кому интересно могут почитать немного теории Остальные могут смело переходить к разделу Drupal и картинки.

Как вставить картинку в HTML документ.

Первое о чём вы должны знать — картинка не является частью HTML файла. Картинки вставляются при помощи тега <img>. Происходит это следующим образом. Браузер получив HTML файл находит в нём тег <img src=»http://адрес сайта/папка с картинками/названиекартинки.jpg»>. После этого он скачивает картинку расположенную в http://адрес сайта/папка с картинками/названиекартинки.jpg и вставляет её вместо тега. В теге <img> кроме атрибута src, содержащего адрес, есть ещё пара интересных для нас атрибутов. alt — альтернативный текст. Выводится вместо картинки если её не возможно скачать. Title, как и alt, служит для описания картинки, с той разницей, что текст из этого атрибута будет появляться при наведении курсора на картинку. Подробнее про тег <img> читайте в <a>webonlife-справочнике</a>.

Drupal и картинки.

Чтобы вставить картинку в нужное место нам нужно:

1. Закачать картинку на сервер.
2. Вставить в нужное место тег <img>

Для закачивания картинок можно воспользоваться FileZilla. Тут описано как работать с этим ftp-клиентом. Картинки на месте, переходим на страницу создание контента.

Жмём кнопку добавления картинки. В открывшемся окне вписываем адрес изображения в поле Image URL, жмём Insert. Вы наверное заметили кроме адреса ещё несколько полей. Они нужны для определения отступов, границ, размеров. Но для нас это лишнее.

Трудности с которыми вы можете столкнуться:

1. Нет кнопки в редакторе.
2. После нажатия Insert картинка не вставилась.

В первом случае просто настройте редактор. Как это сделать читайте в статье Настраиваем редактор и режим форматирования . Со вторым случаем немного сложнее. Сначала проверьте фильтры. Вы могли запретить все теги или не включить <img> в разрешённые или составили такую очерёдность фильтров при которой нужные теги вырезаются. Как настраивать фильтры читайте в статье про редакторы и режимы форматирования,ссылку давал выше. Список фильтров и условия фильтрации найдёте под окном редактора. На картинке в списке разрешённых присутствует тег <img>, но картинка всё равно не вставилась.

Вероятно был указан неправильный адрес. Проверить правильность адреса картинки можно введя его в адресную строку браузера. Загрузилась картинка — url правильный, вышла ошибка или другая картинка — что-то напутали в адресе.

Быстро и просто вставить картинку в Drupal с помощью модуля.

Добавление изображений через кнопку в редакторе не самое лучшее решение. Не нужно забывать что мы используем CMS, и если чего-то нет или есть, но работает не так как хотелось, поищи модуль. Не скажу, что испробовал все модули друпала для вставки картинок, но несколько забраковал прежде чем нашёл идеальный. Сразу уточню, что идеальность модуля я определял из своих желаний и потребностей. Такие опции как обзор всех картинок закаченных пользователем или всех картинок на сервере мне не нужны. Модуль Insert. Он поможет нам вставлять картинки, при этом процесс будет проходить легче, проще, веселей. Качаем модуль https://drupal.org/project/insert и ставим как обычно.

Прежде чем продолжить настраивать модули определим какого размера должна быть вставляемая картинка. Переходим Configuration → Media → Image style → Add style. Вводим название для стиля жмём create new style и приступаем к настройке.

Нам предлагают несколько вариантов обработки изображения. Мы задаём размеры для изображений в тексте, поэтому ширина картинки не должна быть больше чем блок с текстом. В моём примере ширина задана 600px. Для этого в выпадающем списке выбираем Scale, жмём Add, указываем размеры. Для Scale мы можем указать либо ширину либо высоту. В моём случае ширина картинки будет уменьшаться до 600px при этом высота будет изменяться пропорционально, то есть искажение картинки не произойдёт. Картинки можно не только уменьшать но и увеличивать, для этого должна быть отмечена опция Allow Upscaling.

Бывают ситуации когда нам нужны картинки с определённой шириной и высотой. Scale для этого не подходит, а вот Scale and Crop самое то. Также для получения картинок фиксированного размера можно использовать Resize. Отличаются они тем, что Resize изменяет размеры картинки на заданный не соблюдая пропорций, а Scale and crop сперва подгоняет картинку под размеры, а потом отрезает лишнее. Ещё можно использовать отдельно Scale с включённой опцией Allow Upscaling и следом Crop. В этом случае можно настроить какая часть картинки будет обрезаться.

Теперь переходим на страницу управления полями для типа материала Basic Page (Structure → Content type → Basic page → Manage field) и добавляем там поле для картинок. Basic Page я взял для примера. Всё что будет описано дальше нужно повторить для всех типов материалов в которых вы будете вставлять картинки модулем Insert. Как добавить поля к типу контента читайте здесь или сделайте как на скрине.

После сохранения нам предложат выбрать картинку по умолчанию. Нам это не нужно. Жмём Save field setting и оказываемся на странице настройки поля. Отмечаем Enable Alt field и Enable Title field — это позволит нам добавлять к картинкам атрибуты alt и title, что полезно для продвижения сайта. В Preview image style я выбираю thumbnail. Количество картинок (number of values) ставим unlimited.

С основными настройками закончили, начинаем настраивать модуль Insert. Чтобы модуль заработал отмечаем Enable insert button. Use absolute Paths — на ваше усмотрение. Enable insert style — выбираем стиль для вставляемых картинок. Можно отметить несколько. Default insert style — стиль картинки по умолчанию. Здесь выбираем созданный нами стиль. Сохраняем настройки.

Последнее что мы должны сделать это скрыть поле с картинками. Если мы этого не сделаем то все изображения, которые мы вставляем, будут выведены после текста.

Переходим на страницу добавления/редактирования материалов и проверяем работу модуля Insert. Под окном редактора у нас появилось поле NODE_IMAGE с формой добавления файлов. После загрузки картинки заполните поля alt и title, поставьте курсор в то место куда нужно вставить картинку и нажмите insert.

Самые наблюдательные могли заметить, что напротив картинки указан её размер. 456KB пожалуй слишком для одного изображения. Здесь указывается размер исходного изображения, а то что вставилось в статью после уменьшения весило около 60KB. Я бы рекомендовал вам вставлять картинки в формате jpg. Не знаю с чем связано, но при уменьшении размеров .png файлов Drupal увеличивает их вес.

Отображение картинки на сайте в произвольном поле

И самое главное — аналогичное как можно реализовать на главной странице. Чтобы не прописывать в шаблоне адрес к картинке, а чтобы через админку устанавливать, менять.

С помощью другого типа произвольных полей, например, поле изображение + поле текстовое, либо поле wysiwyg

А где выбирается этот тип полей? Вроде в админке ничего такого нет.

И самое главное, как это сделать на главной странице? Шаблон главной страницы есть. Но его же через админку открыть как запись нельзя. И в «Страницы» тоже не откроешь.
Соответственно, произвольное поле не добавишь.

Получается без плагина Advanced Custom Fields тут не обойтись?

(@sevlad)

wp.me/3YHjQ

Получается без плагина Advanced Custom Fields тут не обойтись?

Кроме ACF есть масса других плагинов для удобной работы с ПП.
А если есть базовые знания php можете сами сделать метабокс для этого.

Однако на скрине я вижу не отобразившуюся картинку (перед названием в п1). Значит она откуда-то берётся.

На скрине — то, что было изначально. Это я уже сделал. Разбил текущую запись тегом more, все что сверху, картинка, как раз и отображается там.

Вопрос как вывести на главной странице сайта такую картинку девушки. Произвольные поля для главной не поставишь. Разбить запись тоже не получится. Стандартно через админку. И еще ведь надо чтобы человек, который далек от сайтов, смог сам поменять картинку эту без проблем.
Видимо только через плагин какой на главную и получится вывести.
Можно и через php, знания небольшие есть, но надо знать где ковырять. Так что вряд ли этот вариант мне подойдет.

(@sevlad)

wp.me/3YHjQ

Вопрос как вывести на главной странице сайта такую картинку девушки.

Да хоть космонавта 🙂 Что значит «как»? Берёте нужный код* нужного произвольного поля и вставляете в нужный шаблон темы (дочерней дабы не потерять возможность обновления) в нужном месте.

*«Нужный код» определяется решением которые Вы используете для заполнения ПП. У плагинов свои наименования полей и возможности кода — это надо смотреть в их документации.

Произвольные поля для главной не поставишь.

Чёй-то? Всё поставишь.

Можно и через php, знания небольшие есть, но надо знать где ковырять. Так что вряд ли этот вариант мне подойдет.

Только так, если хотите сделать по-уму.

Чёй-то? Всё поставишь.

Стандартными средствами? Или плагином?

Только так, если хотите сделать по-уму.

Хочу так сделать. Может есть под рукой статья про это как можно сделать? Хотя бы направление задать.

(@sevlad)

wp.me/3YHjQ

Стандартными средствами? Или плагином?

Стандартной правкой шаблонов темы c использованием стандартных функций 🙂
Но может и плагины, но это уже не по уму (в данном случае).

Может есть под рукой статья про это как можно сделать? Хотя бы направление задать.

Нужные ссылки даны выше. Вы их не видите?

Нужные ссылки даны выше. Вы их не видите?

Упс, читал сообщение из почты, там не видел что это ссылки.
Спасибо, буду изучать ))

Берёте нужный код* нужного произвольного поля и вставляете в нужный шаблон темы (дочерней дабы не потерять возможность обновления) в нужном месте.

Вставка кода произвольного поля без проблем получается на дополнительных шаблонах. Создаю новую запись, там выбираю ПП, указываю ссылку на картинку как вариант. В нужном месте шаблона ставлю код отображения ПП.
На главной же не пойму как это сделать. Главная не редактируется как запись, чтобы присвоить ПП какое-то значение. Какой там код указать для вывода, если значение ПП будет пустое, по сути.
И еще больший вопрос как потом человек будет менять картинку?

(@sevlad)

wp.me/3YHjQ

На главной же не пойму как это сделать.

Это смотря как она у Вас сделана. Но в целом так же.
Возможно нужны доп условия (ссылка на функции тоже есть выше).

И еще больший вопрос как потом человек будет менять картинку?

См выше:

Кроме ACF есть масса других плагинов для удобной работы с ПП.
А если есть базовые знания php можете сами сделать метабокс для этого.

Как сделать метабокс — погуглите, по рукой нет рецептов. Но есть такой адресок https://generatewp.com/ (и это не единственный сервис такого плана :))

Попробовал более простым путем — Advanced Custom Fields плагин.
Хорошая вещь, но добавляет картинку в поле для статей.
На главную страницу как-то не выводит средствами админки. Надо допиливать, видимо.