Как создать html форму: Создание HTML форм

Как сделать форму в HTML для сайта

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто  на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

На рисунке представлена форма регистрации студента на сайте образовательного учреждения.

Для создания формы используется контейнер <form></form> с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.

Структура простейшей формы:

<formaction="адрес страницы обработчика формы">
элементы форм…
</form>

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

Структура кнопки:

<input type="submit" name="имя кнопки" value="отображаемое имя">

Итак, для записи практически всех элементов форм используется тэг <input> с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:

<input type="reset" name="имя кнопки" value="отображаемое имя">

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

<form action="obrabotka.php">
Введитеимя:<br>
<input type="text" name="name" size=”15” maxlength=”20” value="" ><br>
Введите фамилию:<br>
<input type="text" name="surname" size=”20” maxlength=”25” value="" ><br>
<input type="submit" name="otpravit" value="Отправить">
<input type="reset" name="ochistit" value="Очистить">
</form>

Результат работы формы представлен на рисунке.

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга <textarea> со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).

К вышеуказанному коду добавим поле текстовой области:

Комментарий:<br><textarea name="area" cols=”25” rows=”5” wrap=”on”></textarea>

Результат работы кода с текстовой областью представлен на рисунке.

Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги <option> с параметром value, отвечающем за значение элемента и <select> с параметрами name, в котором указывается имя списка, size, отвечающего за число видимых элементов.

Структура записи списка:

<select name="имя списка" size="число видимых элементов"><
 <option value="значениеэлемента">текст</option>
 <option value="значение элемента">текст</option>
 </select>

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге <option> дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

Флажок:

<input type="checkbox" name="имя флажка" value="значение">текст

Радиокнопка:

<input type="radio" name="имя радиокнопки" value="значение"> текст

В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга <input> со значением button:

<input type=»button» name=»имя кнопки» value=»значение»>

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

<input type=»button» name=»подсказка» value=»Помощь»></button>

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

Для вставки изображения в кнопку используется код, представленный в следующем примере:

<input type="button" name="подсказка"><img src=”изображение.jpg”></button>

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

<input type="password" name="pass" size=”длинаполя” maxlength=”максимально возможная длина пароля” value="значение по умолчанию" >

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

<inputtype="hidden" value="значение по умолчанию">

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

<input type=”file” size=”длинаполя”>

Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.

Визуальное оформление HTML формы. Bootstrap

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

В наше время сложно представить сайт без форм — мы сталкиваемся с ними каждый раз при оформлении заказа пиццы и при регистрации на сайтах. Они позволяют нам отправлять запросы с введенными нами данными на удаленные сервера. И именно о формах мы поговорим в этом уроке.

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

Чтобы создать форму используется тег <form> с двумя атрибутами:

• Атрибут action. С его помощью указывается адрес, на который отправятся введенные на форме данные
• Атрибут method. С его помощью указывается HTTP-метод отправки формы (get, post, put, и т.д.). Подробнее о разных методах читайте тут и тут.

Внутри тега form размещаются непосредственно поля для заполнения данных и кнопка для отправки формы.

Чтобы создать текстовое поле для ввода нужно воспользоваться тегом <input> со следующими атрибутами:

<input type="text" name="text">

type — говорит о том, что это просто текстовое поле;
name — это имя поля, которое отправится в запросе на сервер, а его значением будет то, что мы введем в нем на форме.

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

<input type="submit" value="Отправить запрос!">

Давайте создадим свою простейшую форму, которая будет формировать поисковый запрос в Яндекс. У Яндекса для формирования поискового запроса используется query-параметр в адресной строке с именем text, поэтому имя нашего текстового поля такое же. Чтобы отправить поисковый запрос нужно отправить get-запрос на адрес:
https://yandex.ru/search/?text=PHP

Давайте сформируем форму для поиска в Яндексе:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма поиска в Яндексе</title>
</head>
<body>
<form action="https://yandex.ru/search/">
    <input type="text" name="text">
    <input type="submit" value="Найти в Яндексе">
</form>
</body>
</html>

Форма будет выглядеть так:

Теперь, когда мы нажмём на кнопку, мы попадём на страницу поиска в Яндексе:

А в адресной строке будет следующее:
https://yandex.ru/search/?text=PHP

Таким образом, мы передали содержимое поля с именем text в параметр text на странице поиска в Яндексе.

Подписи к полям ввода

Чтобы привязать к полю ввода подпись используется тег <label> с атрибутом for, в котором указывается id инпута. Этот id, разумеется, нужно заранее добавить.

Вот как это будет выглядеть на примере.

<label for="loginField">Логин</label>
<input type="text" name="login">

<label for="emailField">Email</label>
<input type="text" name="email">

Результат в браузере:

Теперь если нажать на текст рядом с полем ввода, то курсор для ввода данных переключится на соответствующее поле

Создаём форму авторизации на HTML

Давайте создадим самую простую форму для авторизации на сайте. Для этого нам необходимы два поля. Первое поле – для логина, второе – для пароля.

Пример:

<form method="post" action="/login/">
    <table>
        <tr>
            <td><label for="loginField">Логин</label></td>
            <td><input type="text" name="login"></td>
        </tr>
        <tr>
            <td><label for="passwordField">Пароль</label></td>
            <td><input type="text" name="password"></td>
        </tr>
    </table>
</form>

Результат в браузере:

Со вторым полем не все в порядке. Поскольку на текущий момент оно представляет собой просто поле для ввода текста, вводимый пароль отображается на экране монитора. Не секьюрно! К счастью, специально для паролей для инпута есть тип password.

В итоге код нашей формы получится следующим:

<form method="post" action="/login/">
    <table>
        <tr>
            <td><label for="loginField">Логин</label></td>
            <td><input type="text" name="login"></td>
        </tr>
        <tr>
            <td><label for="passwordField">Пароль</label></td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Войти"></td>
        </tr>
    </table>
</form>

Результат в браузере:

Вот и получилась наша формочка авторизации на HTML. Изи!

Тег textarea — многострочное поле ввода:

Для создания многострочного поля используется тег <textarea>. Этот тег является парным, в отличие от <input>. А ещё для управления его шириной и высотой можно управлять с помощью атрибутов cols и rows соответственно.

На примере выглядит вот так:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма поиска в Яндексе</title>
</head>
<body>
<form method="post" action="/im/">
    <label for="nameField">Имя</label><br>
    <input type="text" size="30" name="name">
    <br>
    <label for="messageField">Сообщение</label><br>
    <textarea name="message" cols="50" rows="10">Введите здесь своё сообщение...</textarea>
    <br>
    <input type="submit" value="Отправить сообщение">
</form>
</body>
</html>

Результат в браузере:

Чекбокс

Чекбокс создается тегом <input> с атрибутом type=»checkbox». Если чекбокс на форме отмечен, то на бэкенд уйдет переменная с именем инпута, а иначе — нет. Чтобы чекбокс на форме был отмечен по умолчанию, то нужно добавить атрибут checked. Выглядеть это будет вот так:

<form action="/order">
    <label>
        Завтрак
        <input type="checkbox" name="breakfast" checked>
    </label>
    <br>
    <label>
        Обед
        <input type="checkbox" name="lunch">
    </label>
    <br>
    <label>
        Ужин
        <input type="checkbox" name="dinner" checked>
    </label>
</form>

Радиобаттон

Радиобаттон создается тегом <input> с атрибутом type=»radio». Он служит для выбора одного варианта из нескольких. Все варианты должны иметь одинаковый атрибут name и разные атрибуты value. Значение атрибута value отмеченного радиобаттона будет отправлено на бэкенд.

<form action="/order">
    Выберите цвет футболки:
    <br>
    <label>
        <input type="radio" name="color" value="red">
        Красная
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="blue" checked>
        Синяя
    </label>
    <br>
    <label>
        <input type="radio" name="color" value="green">
        Зелёная
    </label>
</form>

Результат:

Форма для загрузки файлов

Чтобы создать форму для загрузки файлов, использутеся тег <input> с типом file. При этом самой форме нужно прописать атрибут enctype=»multipart/form-data»:

<form action="/upload" method="post" enctype="multipart/form-data">
    <label for="fileField">Выберите файл для загрузки:</label>
    <input type="file" name="uploadingFile">
</form>

А вот так будет выглядеть наше получившееся поле:

На этом с формами всё. За домашку!

Создание простой формы обратной связи на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

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

Также скачайте исходники себе на компьютер!

Итак, начнем.

Шаг 1.

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

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Простейшая и крутейшая форма</title>
</head>
<body>
<div>
<form >
<p>
<input type=»text» name=»name» value=»Имя автора» />
<label for=»name»>Имя</label>
</p>

<p>
<input type=»text» name=»email» value=»[email protected]» />
<label for=»email» >E-Mail</label>
</p>
<p>
<textarea name=»msg»>Текст сообщения</textarea>
</p>
<p >
<input type=»submit» value=»Отправить» />
</p>
</form>
</div>
</body>
</html>

Думаю, что с разметкой пока ни у кого никаких вопросов не возникнет. У нас есть два поля для ввода имени автора и адреса его электронной почты, каждое поле подписано меткой <label>, одно большое текстовое поле для ввода сообщения и кнопка для отправки всего этого добра куда подальше . Пока это все добро выглядит приблизительно так:

Как видите, каждое текстовое поле имеет подсказку – текст, расположенный в поле.

Шаг 2.

Теперь самое время применить совсем немного Javascript, для того, чтобы форма стала совсем немного интерактивной. При помощи Javascript мы будем убирать подсказки из текстовых полей при выделении их курсором. Для этого изменим элементы текстовых полей следующим образом:

<input type=»text» name=»name» value=»Имя автора» onblur=»if(this.value.length == 0) this.value = ‘Имя автора'» onfocus=»if(this.value == ‘Имя автора’) this.value = » «/>
…..
<input type=»text» name=»email» value=»[email protected]» onblur=»if(this.value.length == 0) this.value = ‘[email protected]'» onfocus=»if(this.value == ‘[email protected]’) this.value = » » />
…..
<textarea name=»msg» onblur=»if(this.value.length == 0) this.value = ‘Текст сообщения'» onfocus=»if(this.value == ‘Текст сообщения’) this.value=»»>Текст сообщения</textarea>

Как видите, мы просто описываем обработку событий onblur и onfocus. Событие onfocus срабатывает, когда мы выделяем элемент формы, событие onblur срабатывает, когда мы выделяем что-либо другое, и элемент возвращается в первоначальное состояние. В общем, кусок кода выглядит так:

onfocus=»if(this.value == ‘какой-то текст’) this.value = » » (если при выделении элемента в нем каходится «какой-то текст», то сделать так, чтобы в нем ничего не находилсь, то есть » «)
onblur=»if(this.value.length == 0) this.value = ‘какой-то текст'» (если при удалении фокуса с элемента в нем находится 0 символов, поместить в этот элемент ‘какой-то текст’)

Вот как это выглядит на практике:

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

Шаг 3.

Разметка и миниатюрный сценарий готовы. Дело осталось за малым – за стилями.

Создадим файл CSS, например styles.css и присоединим его к нашему html-документу, добавив между тегами

… следующую строку:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<link rel=»stylesheet» rev=»stylesheet» type=»text/css» href=»styles.css» />

Первым делом добавим стиль блоку-контейнеру.

#container {
margin: 0 auto;
border: 3px solid #EEEEEE;
width: 800px;
-webkit-birder-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; }

При помощи определений width: 800px; и margin: 0 auto; мы задаем блоку-контейнеру ширину 800 пикселей и располагаем его по центру html-документа. При помощи остальных определений задаем границу блока-контейнера – её тип, ширину цвет, а при помощи определений CSS3 -webkit-birder-radius,-moz-border-radius и border-radius делаем углы границ закругленными. Границу контейнера делаем светлой и невыразительной, чтобы она не отвлекала внимание от более важных элементов.

Теперь, создадим определения для текстовых полей:

input, textarea {
border: solid 1px #CCCCCC;
margin-left: 10px;
padding: 4px;
outline: 0;
font: Verdana, Geneva, sans-serif;
width: 200px;
background: #F9F9F9;
-webkit-birder-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

При помощи margin-left задаем отступ от края блока-контейнера в 10 пикселей. Определение padding служит для создания пространства между текстом в текстовом поле и границей текстового поля. Кроме этого, ка видите, мы задаем цвет, стиль границы (опять закругленные углы) и ширину текстовых полей. Вот что у нас получается:

Что ж, неплохо, хотя не мешало бы как-то выделить поле для сообщения и кнопку отправки.

textarea {
width: 400px;
height: 150px;
line-height: 150%;
}
.send input {
width: auto;
margin-bottom: 10px;
border: 2px solid #E0E0F3;
font: Verdana, Geneva, sans-serif;
background-color: #E5E5F8;
}

В принципе, ничего нового. Мы просто задаем новые размеры для текстовой области, включая высоту строчки line-height. Для кнопки делаем нижний отступ до границы контейнера при помощи margin-bottom. Вот что получается:

Это уже похоже на что-то. Далее, добавляем стили меткам label, а также делаем небольшой отступ поля Имя автора от верхней границы контейнера.

p label {
margin-left: 10px;
font-style: italic;
color: #c0c0c0;
}

.name input {
margin-top: 10px;
}

Как можно видеть, метки стали светлее и теперь они меньше выделяются, но их все равно видно:

В принципе, выглядит уже довольно неплохо, однако, можно добавить еще немного визуальной интерактивности при помощи CSS:

input:hover, textarea:hover, input:focus, textarea:focus {
border-color: #A0A0A0;
}

.send input:hover {
border: 2px solid #C0C0E3;
}

При наведении курсора на элемент, его границы становятся немного темнее и четче:

Вот, в принципе и все, урок по созданию простой HTML-формы подходит к концу. Мы с вами с нуля спроектировали и написали простую интерактивную веб-форму в светлых тонах, которая в будущем станет основой первой гостевой книги, написанной, например, на PHP+MySQL.

С уважением Павел Карабило

Ваши отзывы и замечания жду в комментариях!

Автор: Карабило Павел

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

HTML Формы | Учебник HTML

Для сбора пользовательских данных используется HTML форма.
Затем вводимые пользователем данные могут быть отправлены на сервер для обработки.

Элемент <form>

HTML элемент <form> определяет форму, которая используется для сбора пользовательских данных:

<form>
.
элементы формы
.
</form>

HTML форма содержит элементы формы.

Элементы формы — это различные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и многое другое.

Элемент <input>

Элемент <input> — самый важный элемент формы.

Элемент <input> отображается несколькими способами, в зависимости от атрибута type.

Вот несколько примеров:

Вы узнаете гораздо больше о типах ввода позже в этом уроке.

Текстовое поля

<input type="text"> определяет однострочное поле ввода для ввода текста.

Пример

Форма с двумя полями ввода текста:

<form>
  <label for=»fname»>Имя:</label><br>
  <input
type=»text» name=»fname»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» name=»lname»>
</form>

Попробуйте сами »

Вот как это будет выглядеть в браузере:

Примечание: Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.

Элемент <label>

Обратите внимание на использование элемента <label> в приведенном выше примере.

Тег <label> определяет метку для многих элементов формы.

Элемент <label> полезен для пользователей программы чтения с экрана,
потому что чтения с экрана будет читать вслух надпись, когда пользователь сосредоточен на входном элементе.

Элемент <label> также помогает пользователям,
которые испытывают трудности при нажатии на очень маленькие области (например, переключатели или флажки)
— потому что, когда пользователь щелкает текст внутри элемента <label>, он переключает переключатель/флажок.

Атрибут for тега <label> должен быть равен атрибуту id
элемента <input type="radio">, чтобы связать их вместе.

Кнопки radio

<input type="radio"> определяет радиокнопки.

Переключатели позволяют пользователю выбрать один из ограниченного числа вариантов.

Пример

Форма с переключателями:

<form>
  <input type=»radio» name=»gender»
value=»male»>
  <label for=»male»>Мужчина</label><br>
  <input
type=»radio» name=»gender» value=»female»>
  <label
for=»female»>Женщина</label><br>
  <input type=»radio»
name=»gender» value=»other»>
  <label for=»other»>другое</label>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Мужчина
Женщина
другое

Кнопка submit

<input type="submit"> определяет кнопку для
представления в виде данных для обработчика форм.

Обработчик форм обычно представляет собой страницу на сервере со скриптом для обработки входных данных.

Обработчик форм задается в окне формы атрибутом action.

Пример

Форма с кнопкой отправки:

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» name=»fname» value=»Андрей»><br>
  <label for=»lname»>Фамилия:</label><br>
  <input type=»text» name=»lname» value=»Щипунов»><br><br>
 
<input type=»submit» value=»Отправить»>
</form>

Попробуйте сами »

Именно так приведенный выше HTML код будет отображаться в браузере:

Атрибут action

Атрибут action определяет действие, которое должно быть выполнено при отправке формы.

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

В приведенном выше примере данные формы отправляются на страницу на сервере под названием «/action_page.php».
Эта страница содержит серверный скрипт, который обрабатывает данные формы:

<form action=»/action_page.php«>

Если атрибут action опущен, действие устанавливается на текущую страницу.

Атрибут target

Атрибут target указывает, будет ли представленный результат открыт в новой вкладке браузера, фрейме или в текущем окне.

По умолчанию значение «_self» означает, что форма будет отправлена в текущем окне.

Чтобы сделать результат формы открытым в новой вкладке браузера, используйте значение «_blank«.

Пример

Здесь представленный результат откроется в новой вкладке браузера:

<form action=»/action_page.php.php» target=»_blank»>

Попробуйте сами »

Другими значения «_parent«, «_top«, или name, представляющее имя iframe.

Атрибут method

Атрибут method атрибут определяет метод HTTP(GET или
POST) для использования при отправке данных формы.

Пример

Используйте метод GET при отправке формы:

<form action=»/action_page.php» method=»get»>

Попробуйте сами »

или:

Пример

Используйте метод POST при отправке формы:

<form action=»/action_page.php» method=»post»>

Попробуйте сами »

Когда использовать GET?

Метод HTTP по умолчанию при отправке данных формы GET.

Однако при использовании GET данные формы будут видны в поле адреса страницы:

/action_page.php?firstname=Андрей&lastname=Щипунов

Заметка о GET:

• Добавляет данные формы в URL адрес в паре имя/значение
• Длина URL адреса ограничена (2048 символов)
• Никогда не используйте GET для отправки конфиденциальных данных! (будет виден в URL адресе)
• Эффективно для отправки форм, когда пользователь хочет добавить результат в закладки
• GET лучше подходит для незащищенных данных, таких как строки запросов в Google

Когда использовать POST?

Всегда используйте POST, если данные формы содержат конфиденциальную или личную информацию.
Метод POST не отображает данные формы в поле адреса страницы.

Заметка о POST:

• POST не имеет ограничений по размеру и может использоваться для отправки больших объемов данных.
• Отправленные формы с сообщением не могут быть закладками

Атрибут name

Каждое поле ввода должно иметь атрибут name для отправки.

Если атрибут name опущен, данные этого поля ввода вообще не будут отправлены.

Пример

В этом примере не будут представленны значения «name» в поле ввода:

<form action=»/action_page.php»>
  <label for=»fname»>Имя:</label><br>
  <input type=»text» value=»Щипунов»><br><br>
 
<input type=»submit» value=»Отправить»>
</form>

Попробуйте сами »

HTML Упражнения

Проверьте себя с помощью упражнений

Упражнение:

В приведенной ниже форме добавьте поле ввода с типом «button» и значением «ОК».

<form>

<>

</form>

Отправить ответ »

Начните упражнение

Вот список всех атрибутов <form>:

Подробнее об атрибутах формы вы узнаете в следующих главах.

HTML Формы

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

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

Пример: Простая HTML-форма

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Простая форма</title>
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Моя первая форма:<br>
    Имя: <input type="text" name="firstname" value=""><br>
    Фамилия:  <input type="text" name="lastname" value=""><br>
    <input type="submit">
  </p>
</form>
</body>
</html>      

Элемент <form>

Формы вставляются на веб-страницы посредством элемента <form>. Он представляет собой контейнер для всего содержимого формы, включая такие элементы, как текстовые поля и кнопки, а также любые другие теги языка HTML. Однако он не может содержать в себе другой элемент <form>.
Для отправки формы на сервер используется кнопка «Submit», того же результат получится, если нажать клавишу «Enter» в пределах формы. Если кнопка «Submit» отсутствует в форме, клавиша «Enter» может быть использована для отправки.
Большинство атрибутов элемента <form> влияют на обработку формы, а не на ее дизайн. Наиболее распространёнными из которых являются action и method. Атрибут action содержит URL, на который информация в форме будет отправлена для обработки сервером. Атрибут method является методом HTTP, который должны использовать браузеры для отправки данных формы.

Элемент <input>

Практически все поля для формы создается с помощью элемента <input> (от англ. input — ввод). Внешний вид элемента <input> меняются в зависимости от значения его атрибута type:

<input type="значение">

Вот некоторые значения атрибута type:

Ввод текста и пароля

Одним из самых простых типов элементов формы является текстовое поле, предназначенное для ввода текста из одной строки. Данный тип ввода текста установлен по умолчанию, а следовательно, именно однострочное поле отобразится, если вы забудете указать атрибут type. Для добавления однострочного поля ввода текста в форму следует внутри элемента <input> прописать атрибут type со значением text:

<input type="text">

Поле ввода пароля является разновидностью обычного текстового поля. Оно поддерживает те же атрибуты, что и однострочное текстовое поле. Атрибут name устанавливает имя поля ввода пароля, которое будет отправлено на сервер вместе с паролем, введенным пользователем. Чтобы создать поле для ввода пароля, необходимо задать значение password атрибуту type (password (англ.) — пароль):

<input type="password">

Пример создания формы с полем для ввода пароля:

Пример: Поле ввода пароля

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Ваш логин: 
  <input type="text" name="login" size="15" maxlength="30" value="Ваше имя">  
  </p> 
  <p>Пароль: <input type="password" name="password" size="15" maxlength="30">  
  </p>
  <input type="submit"> 
</form>
</body>
</html>

Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент <input> типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

<input type="radio" name="имя _переменной" value="значение">

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

Пример: Использование переключателей

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
  <p>Сколько Вам лет?</p>
  <ol>
    <li><input type="radio" name="age" value="18" checked>младше 18</li>
    <li><input type="radio" name="age" value="18-24">от 18 до 24</li>
    <li><input type="radio" name="age" value="25-34">от 25 до 35</li>
    <li><input type="radio" name="age" value="35-50">более 35</li>
  </ol>
  <input type="submit"<
</form>
</body>
</html>

Флажки (checkbox)

Элемент <input> типа checkbox создает флажки, которые напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием от переключателей является то, что посетитель может выбрать сразу несколько вариантов, а сами флажки обозначаются квадратиками, а не кружочками. Как и в случае с переключателями, группа флажков создается путем назначения каждому пункту одного и того же значения атрибута name, однако каждый флажок имеет собственное значение. Основной синтаксис флажка:

<input  type="checkbox"  name="имя _переменной"  value="значение">

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

Пример: Использование переключателей

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
<p>Какие музыкальные жанры Вы любите?</p>
<ol>
  <li><input type="checkbox" name="musik" value="juze" checked>Джаз</li>
  <li><input type="checkbox" name="musik" value="bluse" checked>Блюз</li>
  <li><input type="checkbox" name="musik" value="rock">Рок</li>
  <li><input type="checkbox" name="musik" value="shanson">Шансон</li>
  <li><input type="checkbox" name="musik" value="kantry">Кантри</li>
</ol>
<input type="submit"<
</form>
</body>
</html>

Кнопки подтверждения (submit) и очистки (reset)

Элемент <input> типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset».
Элементу <input> типа submit может быть присвоен необязательный атрибут name. Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Пример: Использование submit и reset

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="action_form.php" method="POST">
 <p>Подпишись на рассылку новостей:</p> 
  <input type="text" name="email">
  <input type="submit" name="podpisatsya" value="Подписаться">
  <input name="reset" type="reset" value="Очистить">
</form>
</body>
</html>

Атрибут action.

Главным для элемента <form> является атрибут action, который указывает обработчик данных для формы. Обработчик данных — это файл, описывающий, что нужно делать с данными формы. В качестве результата этой обработки выдается новая HTML-страница, которая возвращается браузеру.
Другими словами в атрибуте action указывается URL-путь к файлу-обработчику на сервере (иногда называемого страницей сценария) для обработки формы. Синтаксис следующий:

<form action="http://mytestserver.com/namefolder/obrabotchik.php">…    </form>

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение .php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

Метод POST

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

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

<form action="" method="GET">

т.е. замените POST на GET.
Сохраните файл под именем file_name.html и обновите страницу браузера (F5), затем заполните форму, например Вася Пупкин, и нажмите кнопку «Отправить». В адресной строке браузера Вы увидите что-то типа этого:

...file_name.html?firstname=Вася&lastname=Пупкин

Теперь вы видите имя каждого элемента формы, а также его значение, прямо здесь, в URL-адресе.
URL-адрес отделяется от остальных данных формы символом знака вопроса, а имена и значения переменных разделяются знаком амперсанд (&).
Этот метод нужно использовать, если вы не передаете больших объемов информации.
Этот метод не подойдет, если данные в вашей форме являются конфиденциальными, например хранят номер банковской карты или пароль.
Кроме того, метод GET непригоден, если вместе с формой вы хотите переслать на сервер файлы.

Группировка элементов формы

Элементы формы, связанные по смыслу, можно сгруппировать между тегами <fieldset> и </fieldset>. Браузер отобразит <fieldset> в виде рамки вокруг группы элементов формы. Внешний вид рамки может
быть изменен с помощью каскадных таблиц стилей (CSS).
Чтобы добавить заголовок для каждой группы, понадобится элемент <legend>, который задает встраиваемый в рамку текст заголовка группы:

Пример: Использование тега <fieldset>

Задачи

Тег | htmlbook.ru

Спецификация

Описание

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

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

Для отправки формы на сервер используется кнопка Submit, того же можно
добиться, если нажать клавишу Enter в пределах формы. Если кнопка Submit
отсутствует в форме, клавиша Enter имитирует ее использование.

Когда форма отправляется на сервер, управление данными передается программе,
заданной атрибутом action тега <form>.
Предварительно браузер подготавливает информацию в виде пары «имя=значение»,
где имя определяется атрибутом name тега <input>,
а значение введено пользователем или установлено в поле формы по умолчанию.
Если для отправки данных используется метод GET,
то адресная строка может принимать следующий вид.

http://www.htmlbook.ru/cgi-bin/handler.cgi?nick=%C2%E0%ED%FF+%D8%E0%EF%EE%F7%EA%E8%ED&page=5

Параметры перечисляются после вопросительного знака, указанного после адреса
CGI-программы и разделяются между собой символом амперсанда (&). Нелатинские
символы преобразуются в шестнадцатеричное представление (в форме %HH, где HH
— шестнадцатеричный код для значения ASCII-символа), пробел заменяется
на плюс (+).

Допускается внутрь контейнера <form> помещать другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Синтаксис

<form action="URL">
  ...
</form>

Атрибуты

accept-charset

Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.

action

Адрес программы или документа, который обрабатывает данные формы.

autocomplete

Включает автозаполнение полей формы.

enctype

Способ кодирования данных формы.

method

Метод протокола HTTP.

name

Имя формы.

novalidate

Отменяет встроенную проверку данных формы на корректность ввода.

target

Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег FORM</title>
 </head>
 <body>

 <form action="handler.php">
  <p><b>Как по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?</b></p>
  <p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
  <input type="radio" name="answer" value="a2">Операционная система<Br>
  <input type="radio" name="answer" value="a3">Большой полосатый мух</p>
  <p><input type="submit"></p>
 </form>

 </body>
</html>

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

Рис. 1. Вид элементов формы в окне браузера

как сделать и обзор тегов для создания вебформ

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

Внутреннее устройство

Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую — учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.

HTML-форма создаётся с помощью парного тега <form>, внутри которого располагаются теги её элементов.

Теги

Перед тем, как показывать примеры, пройдёмся по тегам.

<form>. Создаёт форму. Если сравнивать форму с таблицей, то тег <form> выполняет ту же роль, что и тег <table>. К нему прилагаются следующие атрибуты.

• action. Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
• method. Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
• accept-charset. Устанавливает кодировку.
• autocomplete. Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
• name. Имя формы.

Есть и ещё атрибуты, но используются они крайне редко.

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

• type. Главный атрибут тега <input>, определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).

Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.

• autofocus. Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
• checked. Установить флажок или радиокнопку по умолчанию.
• pattern. С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
• placeholder. Задаёт текст-подсказку.
• <select>. Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги <option>.
• size. Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
• multiple. Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
• required. Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
• <option>. Тег элемента списка, используемый внутри <select>.
• value. Значение пункта списка для обработки скриптом.
• selected. Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
• <optgroup>. Контейнер позволяет группировать элементы списка <option>.
• disabled. Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
• label. Текст заголовка группы.

Пример формы

Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php, находящийся в папке с HTML-страницей.

Код будет таким.

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>Форма</title>

 </head>

 <body>

  <form method="get" action="script.php">

    Логин:<br>

    <input name="login" type="text" size="25" maxlength="30" value="Михаил"> <br>

    <br>Пароль: <br>

    <input name="pass" type="password" size="25" maxlength="30" value=""> <br>

    <br>Кто вы?

    <select>

    <option value="c1">Гость</option>

    <option value="c2">Администратор</option>

    </select></p>

    <input name="save" type="checkbox" value="yes"> Запомнить <br>

    <br><input type="submit" name="enter" value="Вход">

  </form>

 </body>

</html>

Разберём некоторые его части.

<form method=»get» action=»script.php»> — создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.

<br> — тег перехода на следующую строку.

<input name=»login» type=»text» size=»25″ maxlength=»30″ value=»Михаил»> — создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.

<input name=»pass» type=»password» size=»25″ maxlength=»30″ value=»»> — создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля — 25, максимальная длина пароля — 30 символов.

<select><option value=»c1″>Гость</option><option value=»c2″>Администратор</option></select> — создаём простой раскрывающийся список из двух пунктов.

<input name=»save» type=»checkbox» value=»yes«> Запомнить — добавляем флажок и пишем поясняющий текст.

<br><input type=»submit» name=»enter» value=»Вход»> — создаём кнопку, нажатие которой запускает процесс обработки данных.

</form> — закрываем форму.

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

Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с HTML-страницей.

Полезные ссылки:

Как создать форму с иконками

Узнайте, как создать форму с помощью значков.

Попробуй сам »

Как создать форму значка

Шаг 1) Добавьте HTML:

Используйте элемент