Создание форм в HTML | bookhtml.ru
В этом уроке html займемся созданием форм в html. Это те самые формы, которые позволяют пользователю регистрироваться на сайте, входить на сайт, отправлять e-mail администратору и т.д. Через такие формы на многих сайтах посетители могут общаться с владельцем сайта (отсылать ему какие-то данные).
Форма — это набор полей для ввода, при этом каждое поле имеет свое уникальное имя. Сама по себе она ничего не значит — это обычный объект HTML. Для получения данных из формы, нужен какой-то обработчик. Так что имейте в виду, что форма состоит из двух частей: одна — это внешняя часть, которая видна на html-странице куда пользователь вводит данные. Вторая часть — это обработчик, который принимает на себя данные из каждого поля формы и совершает над ними какие-то действия.
Обработчик пишется на каком-то языке программирования, простым html не обойтись. В нашем случае это будет язык PHP (в него мы вникать не будем).
Перед тем как мы приступим к созданию формы давайте создадим блокнотом еще одну html-страницу, в которой будем записывать html-код нашей формы. Пусть это будет formpage.html.
В этой странице нам понадобится одна таблица с одной строкой и одной ячейкой.
Пример:
<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>
<html>
<head>
<title>страница изучения форм</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»Keywords» content=»формы»>
<meta name=»Description» content=»создание форм в html»>
</head>
<body>
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr><td>
</td>
</tr>
</table>
</body>
</html>
Проверьте в браузере как выглядит наша страничка для изучения написания форм.
Форма создается с помощью парного тега <form>, который имеет несколько основных атрибутов. Это атрибут action — обработчик (какой файл будет обрабатывать данные формы), атрибут method — как будут пересылаться данные от формы к обработчику (значение «GET» — открытая передача через строку браузера или «POST» — закрытый метод (пользователи не увидят какие данные передаются в обработчик). Обычно используется метод POST.
Еще один атрибут — name: мы должны указать имя формы.
Пример:
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
</form>
</td>
</tr>
</table>
Тег формы у нас готов, далее будем вставлять в него элементы (поля для ввода данных).
Для примера создадим форму заказа какого-нибудь товара. Первым сделаем поле ввода ФИО. Прописываем в html-коде абзац с указаниями для пользователя.
<p>Введите свое ФИО</p>
В абзац вставим тег переноса строки и на следующей строке пропишем поле для ввода текстовой информации. Для этого используем одинарный тег <input> с указанием необходимых атрибутов.
Пример:
<h2 align=»center»>Формы</h2><table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
<p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
</form>
</td>
</tr>
</table>
Атрибут type со значением text — поле для ввода текста. Атрибут name — обязательно дать имя полю.
Следующим абзацем создадим поле ввода пароля.
Пример:
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<form action=»obrabotka.php» method=»POST» name=»form1″>
<p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
<p>Введите пароль<br>
<input type=»password» name=»pass»>
</p>
</form>
</td>
</tr>
</table>
Как мы видим — изменились тип и имя поля. Тип «password» позволяет нам вводить пароль скрытый для чтения.
Добавим поле ввода email:
<p>Введите свой email<br>
<input type=»text» name=»email»>
</p>
Далее появляется новый элемент — radioпереключатель, который позволяет выбрать только одну позицию из нескольких. В нашем примере — это выбрать формат диска: CD или DVD.
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd»>DVD<br>
</p>
У нас появился новый тип тега <input> это type=»radio». И еще мы видим что оба поля имеют одинаковое имя. Это говорит браузеру о том, что можно выбрать только один элемент.Если же мы зададим каждому элементу разное имя, то клиент сможет выбрать сразу два элемента.
Атрибут value определяет значение элемента формы, для точного установления серверной программой какой вариант выбрал клиент.
Теперь давайте добавим еще один переключатель, который позволит пользователю выбрать оба элемента. Тип такого переключателя — checkbox. Имена элементам задаем разные.
Пример:
<p>Какие курсы должны быть на диске<br>
<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>
<input type=»checkbox» name=»book» >Курс по созданию книг<br>
</p>
Еще один элемент формы — это выпадающий список. Для его создания так же прописываем новый абзац и используем другой тег — это парный тег <select> и уже внутри этого тега прописываем пункты нашего выпадающего списка, вписывая каждый пункт списка в парный тег <option>.
Пример:
<p>Выберите тип доставки<br>
<select name=»delivery»>
<option>Срочная</option>
<option>Обычная</option>
</select>
</p>
Если мы хотим что бы были видны оба пункта можно к тегу <select> применить атрибут size, указав в значении количество пунктов. Но выбрать можно только один. Если же надо сделать так, что-бы пользователь мог выбрать несколько пунктов, используем атрибут multiple присвоив ему такое-же значение — multiple.
Следующий элемент формы — текстовая область. Применяем тег <textarea>.
Пример:
<p>Введите адрес доставки<br>
<textarea name=»address» cols=»40″ rows=»5″>
</textarea>
</p>
В значении атрибута cols указываем количество символов в ширину, а в значении атрибута rows — количество рядов (строк). Если будет больше рядов, чем прописано — появится прокрутка.
И последний элемент нашей формы — кнопка «отправить». Открываем новый абзац и через тег <input> создаем кнопочку. Только тип этого тега будет уже «submit» — это говорит о том. что эта кнопка будет отправлять данные в обработчик.
Пример:
<input type=»submit» name=»button» value=»Отправить»>
</p>
Слово, прописанное в значении атрибута value, будет видно на нашей кнопке отправления.
Вот так выглядит весь html-код нашей созданной формы:
<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>
<html>
<head>
<title>страница изучения форм</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»Keywords» content=»формы»>
<meta name=»Description» content=»создание форм в html»>
</head>
<body>
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.
php» method=»POST» name=»form1″><p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
<p>Введите пароль<br>
<input type=»password» name=»pass»>
</p>
<p>Введите свой email<br>
<input type=»text» name=»email»>
</p>
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd» checked>DVD<br>
</p>
<p>Какие курсы должны быть на диске<br>
<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>
<input type=»checkbox» name=»book» >Курс по созданию книг<br>
<p>Выберите тип доставки<br>
<select name=»delivery»>
<option>Срочная</option>
<option>Обычная</option>
</select>
</p>
<p>Введите адрес доставки<br>
<textarea name=»address» cols=»40″ rows=»5″>
</textarea>
</p>
<p>
<input type=»submit» name=»button» value=»Отправить»>
</p>
</form>
</td>
</tr>
</table>
</body>
</html>
Можно проверить в браузере. Кнопка «Отправить» пока не работает так как обработчика у нас нет. Об этом можно узнать из урока по созданию обработчика форм.
И еще один момент — как сделать чтобы при загрузке формы в переключателях был выбран какой-то пункт. Для этого прописываем этому элементу ключевое слово checked — что означает — отмеченный.
Пример:
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd» checked>DVD<br>
</p>
Закончим о создании форм.
как сделать и обзор тегов для создания вебформ
Весь интерактив — поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки — это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки — всё это вы делаете с помощью веб-форм.
Внутреннее устройство
Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать 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>, определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).
Значение | Описание |
button | Кнопка |
checkbox | Флажки. С их помощью вы можете выбрать сразу несколько вариантов |
file | Кнопка выбора файла |
hidden | Скрытое поле, в браузере не отображается |
image | Кнопка с картинкой |
password | Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*) |
radio | Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов |
reset | Кнопка сброса данных формы к первоначальным значениям |
submit | Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод — Сохранить, Применить, ОК |
text | Текстовое поле |
Множество новых значений появилось в 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-страницей.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Как создать форму в HTML
следующий → ← предыдущая Нам нужно много раз создавать форму входа и регистрации в HTML-документе, чтобы формы отображались на веб-странице. Итак, на этой странице будет описано, как создать обе формы в HTML-документах с использованием различных тегов. Форма входаЕсли мы хотим создать форму входа в HTML-документ, чтобы показать форму на веб-странице, мы должны выполнить шаги или использовать следующие теги. Используя эти теги или шаги, мы можем легко создать форму. Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим создать форму входа. <Голова> <Название> Создать форму входа заголовок> голова> <Тело> В этом HTML-коде для создания формы входа используются следующие теги: Тело> Шаг 2: Теперь нам нужно поместить курсор в ту точку, где мы хотим создать форму между началом и закрытием тега в HTML-документе. И затем мы должны ввести тег с именем
Шаг 11: Кнопка сброса: Эта кнопка используется для сброса всех элементов управления формы к значениям по умолчанию. Чтобы создать кнопку сброса, мы должны указать значение reset в тип атрибут тега . <тип ввода="сброс" значение="Сброс"> Шаг 12: И, после всех тегов, мы должны закрыть тег
<Голова>
<Название>
Создать регистрационную форму
заголовок>
голова>
<Тело>
В этом Html-коде для создания регистрационной формы используются следующие теги:
Вывод приведенного выше HTML-кода показан на следующем снимке экрана: Следующая темаКак сделать список в HTML ← предыдущая следующий → |
Как создать форму в HTML простым способом
Первое, что вам нужно решить, чтобы создать форму в HTML, это тип формы, которую вы хотите создать. Онлайн-формы чаще всего используются для:
- Подписка на рассылку новостей
- Отзывы клиентов
- Запросы на контакт с отделом продаж
- Регистрация на мероприятие или конкурс
- Онлайн-заказы и платежи
Для каждого из этих типов форм требуются разные поля ввода, поэтому найти полный HTML-код, отвечающий на все вопросы, которые вы хотите задать, непросто. Если вы уверены, что можете настроить чужой код для создания своей формы в HTML, прокрутите эту страницу вниз, чтобы найти стандартный код HTML-формы. Обратите внимание, что для сбора ответов по-прежнему потребуются PHP-скрипты и стили CSS, соответствующие дизайну вашего веб-сайта.
Но действительно, хотели бы вы научиться создавать HTML-формы с нуля, вместо того чтобы заниматься своим бизнесом? Существует простой способ создать любую нужную вам форму, оформить ее и собрать ответы без каких-либо дополнительных исследований с вашей стороны — просто воспользуйтесь онлайн-сервисом создания форм AidaForm.
Прочтите этот учебник по AidaForm и узнайте, как создать форму в HTML, не написав ни одной строки кода.
Используйте AidaForm бесплатно
1
Войдите в свою учетную запись AidaForm
Нажмите Войдите на любой странице aidaform.com и откройте страницу своей учетной записи. Зарегистрируйтесь, если у вас еще нет учетной записи AidaForm. Вы можете зарегистрироваться и создать до пяти различных форм бесплатно!
2
Создайте форму нужного вам типа
Чтобы начать создание формы, нажмите Создать форму в личном кабинете. Вы можете начать с пустого шаблона и добавить только поля, необходимые для вашего типа формы. В качестве альтернативы выберите шаблон со стандартными блоками, такими как «Имя», «Электронная почта», «Телефон» или «Текстовое поле», если вы знаете, что они понадобятся вам в форме. Введите имя вашей контактной формы и нажмите Создать кнопку .
Разверните редактор форм , чтобы добавить соответствующие поля. Перетащите поля «Имя», «Электронная почта» и «Текст», чтобы создать контактную форму; добавить вопросы с несколькими вариантами ответов и рейтинговые шкалы для формы обратной связи с клиентом; создавать раскрывающиеся списки и флажки для запросов на контакт с отделом продаж и т. д. Если вы не уверены, какие поля добавить, поищите в Интернете похожие примеры форм. Это поможет вам получить общее представление о том, как структурировать форму.
Регистрационная форма конференции
Использование шаблона
Шаблон регистрационной формы конференции
Оценка курса Форма
Обзор оценки блога
3
Проектирование формы для соответствия вашему веб -сайту
Open . будет хорошо смотреться на вашем сайте. Добавьте свой логотип. Вам не придется выбирать цвет для каждого элемента по отдельности благодаря умным настройкам темы.
Изменения, внесенные вами в форму, сохраняются автоматически, поэтому вы никогда не потеряете свой прогресс, даже если случайно закроете вкладку браузера.
4
Опубликуйте свою форму
Когда будете готовы, нажмите Опубликовать , чтобы получить прямую ссылку на ваш опрос для отправки по электронной почте, публикации в сообществе социальных сетей или добавления ссылки на кнопку на вашем Веб-сайт.
5
Сбор ответов
Все ответы будут автоматически собираться в сервисе AidaForm. Вы получите уведомление, когда кто-то отправит форму, поэтому вам не нужно каждый раз проверять свою учетную запись AidaForm. Данные будут безопасно собраны и сохранены в вашем личном кабинете.
Вот как можно создать форму с помощью HTML в AidaForm — без необходимости писать HTML-код или PHP-скрипты. Зарегистрируйте учетную запись и создавайте всевозможные HTML-формы уже сегодня!
Создание HTML-форм онлайн с помощью службы AidaForm
- Использование настраиваемых полей для всех типов форм: дата, загрузка файлов, вопросы с несколькими вариантами ответов, Google Maps и т. д.
- Добавление проверки полей, полей подписи и защиты CAPTCHA ответы и безопасно хранить их в своей учетной записи — не нужно ничего интегрировать вручную
Используйте AidaForm бесплатно
Создайте простую форму в HTML из базового шаблона
Если вы хотите научиться создавать форму в HTML с нуля, вот стандартный код формы, с которого вы можете начать. Найдите типы полей, которые необходимо добавить для создаваемой формы, настройте сбор ответов на свой собственный сервер и создайте стили CSS для оформления визуальных элементов формы.
<дел> <дел>Свяжитесь с нами
Пожалуйста, отправьте сообщение ниже. Мы свяжемся с вами в ближайшее время!