Веб-мастерская Ларисы ВоронинойФормы HTML.
WEB-мастерская Ларисы Ворониной logo

Формы HTML. Ноя 7 2016


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

Для создания формы используется парный тег <form></form>. Между этими тегами будут находиться элементы формы (поля, списки, кнопки…)

У тега form есть несколько атрибутов:

Name – имя формы.

Action – путь к документу, который будет обрабатывать форму.

Method – определяет метод  отправки данных формы (GET или POST).

Создаём поле для ввода текста или пароля.

Однострочное поле для ввода текста задаётся тегом  input со следующими атрибутами:

Name – имя поля.

Type – определяет вид информации, которую нужно вводить в поле. Для ввода текста значением этого атрибута будет элемент text”.

<!DOCTYPE html>
<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>

forma-html

Если мы хотим увидеть текст внутри формы, то используем атрибут placeholder, значением которого будет видимый  текст.

<!DOCTYPE html>
<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>

forma-html

Окно для ввода пароля создаётся так же, но значением для атрибута type будет не text, а password , в этом случае символы будут заменяться точками.

<!DOCTYPE html>
<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>

forma-html

Чтобы создать поле для ввода объёмного текста, используем тег <textarea></textarea> с атрибутом name. В отличие от input этот тег парный.

<!DOCTYPE html>
<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>

forma-html

Флажки и переключатели.

Флажки предлагают пользователю выбрать один из вариантов и напротив него поставить галочку. Для этого используется тот же тег input, только значением атрибута type будет checkbox.

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

<form>
     <p>Укажите Ваш пол:</p>
     <input type="radio" name="sex" checked>Мужской<br>
     <input type="radio" name="sex">Женский<br>
</form>

forma-html

Раскрывающиеся списки.

Раскрывающийся список оборачивается тегом <select></select>  со следующими атрибутами:

Name – имя списка.

Size – позволяет определить  количество видимых пунктов в списке.

Multiple – позволяет выбрать несколько пунктов из предложенного списка.

А сами пункты списка заключены в теги <option></option>.

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

forma-html

Поле для загрузки файлов.

Для этого опять же используется тег input с атрибутом type, значением которого будет «file».

<form>
    <input type="file" name="load">
</form>

forma-html

Создаём кнопку .

Для создания кнопки опять же используется тег unput с атрибутом type. Значения атрибута type будут следующими, в зависимости от вида и функции кнопки:

submit – обычная кнопка для отправки данных на сервер.

Image – кнопка с изображением, т.е., нажимая на картинку, данные отправляются на сервер. Для такой кнопки прописывается путь src к изображению.

Reset – кнопка сброса.

Button – просто кнопка, которая сама по себе ничего не делает, но для неё можно прописать любые свойства.

Для кнопки также важен атрибут value, значением которого будет текст, т.е. тот текст, которые мы видим на кнопке.

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

forma-html

Vsego.dsr2.ru