Формы в html применяются для интерактивности страницы, для взаимодействия пользователя с сайтом. Пользователь может вводить данные на странице при помощи формы, и они будут отправлены на сервер сайта и обработаны определенным образом. Это может быть форма регистрации, входа по логину, форма оформления покупки в интернет-магазине и т.д.
Пример формы:
Форма в языке html оформляется тегом
<form></form>
Форма имеет следующие основные атрибуты:
- action - указывает адрес программы , которая обрабатывает данную форму;
- method - задает метод отправки формы, get или post;
К примеру
<form action="reg.php">
в данной форме, обработка будет производиться скриптом reg.php
При методе отправки get , данные будут отправлены в адресной строке
Например
<form action ="reg.php" method ="get">
при отправлении данных с формы , будет виден запрос и данные в адресной строке браузера site11.ru/reg.php?login='nic11'
При методе обработки данных post, браузер отправляет данные в запросе, в адресной строке браузера мы не увидим данных.
Обычно формы обрабатываются программами на языке PHP. Обработка формы начинается после нажатия кнопки ввода в форме или нажав клавиши "Enter" на клавиатуре.
Форма может состоять из различных элементов, таких как:
- текстовое поле ввода
- текстовое поле для ввода пароля
- флажки
- переключатели
- кнопки
- поле для файлов
- многострочное текстовое поле
- раскрывающиеся списки
- надписи
Текстовое поле ввода предназначено для ввода строки текста в форму, задается тегом <input type='text'> . Имеет атрибуты
- size -размер строки
- maxlength -максимальное количество символов в строке
- value - текст , который будет отображаться вначале, если отсутствует этот атрибут, то поле ввода будет пустым.
- name - имя элемента
- disabled - текстовое поле невозможно изменить,
- readonly - поле доступно только для чтения.
К примеру
<form> <input type ='text' size=25 mazlength=40 value='Ваше Имя' > </form>
в результате получим
Текстовое поле для ввода пароля, предназначено для ввода пароля в форму, задается тегом <input type="password"> , имеет следующие параметры:
- size -размер строки
- maxlength -максимальное количество символов в строке
- value - текст , который будет вначале, но отображаться будет специальными символами (звездочками) если отсутствует этот атрибут, то поле ввода будет пустым.
- name - имя элемента;
отличается от текстового поля тем, что вводимые символы отображаются специальными знаками, обычно звездочками.
Пример:
<form name="formalog"> Введите пароль:<br> <input type="password" name="password1" size="18" maxlength="25"> </form>
В результате получим:
Флажки.
Флажки используют когда в форме нужно выбрать различное количество элементов из списка, задается тегом <input type="checkbox"> , имеет следующие атрибуты:
- checked - предварительно отмеченные галочкой, пользователь может снять отметку;
- name - имя элемента для идентификации;
- value - данное значение будет отправлено на сервер;
Пример:
<form> В каких странах вы бывали ? <br> <input type="checkbox" name="st1" value="rus" checked>Россия <br> <input type="checkbox" name="st2" value="eng">Англия<br> <input type="checkbox" name="st3" value="turk">Турция<br> <input type="checkbox" name="st4" value="fin">Финляндия<br> <input type="checkbox" name="st5" value="china">Китай</form>
В результате увидим:
Переключатели.
Элемент переключатели предназначены для выбора из списка одного элемента, задается тегом <input type="radio">, имеет следующие атрибуты:
- checked - предварительно отмеченные галочкой, пользователь может снять отметку;
- name - имя элемента для идентификации;
- value - данное значение будет отправлено на сервер;
В списке переключателей параметр name должен быть одинаковым, checked может быть только у одного элемента.
Пример:
<form name="forma-strana"> Укажите страну проживания:<br> <input type="radio" name="strana" value="rus" checked> Россия <br><input type="radio" name="strana" value="eng"> Англия<br> <input type="radio" name="strana" value="fr"> Франция</form>
В результате получим:
Кнопки.
Кнопки в формах предназначены для нажатия, и выполнения определенных действий страницы по нажатию. Это может быть отправление данных в сервер, вход по логину и т.д. Бывает 4 типа кнопок в html .
- submit - кнопка для отправки данных формы на сервер, задается тегом <input type="submit"> имеет следующие параметры,
- name- название кнопки
- value - надпись на кнопке
- reset - кнопка позволяет восстановить данные полей формы по умолчанию, задается тегом <input type="reset">, имеет такие же параметры как кнопка submit
- image- кнопке можно задать определенную картинку, предназначена также для отправки данных на веб-сервер, задается тегом <input type="image">, имеет следующие аттрибуты:
- name - название кнопки
- src - url адрес картинки для вывода кнопки
- button- кнопка, действие которой задается веб-программистом. Задается тегом <input type="button">, имеет следующие параметры :
- name - название кнопки
- value - надпись на кнопке
- onclick - определенные действия, функция, которая выполнится при нажатии на кнопку
Несколько различных кнопок в одной форме должны отличаться значением атрибута name.
Пример формы с кнопками:
<form name="forma-knopki"> <input type="submit" name="reg" value="регистрация"> <input type="image" name="img_button" src="button1.img"> <input type="reset" name="sbros" value="Сбросить"> <input type="button" name="my-button" value="Вход"> </form>
Результат:
Кнопки в html можно задавать другим способом при помощи тегов <button> </button>. Возможности у данных кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:
- type - тип кнопки, может принимать значения:
- reset - кнопка очистки формы,
- submit - кнопка отправки данных,
- button - кнопка произвольного действия.
- name - имя кнопки,
- value - надпись на кнопке.
Пример кода:
<form name="myforma1"> <button name="send" type="submit"> <img src="mail.png" align="absmiddle"> Отправить </button> </form>
В результате получим
Поле для ввода имени файлов.
Поле для ввода имени файла, применяется для выбора имени файла в форме на странице сайта, в последующем возможна загрузка файла или другая операция с файлом. Отображается кнопка, при нажатии кнопки выводится обзор файлов, которые можно выбрать. Данное поле задается тегом <input type="file аттрибуты> . Применяются следующие атрибуты:
- accept - задает фильтр на типы файлов, которые можно выбрать в поле;
- size - ширина поля ввода;
- multiple - позволяет выбрать несколько файлов;
- name - задает имя поля ввода файла
Пример:
<form name="myform"> Введите файл картинки : <input type="file" name="myfile" accept="image/*"> </form>
Результат:
Многострочное поле для ввода текста.
Данный элемент формы предназначен для ввода многострочного текста. Применяется , когда нужно отправить сообщение в обратной связи, в комментариях , либо других ситуациях, когда необходимо дать возможность пользователю отправить на сервер текст из нескольких строк. Реализуется парным тегом <textarea></textarea> . Атрибуты данного тега следующие:
- cols - ширина текстового поля в символах;
- rows - количество строк в данном элементе;
- name - имя текстового поля;
- maxlenght - максимальная длина вводимого текста;
- disabled - не доступен для изменения;
- readonly - поле только для чтения;
- wrap - можно задать варианты переноса строки (off - нет переноса, virtual - перенос на странице, но на сервер отправляется без переноса,physical - перенос и на странице и при отправлении на сервер)
Текст помещенные между тегами <textarea> </textarea> будет отображаться внутри поля, а если текста не будет, то элемент будет вначале пустым
Пример:
<form name="myform"> Оставьте ваш отзыв <br> <textarea name="otziv" cols="30" rows="5">Ваш отзыв</textarea> <button> отправить </button> </form>
В результате на странице будет:
Раскрывающиеся списки
Элемент формы раскрывающиеся списки предназначен для выбора пунктов из определенного списка. Задается тегом <select></select>, есть возможность выбора одного или нескольких пунктов. Атрибуты тега <select>:
- name - задает имя элемента;
- size - задает количество видимых элементов, при значении 1 - простой раскрывающийся список, при значении 2 и более, список с несколькими видимыми элементами и прокруткой;
- multiple - задает возможность выбора нескольких пунктов;
Элементы списка задаются тегом <option> </option>, тег имеет следующие атрибуты:
- selected - помечается выбранным по умолчанию;
- value - задается значение, которое будет передано на сервер, если этот элемент будет выбран.
Элементы списка могут быть сгруппированы тегом <optgroup> </optgroup> , который имеет атрибут label, который задает название группы .
Пример:
<form name="myform"> Тема вашего сайта:<br> <select name="kategory" size="9"> <optgroup label="Информационные"> <option>Объявления </option> <option>Справочники </option> <option>Новости</option> </optgroup> <optgroup label="Хобби"> <option>Спорт</option> <option>Туризм </option> <option>Интернет </option> </optgroup> <optgroup label="интернет-магазин"> <option>Одежда и обувь</option> <option>Инструменты </option> <option>Электроника </option> </optgroup> </select> </form>
Результат:
Надписи
Надписи применяются в формах для вывода текста , который можно связать с определенным элементом формы. Задается тегом <label> </label>, текст помещается между этими тегами. Связать с элементом формы можно двумя способами, либо атрибутом for="id1" , где id1 это идентификатор связанного с этой надписью элемента, либо элемент можно поместить внутри тегов <label>. Связь между надписью и элементом формы может быть применен для того чтобы выбрать элемент формы , нажав на текст мышкой.
Пример :
<form name="myform"> <label for="id_name"> Введите ваше имя</label><input id="id_name" type="text" /> </form>
Результат:
Обработка форм на сервере происходит обычно на PHP. Язык PHP будет рассмотрен в следующих статьях.
Оставить комментарий