Формы в html, элементы формы

Автор: | 04.09.2018

Формы в html применяются для интерактивности страницы, для взаимодействия пользователя с сайтом. Пользователь может вводить данные на странице при помощи формы, и они будут отправлены на сервер сайта и обработаны определенным образом. Это может быть форма регистрации, входа по логину, форма оформления покупки в интернет-магазине и т.д.
Пример формы:
Элементы формы в 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 будет рассмотрен в следующих статьях.

Похожие темы

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *