Example
This is the example code for the article Your first HTML form.
A simple form
HTML Content
form action="/my-handling-form-page" method="post"> div> label for="name">Name:label> input type="text" id="name" name="user_name" /> div> div> label for="mail">E-mail:label> input type="email" id="mail" name="user_email" /> div> div> label for="msg">Message:label> textarea id="msg" name="user_message">textarea> div> div class="button"> button type="submit">Send your messagebutton> div> form>
CSS Content
form /* Just to center the form on the page */ margin: 0 auto; width: 400px; /* To see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; > div + div margin-top: 1em; > label /* To make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; > input, textarea /* To make sure that all text field have the same font settings By default, textarea are set with a monospace font */ font: 1em sans-serif; /* To give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* To harmonize the look & feel of text field border */ border: 1px solid #999; > input:focus, textarea:focus /* To give a little highligh on active elements */ border-color: #000; > textarea /* To properly align multiline text field with their label */ vertical-align: top; /* To give enough room to type some text */ height: 5em; /* To allow users to resize any textarea vertically It works only on Chrome, Firefox and Safari */ resize: vertical; > .button /* To position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ > button /* This extra margin represent the same space as the space between the labels and their text fields */ margin-left: 0.5em; > Result
Found a content problem with this page?
Как сделать форму в HTML для сайта
Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.
На рисунке представлена форма регистрации студента на сайте образовательного учреждения.
Для создания формы используется контейнер с атрибутом action, в котором указывается страница на сервере, которая будет обрабатывать данные переданные формой.
Структура простейшей формы:
В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.
Итак, для записи практически всех элементов форм используется тэг с атрибутом type. Для создания кнопки, которая сбрасывать все данные с форм используется следующая структура:
Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию
Пример записи формы с двумя текстовыми полями:
Результат работы формы представлен на рисунке.
В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга со следующими атрибутами: name – имя области; cols – количество столбцов области; rows – количество строк; wrap – способ переноса сток (on – переносить строки, off – не переносить строки).
К вышеуказанному коду добавим поле текстовой области:
Результат работы кода с текстовой областью представлен на рисунке.
Следующим элементом форм являются списки, позволяющие сделать выбор из представленного множества значений. Создать форму списка позволяют тэги с параметром value, отвечающем за значение элемента и с параметрами name, в котором указывается имя списка, size, отвечающего за число видимых элементов.
Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.
Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.
Структура записи флажка и радиокнопки:
В указанных в структуре элементах для выделения флажка и радиокнопки по умолчанию используется атрибут checked. Пример использования флажка, радиокнопки, а также HTML код представлены на рисунке.
Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:
В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:
Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.
Для вставки изображения в кнопку используется код, представленный в следующем примере:
При регистрации и входе на сайты используется поле со скрытым тестом, отображаемым в виде звездочек. Это элемент формы password:
Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:
Элемент формы hiddenбудет невидим в окне браузера.
Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:
Итак, в этой теме были рассмотрены элементы форм для создания различных HTMLстраниц, которые вместе с обработчиками сценария на компьютере или сервере позволяют разрабатывать полноценные web-приложения.
Пример создания html-формы и передачи данных в php
Привет всем! Какое изучение php без создания html-формы и передачи данных в php? Подумал я, и быстренько наваял генератор поддельных электронных адресов, который ранее был доступен в виде Python-кода, а сейчас — и как просто php-страница. Сейчас расскажу чуть подробнее, как все устроено — надеюсь, это поможет вам разобраться в работе с формами.
Итак, логика процесса следующая:
1. С помощью html создаем необходимую нам форму.
2. Передаем даннные из формы на страницу с php-кодом, который обрабатывает данные из формы нужным образом и выдает результат.
Как видите — все очень просто. Теперь реализуем это.
Для примера я решил создать форму в виде анкеты, где у нас будут поля:
1. Имя
2. Возраст
3. Город проживания
4. Хобби
Данные никуда сохранять не будем — у нас задача научиться передавать данные и немного их обрабатывать.
Форма в html создается с помощью тега .
Элементы, доступные для управления формами и их описание — чуть ниже:
Однострочное текстовое поле:
Сам код выглядит следующим образом: