Как создать поля форм?

2 ноября 2014 г. Просмотров: 353 Инструкции

Обработкой данных, которые посетители отправляют на сервер после заполнения веб-форм, занимается специальная программа (скрипт). Поэтому добавлять поля в размещенную на интернет-странице форму имеет смысл только в том случае, если в скрипт запрограммированы функции работы именно с этими полями. Если это условие соблюдено, останется проделать относительно несложную часть работы по добавлению в исходный код страницы тегов, формирующих нужные поля.
Создать сайт самостоятельно с Wix.com

Вам понадобится

  • Базовые знания языка HTML.

Инструкция

  • Операцию по формированию необходимых тегов может взять на себя редактор страниц, если у вас есть возможность использовать в нем режим визуального редактирования. Такой редактор может быть составной частью системы управления сайтом — войдите в него и загрузите страницу с формой, в которую следует добавить новые поля. Используйте операции копирования и вставки — выделите и скопируйте пару существующих элементов (поле ввода и сопоставленный ему текст), затем кликните на странице место, куда следует поместить дополнительное поле, и вставьте скопированное.
  • После этого отредактируйте свойства каждого элемента пары в отдельности. Надпись просто выделите мышкой и наберите новый текст, а для поля ввода используйте кнопку в панели редактора, открывающую его свойства. В свойствах вам, как минимум, надо изменить значение в поле name - оно должно соответствовать названию поля, запрограммированному в обрабатывающем скрипте. Повторите копирование/вставку для необходимого набора полей и сохраните страницу.
  • Если доступа к визуальному редактированию нет, откройте исходный код страницы в любом текстовом или специализированном редакторе и допишите в него нужные теги. Этот способ требует некоторого знания языка HTML и методов верстки веб-страниц. Для добавления в форму простого текстового поля используйте тег input, вписав в атрибут type значение text. Кроме этого атрибута обязательным является только name - он должен содержать известное скрипту-обработчику имя этого поля формы. С помощью других атрибутов можно задать количество знаков, визуально определяющих длину поля ввода (атрибут size), максимальное допустимое количество знаков (maxlength), параметры стиля оформления (style), принадлежность к слассу (class) и др. Выглядеть этот тег в коде может, например, так:
  • Для поля многострочного текста используйте тег textarea. Он состоит из двух частей - открывающей и закрывающей. В первой надо обязательно задать значение name, а с помощью атрибутов rows и cols можно установить количество строк и колонок этого элемента формы. Например:
  • Другими типами полей формы могут быть чекбоксы - для их формирования тоже используйте тег input, но в отличие от однострочного текстового поля в атрибуте type указывайте значение checkbox. Если этот элемент формы должен быть отмечен, добавьте в его тег атрибут checked. Например:
  • Для вставки в форму поля выбора и загрузки файла используйте все тот же тег input со значением file в атрибуте type. Например:
  • Более сложная конструкция формирует поле с выпадающим списком. Она обязательно должна содержать пару из открывающего и закрывающего тегов select. Между ними поместите пары тегов option, каждая из которых задает одну строку выбора. В открывающих тегах должен присутствовать атрибут value (его значение будет передано на сервер), а между открывающей и закрывающей частями поместите текст, который будет видеть в этой строке списка посетитель. Например: Первая строка выбора Вторая строка выбора Третья строка выбора
  • Оцените статью!