Создание формы обратной связи

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

Форма создается с помощью тега form. Этот тег имеет два важных атрибута. Атрибут action задает адрес страницы сайта, на которую будут отправляться введенные данные. Если оставить этот атрибут пустым - форма отправится на текущую страницу сайта.

Атрибут method задает способ отправки формы. Может принимать значение GET или POST.

Поля формы

Внутри тега form можно располагать различные элементы формы:

• поле ввода input,

• кнопку отправки формы,

• многострочное поле ввода textarea и другие.

Пример формы

<form action=" " method="GET">

<input type="text" name="user"><br><br>

<textarea name="message"></textarea><br><br>

<input type="submit">

</form>

Пример создания формы обратной связи Тег <FORM> в html-файле:

<FORM >

<div>

<label for="email" >Введите Ваш e-mail</label><br>

<INPUT type="text" placeholder="Ваш e-mail" name="e-mail"><br><br> </div>

<div>

<label for="name">Введите Ваше имя</label><br>

<INPUT type="text" placeholder="Ваше имя" name="name"><br><br>

</div>

<div>

<label for="message">Сообщение </label><br>

<textarea name="message"></textarea><br>

</div>

<div>

---

<INPUT type="submit" value="Нажмите, чтобы отправить письмо"> </div>

</FORM>

Стилевые описания тега <FORM> в файле .css:

form {

text-align:left;

margin:20px 0;

padding:10px 20px;

}

form input {

margin:20px 0;

}

Пример формы обратной связи на странице:

Тег input

Тег input создает различные элементы HTML формы: обычное поле ввода, поле для ввода пароля, флажок checkbox (чекбокс), радио кнопки (radio), кнопку для отправки.

Не требует закрывающего тега.

				Атрибуты
	Атрибут			Описание
	type			Задает тип поля ввода.
	value			Значение по умолчанию в поле ввода. В случае с кнопкой задает ее текст.
	placeholder			Подсказка в поле ввода
	name			Имя поля ввода. Нужно для того, чтобы достать данные поля ввода в PHP.
				Для корректной работы формы имена полей ввода не должны совпадать

---

	друг с другом (в одной форме). Если они совпадают - в PHP придут данные
	того поля ввода, которое ниже в HTML коде.
disabled	Блокирует элемент формы

							Значения атрибута type
	Значение							Описание
	text				Создает обычное текстовое поле ввода.
	message
	password				Создает текстовое поле ввода для пароля. При внесении в него текст - он
				отобразится звездочками.
	checkbox						Создает флажок чекбокс.
	radio						Создает радио переключатель.
	button			Создает кнопку. Нажатие на эту кнопку не будет отправлять форму на сервер.
	submit
						Submit		Создает кнопку, которая будет отправлять данные на сервер. Текст
				кнопки зависит от браузера, его можно сменить с помощью value.
	reset
						Reset
								Создает кнопку, которая очищает заполненную форму. Текст кнопки
				зависит от браузера, его можно сменить с помощью value.
	file			Создает кнопку выбора файла. Дизайн этой кнопки запрещено менять через
				CSS. Если вам требуется такое поле в форме, то тег form должен иметь
				атрибут enctype в значении multipart/form-data.

---

---

Новые в HTML5 значения атрибута type

Пример использования атрубитов type:

<form action=" " method="POST">

Введите фамилию <input type="text" name="soname"> <br><br>

Введите имя <input type="text" name="name"> <br><br>

Введите дату рождения <input type="date" name="date"> <br><br>

Введите e-mail <input type="email" name="mail"> <br><br>

<input type="submit" name="send" value="Отправить форму" >

<input type="reset" name="reset" >

</form>

Результат в браузере:

Атрибут required указывает на то, что данный элемент HTML формы должен быть обязательно заполнен. Например: <input type="text" placeholder="Введите имя" required>

---

Смотрите также файлы

• Шаг 1.doc

• тест ворд (2).doc

• тест ворд (1).doc

• ТЗ для ретушера.doc

• 03.doc