Создание форм в 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.
<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. Имя формы.
GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.Есть и ещё атрибуты, но используются они крайне редко.
<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-документе. И затем мы должны ввести тег с именем |
