Html как создать форму: Формы и поля в HTML. Все о HTML формах

Создание форм в 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>

<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>

</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» — это говорит о том. что эта кнопка будет отправлять данные в обработчик.

Пример:

<p>

<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>

<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 namelogin» typetext» size=»25″ maxlength=»30″ value=»Михаил»> — создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.

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

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

<input namesave» typecheckbox» valueyes«> Запомнить — добавляем флажок и пишем поясняющий текст.

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

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

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

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

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

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

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

следующий → ← предыдущая

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

Форма входа

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

Шаг 1: Во-первых, мы должны ввести HTML-код в любом текстовом редакторе или открыть существующий HTML-файл в текстовом редакторе, в котором мы хотим создать форму входа.

<Голова> <Название> Создать форму входа <Тело> В этом HTML-коде для создания формы входа используются следующие теги:

Шаг 2: Теперь нам нужно поместить курсор в ту точку, где мы хотим создать форму между началом и закрытием тега в HTML-документе. И затем мы должны ввести тег с именем

. Это первый тег, который используется для создания HTML-формы.

<Тело> В этом HTML-коде для создания формы входа используются следующие теги: <форма>

Шаг 3: Теперь мы должны использовать тег .

Шаг 4: Теперь мы должны использовать тег , который позволяет пользователям вставлять символы в поле. Итак, мы должны ввести этот тег с его атрибутом для вставки идентификатора пользователя. Нет необходимости закрывать входной тег, потому что это непарный тег.

<тип ввода="текст">

Шаг 5: Опять же, мы должны ввести тег для отображения метки в качестве пароля. И затем мы должны ввести пароль с помощью тега , который показан в следующем блоке:

<тип ввода="пароль">

Шаг 6: И после этого мы должны указать значение submit в type 9Атрибут 0015 для отправки формы.

Шаг 6: И, наконец, мы должны сохранить Html-файл, а затем запустить файл, после чего мы увидим форму входа на веб-странице в браузере.

<Голова> <Название> Создать форму входа <Тело> В этом HTML-коде для создания формы входа используются следующие теги: <форма>





Протестируйте сейчас

Вывод приведенного выше HTML-кода показан на следующем снимке экрана:

Регистрационная форма

Если мы хотим создать регистрационную форму в HTML-документе, то мы должны выполнить шаги или использовать следующие теги. Используя эти теги или шаги, мы можем легко создать форму.

Шаг 1: Во-первых, мы должны ввести Html-код в любом текстовом редакторе или открыть существующий Html-файл в текстовом редакторе, в котором мы хотим создать регистрационную форму.

<Голова> <Название> Создать регистрационную форму <Тело> В этом Html-коде для создания регистрационной формы используются следующие теги:

Шаг 2: Теперь нам нужно поместить курсор в ту точку, где мы хотим создать форму между началом и закрытием тега в HTML-документе.

Затем мы должны ввести тег с именем . Это первый тег, который используется для создания HTML-формы.

Шаг 3: Метка: Теперь нам нужно определить метку, которая используется для обозначения имени, для которого создается элемент.

Шаг 4: Поле текста и пароля: мы также можем легко создать поля текста и пароля, используя тег ввода с другим значением атрибута типа .

Шаг 5: Переключатель: Мы также можем создать переключатель для выбора одного варианта из данного списка. Чтобы создать переключатель, мы должны указать значение «радио» в атрибуте типа входного тега.

Шаг 6: Флажок: Мы также можем создать флажки для выбора одного или нескольких вариантов из данного списка. Чтобы создать флажок в форме, мы должны указать «флажок» значение в атрибуте типа .

<метка> Увлечения:
Программирование
Крикет
Футбол
чтение романа

Шаг 7: Выпадающее меню: Если мы хотим создать выпадающее меню для выбора опции. Итак, чтобы создать его, мы должны ввести элемент option в элементе select.

<метка> Курс : <выбрать>

Шаг 8: Текстовая область: Если мы хотим ввести одну или несколько строк текста в поле, мы должны использовать тег <дел> <дел> <метка для="имя"> Ваше имя: <дел> <метка для="электронной почты"> Электронная почта: <дел> <дел> <дел>

Ваше сообщение успешно опубликовано!

<дел >

Ошибка

Извините, произошла ошибка при отправке формы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *