форма в html

Формы

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

Формы выступает как средство html для отправки ваших данных на сервер. С помощью чего реализуется форма? При помощи элемента ‘form’. Этот элемент блочный, внутри можно ставить все, что угодно, кроме других форм.

Атрибуты элемента FORM

  • action — обязательный атрибут. В нем пишут адрес того серверного скрипта, который будет принимать наши данные (http://phpmove.ru/file.php/cgi-bin/handler.cgi). Можно указывать как альтернативный путь, так и абсолютный (если скрипт находится на другом сервере).
  • enctype — тип кодирования. Когда мы отправляем информацию, ее нужно обязательно закодировать. Любой медиаконтент, которым обмениваются между собой компьютеры, снабжается заголовками (main media types). Эти типы медиа контента. Заведует таким способом обмена компания IANA. Т.е. любой медиа контент, который я получаю на свой компьютер, снабжается специальной текстовой записью, которая говорит, что это за тип контента. Примеры заголовков: text/html (текст в формате html), image/png (картинка в формате png). Зачем нужны заголовки? Любой медиа контент может обработать специальный модуль, который умеет с ним обращаться (например, flash-ролик можно проиграть только flash-плеером). Когда мы кодируем данные формы и отправляем на сервер, можем использовать несколько способов кодирования, при этом надо указать какой способ мы выбрали. Есть 2 способа кодирования:
  1. application/x-www-form-urlencoded — отправляем данные текстового типа. Используется по умолчанию. Кодировка при этом используется utf-8. И все данные кодируются в строку.
  2. multipart/form-data — отправляем бинарные данные. Он кодирует данные, используя кодировку base-64. Данные отправляются только методом POST.
  • method — метод отправки данных. Используется либо GET (по умолчанию), либо POST. Метод get адрес из атрибута action и через знак вопроса (‘?’) присоединяет к нему то, что закодировано в строчку. И полученную в итоге строчку отправляет в адресную строку браузера. Метод get используется, например, в поисковых системах. Но при отправке конфиденциальных данных (логин и пароль к аккаунту на сайте) — используем метод POST. При отправке данных этот метод организует параллельное соединение (в котором отправляются все данные) и информацию о ходе дел по этому соединению сообщает в статусной строке (слева внизу в окне браузера), т.е. в адресной строке мы ничего не видим. Метод post также используется при отправке большого количества информации (т.к. при методе get в адресной строке браузера стоит ограничение на количество символов).

Пример простой формы:

<form name="myForm" action="file.php" method="POST" enctype="text/plain">

Элементы формы

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

  • элементы ввода;
  • элементы выбора;
  • кнопки;
  • дополнительные элементы.

У всех элементов формы есть обязательный атрибут name (имя). Бывает еще атрибут value (значение). И эта пара name-value используется при отправке данных на сервер.

Элементы ввода

  • Однострочное поле type=»text». Вводим текст в одну строку, нет переноса текста. Атрибут value — это стартовое значение вашего ответа, которое можно изменить. Атрибут maxlength — максимальное количество вводимых символов. Атрибут size — ширина поля для ввода в символах (сколько войдет визуально).
<input type="text" name="login" size="20" maxlength="25" value="Логин">
  • Однострочное поле type=»password». Вводимые символы не видны, заменяются звездочками.
<input type="password" name="pass" size="20" maxlength="25" value="Пароль">
  • Многострочное поле ‘textarea’. Прокрутка появляется автоматически. В такое поле можно ввести сколько угодно информации. Нет атрибута value, т.к. стартовое значение этого поля находтся между тегами ‘textarea’. Причем символы между этими тегами не обрабатываются браузером вообще.
<textarea name="description" cols="30" rows="10" wrap="off|virtual|physical">Какой-то текст</textarea>

Атрибут cols — ширина поля ввода, rows — количество строк, которые сразу видны в поле.

Элементы выбора

  • «Флажки» type=»checkbox». Возможен выбор многих из нескольких или всех.
<input type="checkbox" name="asp" value="yes">ASP
<input type="checkbox" name="js" value="yes" checked>JavaScript
<input type="checkbox" name="php" value="yes">PHP
<input type="checkbox" name="html" value="yes" checked>HTML
  • «Радиокнопки» type=»radio». Возможен один выбор из нескольких. Атрибут name имеет одинаковое значение, т.к. по сути мы отвечаем на один вопрос. Сам элемент для выбора называется при помощи атрибута value.
<input type="radio" name="book" value="asp">ASP
<input type="radio" name="book" value="js">JavaScript
<input type="radio" name="book" value="php">PHP
<input type="radio" name="book" value="html" checked>HTML
  • «Раскрывающийся список» ‘select’. Мы кликаем по нему, раскрываются варианты, мы выбираем, список сворачивается, и выбранный вариант мы видим. Элемент ‘select’ формирует нам контейнер с маркером, который показывает, что сейчас у меня может что-то открыться. А варианты выбора — это элементы ‘option’, которые находятся внутри. Когда мы кликаем на контейнер, мы видим содержание элементов ‘option’. А поскольку это варианты ответа, то атрибут value перешел к ним. Внутри элементов ‘option’ допустима только одна строка в виде текста, нет никаких переносов и тегов. Атрибут selected внутри элемента — значит выбран этот элемент по умолчанию.
<select name="book" size="1">
<option value="asp">ASP</option>
<option value="html" selected>HTML</option>
</select>
  • «Раскрывающийся список» и выбор нескольких ответов. Для этого в элементе ‘select’ ставим атрибут multiple. Браузеры при этом раздвигают контейнер на несколько опций (вариантов ответа). Количеством одновременно видимых опций можно управлять при помощи атрибута size. Варианты ответа можно группировать, если их много с помощью элемента ‘optgroup’. Такой элемент не добавляет вариантов ответа, это дополнительная визуальная информация, которая позволяет вам сориентироваться среди большого количества ответов:
<select name="book" size="8">
<optgroup label="Английские">
<option value="asp">ASP</option>
</optgroup>
<optgroup label="Русские">
<option value="asp_rus">ASP по-русски</option>
</optgroup>
</select>
  • Прикрепление файла type=»file». Визуально это комбинация одностраничного поля ввода и кнопки. На деле ввести текст в это поле нельзя. Оно предназначено для отображения пути к файлу, который вы выбрали. И в конце выбранный файл отправляется вместе с формой.
<input type="file" name="userfile" size="20">
<form enctype="multipart/form-data">

Кнопки

  • Отправка формы type=»submit». Эта кнопка отправляет форму.
<input type="submit" value=" Послать форму ">
  • Сброс формы type=»reset». Кнопка сбрасывает форму к первоначальным значениям. При этом все сделанные изменения в форме отменяются.
<input type="reset" value=" Очистить форму ">
  • type=»button». Сама по себе кнопка ничего не делает. Она используется только при запуске каких-то сценариев javaScript.
<input type="button" name="push" value=" Что-то сделать ">
  • type=»image». Использование картинки в качестве кнопки. Работает только с типом submit, т.е. отправлять форму на сервер.
<input type="file" name="userfile" size="20">
<form enctype="multipart/form-data">

Элементы дополнительные (вспомогательные)

  • Поле type=»hidden». Скрытое поле, его не видно. Используется, чтобы отправлять данные, которые являются служебными, и обычному пользователю не нужны. Такое поле обычно используют серверные программисты.
<input type="hidden" name="uid" value="15263">
  • Группировка полей с помощью ‘fieldset’ и ‘legend’. Внутри можно расположить любые элементы формы. Эти элементы визуально окружаются рамкой. А элемент ‘legend’ позволяет в разрыве рамки вставить какой-то текст.
<fieldset>
<legend>Книги</legend>
<input type="checkbox" id="asp">ASP
<input type="checkbox" id="js">JavaScript
<input type="checkbox" id="php">PHP
<input type="checkbox" id="html">HTML
</fieldset>
  • Элемент ‘label’. Когда выбрать какой-то элемент из списка на экране сложно (он маленький, например), текст, который является сопроводительной подписью к этому элементу, делается кликабельным. Т.е. можно кликать на кнопку и на текст.
<input type="checkbox" id="book">
<label for="book">ASP</label>

Атрибуты

  • disable — применяется к элементам ввода, выбора и к кнопкам. Если у элемента стоит этот атрибут, то этот элемент не активен (его нельзя выбрать). И данные этого элемента на сервер через отправку формы не уходят.
  • readonly — ставится у элементов ввода. Если у элемента стоит этот атрибут, то в этом элементе нельзя изменить текст. При этом визуально элемент не меняется. Атрибут обычно применяют, чтобы пользователь случайно не поменял значение какого-либо поля при заполнении формы.
  • tabindex — ставится у элементов формы и у гиперссылок. Обычно с помощью клавиши ‘tab’ мы перемещаемся от одного поля к другому. Иногда при нажатии ‘tab’ нужно переходить не к следующему элементу в коде, а перескакивать через него. Атрибут tabindex это и позволяет сделать.



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

Ваш e-mail не будет опубликован.