Форма позволяют посетителям сайта обмениваться данными с сервером (форма авторизации, регистрации, анкеты и т.д.). HTML-формы могут позволить только вводить данные, а обработку этих данных можно сделать только с помощью языков программирования.
Для создания формы используется парный тег <form></form>. Между этими тегами будут находиться элементы формы (поля, списки, кнопки…)
У тега form есть несколько атрибутов:
Name – имя формы.
Action – путь к документу, который будет обрабатывать форму.
Method – определяет метод отправки данных формы (GET или POST).
Создаём поле для ввода текста или пароля.
Однострочное поле для ввода текста задаётся тегом input со следующими атрибутами:
Name – имя поля.
Type – определяет вид информации, которую нужно вводить в поле. Для ввода текста значением этого атрибута будет элемент “text”.
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>
<body>
<form name="anketa">
<p>Ваше имя<input type="text" name="firstname"></p>
<p>Ваша фамилия<input type="text" name="lastname"></p>
</form>
</body>
</html>
Если мы хотим увидеть текст внутри формы, то используем атрибут placeholder, значением которого будет видимый текст.
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>
<body>
<form name="anketa">
<p><input type="text" name="firstname" placeholder="Ваше имя"></p>
<p><input type="text" name="lastname" placeholder="Ваша фамилия"></p>
</form>
</body>
</html>
Окно для ввода пароля создаётся так же, но значением для атрибута type будет не text, а password , в этом случае символы будут заменяться точками.
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>
<body>
<form name="anketa">
<p><input type="text" name="firstname" placeholder="Ваше имя"></p>
<p><input type="text" name="lastname" placeholder="Ваша фамилия"></p>
<p><input type="password" name="pass" placeholder="введите пароль"></p>
</form>
</body>
</html>
Чтобы создать поле для ввода объёмного текста, используем тег <textarea></textarea> с атрибутом name. В отличие от input этот тег парный.
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>
<body>
<form name="anketa">
<p><input type="text" name="firstname" placeholder="Ваше имя"></p>
<p><input type="text" name="lastname" placeholder="Ваша фамилия"></p>
<p><input type="password" name="pass" placeholder="введите пароль"></p>
<p><textarea name="about" placeholder="Что Вы можете рассказать о себе?"></textarea></p>
</form>
</body>
</html>
Флажки и переключатели.
Флажки предлагают пользователю выбрать один из вариантов и напротив него поставить галочку. Для этого используется тот же тег input, только значением атрибута type будет checkbox.
<p>Какие цвета Вы предпочитаете:</p>
<p><input type="checkbox" name="red">красный</p>
<p><input type="checkbox" name="blu">синий</p>
<p><input type="checkbox" name="yellow">жёлтый</p>
</form>
Флажки позволяют выбрать хоть все варианты, что не скажешь о переключателях. Переключатель позволяет выбрать только один вариант из всех предложенных. Здесь также используем тег input, но значением атрибута type будет radio. Чтобы на одном из пунктов уже стоял переключатель, используем атрибут checked .
<p>Укажите Ваш пол:</p>
<input type="radio" name="sex" checked>Мужской<br>
<input type="radio" name="sex">Женский<br>
</form>
Раскрывающиеся списки.
Раскрывающийся список оборачивается тегом <select></select> со следующими атрибутами:
Name – имя списка.
Size – позволяет определить количество видимых пунктов в списке.
Multiple – позволяет выбрать несколько пунктов из предложенного списка.
А сами пункты списка заключены в теги <option></option>.
<p>Выберите месяц Вашего рождения:</p>
<select name="year" size="3">
<option name="1">январь</option>
<option name="2">февраль</option>
<option name="3">март</option>
<option name="4">апрель</option>
<option name="5">май</option>
<option name="6">июнь</option>
<option name="7">июль</option>
<option name="8">август</option>
<option name="9">сентябрь</option>
<option name="10">октябрь</option>
<option name="11">ноябрь</option>
<option name="12">декабрь</option>
</select>
</form>
Поле для загрузки файлов.
Для этого опять же используется тег input с атрибутом type, значением которого будет «file».
<input type="file" name="load">
</form>
Создаём кнопку .
Для создания кнопки опять же используется тег unput с атрибутом type. Значения атрибута type будут следующими, в зависимости от вида и функции кнопки:
submit – обычная кнопка для отправки данных на сервер.
Image – кнопка с изображением, т.е., нажимая на картинку, данные отправляются на сервер. Для такой кнопки прописывается путь src к изображению.
Reset – кнопка сброса.
Button – просто кнопка, которая сама по себе ничего не делает, но для неё можно прописать любые свойства.
Для кнопки также важен атрибут value, значением которого будет текст, т.е. тот текст, которые мы видим на кнопке.
<p><input type="submit" name="submit" value="Отправить"></p>
<p><input type="image" name="but" src="but.png"></p>
<p><input type="reset" name="reset" value="Очистить"></p>
<p><input type="button" name="button" value="Кнопка"></p>
</form>