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

  1. Создание сайта на Adobe Dreamweaver
  2. Первая веб страница
  3. Форматирование текста в HTML
  4. Создание списков
  5. Гиперссылки
  6. Создание таблиц в блокноте
  7. Цвета в HTML
  8. Табличная верстка сайта
  9. Теги в HEAD
  10. Изображения в html
  11. CSS
  12. Работа с текстом и изображениями в CSS
  13. Блочная структура сайта
  14. Блочная верстка

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

Создайте новый файл forms.html.

Форма открывается тегом <form>.  Тег формы имеет 2 обязательных атрибута: action и method. Атрибут action указывает место, куда будут передаваться данные формы: это может быть страница, сайт или почтовая служба. Атрибут method показывает, каким образом будут передаваться данные. Существует 2 способа передачи данных: get  и post.

В общем виде тег form выглядит так:

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

Создадим текстовую форму:

<html>
<head>
<title>Формы</title>
</head>
<body>
<form action=" " method=get>
<p>Имя: </p>
<p> <input type="text" name="firstname" size="10"></p>
<p>  Фамилия: </p>
<p><input type="text" name="lastname"></p>
</form>
</body>
</html>

Текстовой форме соответствует тег <input type=»text»>. Тег имеет такие атрибуты:

name=”имя поля”

size=”длина формы”

Эти атрибуты задают соответственно имя поля и длину поля в форме. Если длина поля формы не задана, то по умолчанию она равна 20 знакам.

Теперь вставим кнопку отправки данных: перед закрывающим тегом </form> вставьте такой код:

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

Тег кнопки отправки данных <input type=«submit». Атрибут «value=» указывает, какой текст вставить внутри кнопки.

Бывают случаи, когда нужно послать какой либо текст, тогда нужно более расширенная форма текстового поля.

Перед закрывающим тегом </body> создадим  текстовую  область:

<textarea rows="7" cols="30">
</textarea>

Этот код обозначает, что была создана текстовая область длиной 30 знаков и высотой 7 строк.

Теперь создадим форму отправки письма. Ниже создайте новую форму:

<form action="mailto:info@mail.ru" method="post">

Тег формы отправки письма: <form action=«mailto:info@mail.ru»> в котором мы можем ввести почтовый адрес, куда мы будем отправлять письмо ( у нас это info@mail.ru)

Заполним форму соответствующими полями, как мы изучали выше:

<p>Имя:  <input type="text" name="firstname" size="10"></p>
<p>  Фамилия: <input type="text" name="lastname"></p>

Введем поле для текста письма: 

textarea rows="7" cols="30">
</textarea>

И в конце вставим кнопку отправки формы:

<p><input type="submit" value="Отправить"></p>

Полный текст кода выглядит так:

<html>
<head>
<title>Формы</title>
</head>
<body>
<form action="mailto:info@mail.ru" method="post" >
<p>Имя: </p>
<p> <input type="text" name="firstname" size="10"></p>
<p>  Фамилия: </p>
<p><input type="text" name="lastname"></p>
<textarea rows="7" cols="30">
</textarea>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>

Введите этот код в сайт forms.html сохраните и посмотрите в браузере. У вас должно получиться так:

Пример формы

Работа в Dreamweaver.

Создайте файл forms.html.

Создание формы в Dreamviewer шаг 1

Зайдите во вкладку Insert (цифра 1) там выберете Forms. Кликните на кнопку создания формы ( цифра2). В поле Action ( цифра 3) введите «mailto:info@mail.ru@». В поле Method (цифра 4) выберите Post.

Щелкните в начале формы в поле дизайна и введите текст «имя». Нажмите Enter.

Создание формы в Dreamviewer шаг 2

Потом щелкните на кнопке создания текстового поля (цифра 1) на панели управления введите имя формы (цифра 2) «firstname»

Нажмите Enter,потом введите текст «фамилия». Нажмите Enter. Щелкните на кнопке создания текстового поля (цифра 1) на панели управления введите имя формы (цифра 2) «secondname».

Нажмите Enter, вставьте текстовую область ( цифра 1) смотри рис.4

Создание формы в Dreamviewer шаг 3

Введите название формы (цифра 2) «textmail». Введите количество знаков в строке=20 (цифра 3) и количество строк текстовой области=7 (цифра 4). Мы сделали текстовую область под названием textmail, в которую входит 7 строк по 20 знаков в каждой строке.

Теперь создадим кнопку отправки данных.

Нажмите Enter. Нажмите на кнопку создания кнопки отправки данных (цифра 1 рис.5)

Создание формы в Dreamviewer шаг 4

Вставьте текст, который будет отображаться внутри кнопки — «отправить» (цифра 2).

Сохраните файл и посмотрите в браузере.

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

 

Оставить ответ

Ваш email не будет показан.