Создание форм в html: Формы и поля в HTML. Все о HTML формах

Формы в HTML. Урок 8

Содержание:

• Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8 Урок 9 Создание html-документа Структура html-документа Абзацы Заголовки Служебные теги Изображения Ссылки Списки Таблицы Формы Видео Аудио Справочник HTML Справочник CSS Создать сайт на HTML\CSS

Основным элементом для создания форм в HTML служит тег <form>, а самая простейшая форма имеет два текстовых поля и кнопку. Ничего сложного в создании такой формы нет, а мы будем использовать её в качестве рабочего примера:

Стоит отметить, что более сложные формы могут также иметь текстовые области — расширенные текстовые поля; чекбоксы — переключатели, где галочкой отмечается согласие со значением пункта; радио-кнопки, которые служат для выбора одного из предложенных вариантов. Рассмотрим эти элементы ниже.

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

Вот так будет выглядеть каркас нашей формы:

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" name="Любое" target="_blank">
...
</form>

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

1. action — адрес обработчика данных формы. Это может быть локальный скрипт на вашем сайте, а в данном примере — это URL сервиса рассылок.
2. method — определяет метод запроса данных: post — закрытая передача данных через запрос браузера, он наиболее распространённый. Метод get подразумевает открытую передачу данных через адресную строку браузера и используется реже.
3. name — необязательный атрибут, который задаёт название формы. Актуально при использовании нескольких форм, или, если имя формы необходимо для работы определённого скрипта.
4. target — необязательный атрибут, при значении _blank загружает URL обработчика данных в новой вкладке браузера.

Для создания элементов формы используется незакрывающийся тег <input> с обязательным атрибутом type, который имеет множество значений (см. Справочник HTML — Input).

Нам же для создания двух текстовых полей понадобятся два тега <input> со значением "text" атрибута type. А для создания кнопки — парный тег

                
<form action="http://smartresponder.ru/subscribe.html?ref=regg" method="post" target="_blank">
<input type="text" name="field_name_first" placeholder="Ваше Имя">
  <input type="text" name="field_email" placeholder="Ваш E-mail">
  <button type="submit" name="lead_subscribe">Получить бесплатно!</button>
</form>

Вот что означают атрибуты тега <input> в нашей форме:

1. type — значение «text» означает текстовое поле. Значение «password» — текстовое поле для ввода пароля с отображением звездочек; «range» — ползунок; «reset» — кнопка сброса и др. (подробнее: Справочник HTML — Input).
2. name — имя полей.
3. placeholder — видимый текст в поле формы, при наведении фокуса — исчезает. Как вариант: атрибут value — значение по умолчанию, при сбросе пользователем введённых данных — восстанавливается первоначальная текстовая надпись.

Вот как будет выглядеть готовая форма, если её поместить в контейнер <div> и выравнять по центру:

Чекбоксы и кнопки

Для создания чекбоксов и радио-кнопок также используется тег <input>, разница только в значениях атрибута type:

                
<form action="URL" method="post">
<input type="checkbox" name="box" value="1">Поставьте галочку, если согласны
<input type="radio" name="radiobutton" value="1">Красный
  <input type="radio" name="radiobutton" value="2">Жёлтый
  <input type="radio" name="radiobutton" value="3">Зелёный

</form>

Имена (значения атрибута name) у тегов произвольные, но для радио-кнопок одной группы они должны совпадать. Визуальный результат:

Атрибуты name и value не являются обязательными, а используются при обработке данных формы с помощью скриптов, к примеру, это может быть JavaScript.

Осталось узнать о двух тегах, которые используются для создания сложных форм: <textarea> и <select>.

Текстовая область

Чтобы сделать текстовую область, куда допустимо ввести текст из нескольких строк с сохранением переносов, используем тег <textarea>:

                
<form action="URL" method="post">
<textarea rows="5" cols="30">Ваша биография</textarea>
</form>

Атрибуты rows и cols являются обязательными для версий ниже HTML5 и задают число строк и их общую длину. Получаем следующую текстовую область, которая может вмещать 5 строк по 30 символов в каждой:

Создание выпадающего списка

Для создания выпадающего списка используем тег <select>, а для его отдельных элементов тег <option>:

                
<form action="URL" method="post">
<select name="forscript">
      <option value="1">Элемент 1</option>
      <option value="2">Элемент 2</option>
      <option value="3">Элемент 3</option>
      <option value="4">Элемент 4</option>
  </select>
</form>

Получаем выпадающий список из 4-х элементов:

Содержание:

• Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8 Урок 9 Создание html-документа Структура html-документа Абзацы Заголовки Служебные теги Изображения Ссылки Списки Таблицы Формы Видео Аудио Справочник HTML Справочник CSS Создать сайт на HTML\CSS

Поделиться с друзьями:

получить

Сайт с нуля

получить

Создание форм в HTML

Я абсолютно уверен, что, бегая по Интернету, Вы ни раз встречали различные формы, например, форму регистрации, форму входа в систему, форму обратной связи и многие-многие другие HTML формы.

Собственно, форма состоит из различных элементов ввода: текстовых полей, текстовых областей, радио-кнопок, переключателей, кнопок и так далее.

И в этой статье Вы научитесь создавать абсолютно любые формы в HTML.

Сначала создайте простейшую HTML-страницу, в которую добавьте контейнер (тег <div>), выравнивающий своё содержимое по центру. Надеюсь, что Вы с этим без труда справитесь.

А теперь займёмся формой. Форма начинается с тега <form>, соответственно, заканчивается закрывающим тегом </form>. У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега

Здесь у нас начинается описание формы, у которой есть следующие атрибуты:

1) Атрибут «name«. Значение этого атрибута означает имя HTML формы. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я

2) Атрибут «action«. Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику и находится в значении атрибута «action«.

3) Атрибут «method«. У него может быть одно из двух очень популярных значения: «post» и «get«. Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:

а) http://mysite.ru/scipt/request.php

б) http://mysite.ru/script/request.php?a=7&b=Michael

В первом случае, пользователь не видит, что отправляет (метод «post«), а во втором он реально видит имена переменных и их значения (метод «get«). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО чаще используют метод «post«, то есть скрытую отправку.

Это было описание самой формы, а теперь же можно заняться добавлением элементов в форму.

Первое, что мы добавим — это текстовое поле. Добавляется текстовое поле с помощью тега <input>, а точнее с помощью атрибута этого тега «type» со значением «text«. Также перед созданием текстового поля рекомендуется написать, что это за поле, например, «Ваше имя«. Внутри тега <form> напишите такую строчку:

Опять же, давайте разберём атрибуты:

1) Атрибут «type» отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.

2) Атрибут «name» отвечает за имя элемента. Здесь мы указали, что имя данного поля firstname.

3) Атрибут «value» отвечает за значение этого поля по умолчанию.

Как говорится, лучше один раз увидеть, чем сто раз услышать, поэтому лучше Вы наберите (причём, именно наберите, а не скопируйте!) этот текст в редакторе, а потом посмотрите результат в браузере.

Теперь создадим ещё одно похожее поле, но только не для ввода обычных символов, а для ввода пароля. То есть должно быть всё то же самое, но только текст должен быть скрыт за звёздочками. Поэтому, перейдя на следующую строку (тег <br>), напишем такой код:

Как видите, теперь значением атрибута «type» является «password«. Остальные атрибуты те же, что и для обычного текстового поля.

Следующий элемент — это выпадающий список. Создаётся он чуть посложнее, так как тут необходимо не только объявить создание выпадающего списка, но ещё и добавить элементы в этот список. Напишем, перейдя на следующую строку (далее, упоминать об этом не буду) следующий HTML-код.

Тег <select> означает начало выпадающего списка. Заканчивается список тегом </select>. Атрибут «name» ясен, ибо уже объяснял его несколько раз. Элементы списка создаются с помощью тега <option>. Значение атрибута «value» означает, какой значение будет у переменной choice (например, в JavaScript), то есть либо choice = 1, либо choice = 2, либо choice = 3. Сразу после окончания описания тега <option> ставится то, что увидит пользователь в выпадающем списке. Опять же, лучше посмотрите в браузере, и Вам всё сразу станет понятно.

Теперь добавим текстовую область, используя тег <textarea>:

Здесь мы с Вами создаём текстовую область высотой в 10 строк (значение атрибута «rows«) и шириной в 15 символов (значение атрибута «cols«).

Внутри этого парного тега указывается текст в текстовой области по умолчанию. Собственно, здесь больше нечего сказать. Двигаемся дальше.

Следующий элемент — это радио-кнопка. Радио-кнопка — это набор таких «кружочков«, из которых можно выбрать только один. Создаются радио-кнопки с помощью HTML-тега <input>, а, точнее, с помощью значения «radio» атрибута «type«. Напишем такой HTML-код:

Тут я остановлюсь на атрибуте «name«, потому что помимо задания имени у него есть ещё одна очень важная особенность. Если Вы НЕ сделаете одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Чтобы в этом убедиться, поменяйте имена, а потом попытайтесь выбрать сразу несколько вариантов, и Вы сразу убедитесь в моих словах. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута «name«. Атрибут «value» означает значение переменной «choiceradio» (опять же, например, в JavaScript). Сразу после описания тега <input> идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

Ещё одним элементом формы являются переключатели (checkbox). Создаются они опять же с помощью тега <input>. Напишем следующие строчки:

Я думаю, что здесь всё прозрачно, поэтому объяснять не буду. Советую лишь просто посмотреть, как это выглядит, в браузере. И скажу, что если флажок будет стоять, то значение переменной «terms» будет «yes«, если не будет стоять, то значение этой переменной будет «», то есть пустой строкой.

Ещё одним элементом является поле для выбора файла. Наверняка, Вы когда-нибудь загружали файлы на сервер и Вам часто приходилось использовать для этого поле вставки имени файла. Вот такое поле создаётся с помощью уже надоевшего тега <input>. Напишем так:

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

Теперь займёмся двумя последними элементами — это кнопки. Их две: обычная кнопка и кнопка «submit«. Начнём с обычной кнопки. Создаётся кнопка с помощью тега <input>. Например, так:

Значение атрибута «type» уже «button«, что сообщает браузеру, что это кнопка. Атрибут «name» — это имя кнопки, а значение атрибута «value» отвечает за текст на кнопке. Обрабатывать эту кнопку мы не будем, так как мы проходим не JavaScript, а основы HTML, но в будущем обязательно это сделаем.

И последний элемент — это кнопка «submit«, при нажатии на которую форма отправляется на обработку к файлу, указанному в атрибуте «action» тега <form>. Добавляется это кнопка так:

Как видите, создать кнопку «submit» очень просто: для этого необходимо поставить значение «submit» атрибута «type» тега <input>. А атрибут «value» содержит текст, который пользователь увидит на кнопке.

Теперь, напоследок, советую посмотреть разницу между значениями «post» и «get» атрибута «method» тега <form>. Разницу можно увидеть в адресной строке при нажатии на кнопку «submit«.

После того, как наиграетесь с формой, то результат должен быть таким:

Как видите, опять ничего сложного. Как видите, создать свой сайт — это совсем не сложно. Единственная проблема, как это всё запомнить? Ответ очень прост: практика, практика и ещё раз практика!

Всего доброго!

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

• Создано 29.04.2010 10:46:27
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Как создать форму в HTML

Сбор данных от пользователя веб-сайта может осуществляться несколькими способами. Формы на веб-сайтах могут иметь простую функцию, такую ​​как подписка пользователя на информационный бюллетень, или более сложную цель, например, выступать в качестве формы заявления о приеме на работу.

Однако у всех этих простых и сложных форм есть одна общая черта — это HTML, а точнее HTML-тег

  
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 
 
 
 
Форма заявки
 
 
  
 
 
 
 
 Имя: 
 
  
 
 Фамилия: 
 
  
 
 
 
 
 
 
 
 Дата рождения: 
 
  
 
 Возраст: 
 
  
 
  
 
 
 
 
 Пол: 
 
  
 
 
Мужской 
 
 
Женщина 
 
 
Другое 
 
  
 
 Адрес электронной почты: 
 
  
 
 
 
 
 
 
 
 Доступные должности: 
 
  
 value="Junior Developer"> Младший разработчик 
 
  
 value="Разработчик среднего уровня"> Разработчик среднего уровня 
 
  
 value="Senior Developer"> Senior Developer 
 
 
 
 
 
 
 
 Языки программирования:< /label> 
 
  Java 
 
  JavaScript 
 
  Python 
 
 
 
 
 
 
 
 Пароль: 
 
  
 
 Подтвердить пароль:< /label> 
 
  
 
 
 
 
 Отправить 
 
 Сброс