На этой странице

Формы в HTML

Форма в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента <form> и в дополнение к разметке обычных элементов содержит разметку для элементов управления.

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

Как обрабатываются данные форм на стороне Web – сервера рассмотрим при изучении языка PHP .

Рассмотрим пример создания формы :

Создание формы для регистрации сайта

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Создание формы для регистрации сайта</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
    font-size: 1.2em; 
}
}
h1 {
    color: blue;
}
  </style> 
  </head>
  <body>
<h1>Создание формы для регистрации сайта</h1>
   <form action="file.php" method="POST" enctype="multipart/form-data">
  <div>
   Логин:<br>
   <input type="text" name="login"><br>
   Пароль:<br>
   <input type="password" name="passw" value="Пароль"><br>
   URL-адрес сайта:<br>
   <input type="text" name="url" value="http://" size="20"><br>
   Название сайта:<br>
   <input type="text" name="name_site" size="20"><br>
   Описание сайта:<br>
   <textarea name="descr" rows="10" cols="15"></textarea><br>
   Тема сайта:<br>
   <select name="theme">
     <option value="0" selected>Тема не выбрана</option>
    <option value="1">Тема1</option>
    <option value="2">Тема2</option>
    <option value="3">Тема3</option>
   </select><br>
   Баннер 88*31:<br>
   <input type="file" name="banner" size="20"><br><br>
   <input type="reset" value="Очистить">
   <input type="submit" value="Отправить">
  </div>
 </form >    
</body>
</html>

Открыть пример в новом окне

Создание формы для регистрации сайта

Создание формы для регистрации сайта
Создание формы для регистрации сайта

Структура документа с формами

Форма добавляется в HTML – документ при помощи парного тега <form> . Внутри тегов <form> и </form> могут располагаться теги <input> , <textarea> и <select> .

Атрибуты тега <form>

action – Задает URL – адрес программы обработки формы .

<form action="file.php">
<form action="http://www.mysite.ru/file.php">

method – Определяет , как будут пересылаться данные из формы Web – серверу , имеет два значения – GET и POST :

GET – Данные формы пересылаются путем их добавления к URL – адресу после знака (?) в формате .

<form action="http://www.mysite.ru/file.php"> method="GET">

Метод GET применяется . Когда объем персональных данных невелик , так как существует придел длины URL – адреса . Длина не может превышать 256 символов .

POST - предназначен для пересылки данных большого объема , файлов и конфиденциальной информации ( например , паролей ):

<form action="http://www.mysite.ru/file.php"> method="POST">

enctype – задает MIME – тип передаваемых данных . Может принимать два значения :

<form action="http://www.mysite.ru/file.php"> method="POST" enctype="application/x-www-form-urlencoded">

application/x-www-form-urlencoded - применяется по умолчанию :

<form action="http://www.mysite.ru/file.php"> method="POST" enctype="multipart/form-data">

multipart/form-data - указывает при пересылке Web – серверу файлов :

name – задает имя формы :

<form action="file.php" name="form1">

target – указывает , куда будет помещен документ , являющийся результатом обработки данных формы Web – сервером . Атрибут может содержать имя фрейма или одно из зарезервированных значений - _blank , _self или _parent :

<form action="http://www.mysite.ru/file.php"> method="POST" enctype="multipart/form-data" target="_blank">

autocomplete – Этот атрибут помогает заполнять поля форм текстом, который был введён в них ранее.

Имеет два значения :

on – Включает автозаполнение текста.

Off – Отключает автозаполнение. Это значение обычно используется для отмены сохранения в браузере важных данных (паролей, номеров банковских карт), а также редко вводимых или уникальных данных (капча).

Тег <input>

Тег <input> позволяет вставить в форму элементы управления , например , текстовое поле , кнопку или флажок . Этот тег имеет следующие атрибуты :

type – задает тип элемента . В зависимости от значений этого поля создаются следующие элементы формы :

Значение атрибута type

text – текстовое поле ввода :

<input type="text">

password – текстовое поле для ввода пароля , в котором все вводимые символы заменяются звездочками :

<input type="password">

file – поле ввода имени файла с кнопкой Обзор . Позволяет отправить файл на Web – сервер :

<input type="file">

checkbox – поле для установки флажка , который можно установить или сбросить :

<input type="checkbox">

radio - элемент - переключатель ( иногда их называют радио кнопками ) :

<input type="radio">

reset – кнопка , при нажатии которой происходит очистка данных , введенных в форму :

<input type="reset" value="Очистить">

submit – кнопка , при нажатии который происходит отправка данных , введенных в форму :

<input type="submit" value="Отправить">

button – обычная командная кнопка :

<input type="button" value="OK" onclick="alert('OK')">

hidden – скрытый элемент , значение которого отправляется вместе со всеми данными формы . Элемент не показывается пользователю , но позволяет хранить , например , данные из предыдущий формы (если пользователь последовательно заполняет несколько форм ) или уникальное имя пользователя :

<input type="hidden" name="user_id" value="1">

name – задает имя элемента управления . Имя должно обязательно указывается латинскими буквами (например , field ) или комбинаций латинских букв и цифр ( например , field1) . Имя элемента не должно начинаться с цифры :

<input type="text" name="field1">

disabled - запрещает доступ к элементу формы . При наличии атрибута элемент отображается серым цветом :

<input type="text" name="field2" disabled>

readonly – текстовое поле не может изменяться пользователем.

<input type="text" value="Значение по умолчанию">

Текстовое поле и поле ввода пароля

Для текстового поля и поля ввода пароля применяются следующие атрибуты :

value – Задает текст поля по умолчанию :

<input type="text" name="field1" value="http://">

maxlength – указывает максимальное количество символов , которое может быть введено в поле :

<input type="text" name="field1" maxlength="100">

size – определяет видимый размер поля ввода :

<input type="text" name="field1" maxlength="100" size="20">

readonly - указывает , что поле доступно только для чтения . При наличии атрибута значений поля изменить нельзя :

<input type="text" name="field1" readonly>

minlength – Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.

<input type="text" name="field1" minlength="3">

Кнопки Сброс , Отправить

Для кнопок используется один атрибут :

value – задает текст , отображаемый на кнопке :

<input type="submit" value="Отправить">

Скрытое поле hidden

Для скрытого поля указывается один атрибут type:

<input type="hidden" name="hidden1" value="1">

Поле для установки флажка

Для полей — флажков используются следующие атрибуты :

value – задает значение , которое будет передано Web – серверу , если флажок отмечен . Если флажок снят , значение не передается . Если атрибут не задан , используется значение по умолчанию — on :

<input type="checkbox" name="check1" value="yes">Текст

checked – указывает , что флажок по умолчанию установлен :

<input type="checkbox" name="check1" value="yes" checked>Текст

Элементы checkbox можно объединить в группу . Для этого необходимо установить одинаковые значение атрибут name . Чтобы получить все значения на сервере , после названия поля следует указать квадратные скобки ( тот признак массива в языке PHP ) :

<input type="checkbox" name="check[]" value="1">Текст 1
<input type="checkbox" name="check[]" value="2">Текст 2
<input type="checkbox" name="check[]" value="3">Текст 3

Элемент-переключатель

При описании элемента - переключателя используются такие атрибуты :

value – указывает значение , которое будет передано Web – серверу , если переключатель выбран :

<input type="radio" name="radio1" value="yes">Текст

checked - обозначает переключатель , выбранный по умолчанию :

<input type="radio" name="radio1" value="yes" checked>Текст

Элемент-переключатель может существовать только в составе группы подобных элементов , из которых может быть выбран только один . Для объедения переключателей в группу необходимо установить одинаковые значение атрибута name и разное значение атрибута value .

Укажите ваш пол:<br>
<input type="radio" name="sex" value="male" checked>Мужской
<input type="radio" name="sex" value="female">Женский

Текстовая область

Парный тег <textarea> создает внутри формы поле для ввода много строчного текста :

<textarea>
Текст по умолчанию
</textarea>

В окне Web – браузера поле отображается в виде прямоугольной области с полосами прокрутки .

Тег имеет следующие атрибуты :

name – уникальное имя поля :

<textarea name="pole2">
Текст по умолчанию
</textarea>

cols – число столбцов видимого поля :

<textarea name="pole2" cols="15">

rows – число строк видимого текста :

<textarea name="pole2" cols="15" rows="10">

disabled – Блокирует доступ и изменение поля . Оно в таком случае отображается серым и недоступным для активации пользователем.

<textarea name="txt" disabled></textarea>

Когда к тегу <input> добавляется атрибут readonly , текстовое поле не может изменяться пользователем .

<textarea name="txt" disabled>
    Значение только для чтения
</textarea>

Тег <select> Список с предопределенными значениями

Тег <select> создает внутри формы список с возможными значениями :

<select>
<option>Элемент1</option>
<option>Элемент2</option>
</select>

Тег <select> имеет следующие атрибуты :

name - задает уникальное имя списка :

<select name="select1">

size – определяет число одновременно видимых элементов списка :

<select name="select1" size="3">

По умолчанию size имеет значение 1 :

multiple – указывается , что из списка можно выбрать сразу несколько элементов одновременно . Чтобы получить все значения на сервере , после названия списка следует указать квадратные скобки ( это признак массива в языке PHP ) :

<select name="select[]" size="3" multiple>

Внутри тегов< select> и </select> располагаются теги <option> , с помощью которых описывается каждый элемент списка .

Тег <option> имеет следующие атрибуты :

value – задает значения , которое будет передано Web – серверу , если пункт списка выбран . Если атрибут не задан , посылается текст этого пункта :

<select name="select1" size="2" required>
    <option>Элемент1</option>
    <option>Элемент2</option>
</select>

Если выбран пункт (элемент 1) , то посылается "select1"=Элемент1

Если выбран пункт (элемент 2) , то посылается "select2"=Элемент2

<form action="process.php" id="form1"></form>
<select name="select1" form="form1">
<option>Элемент1</option>
<option>Элемент2</option>
</select>

selected - указывает , который пункт списка выбран изначально :

<select name="select1">
<option value="val1">Элемент1</option>
<option selected>Элемент2</option>
</select>

Тег <optgroup>

С помощью тега <optgroup> можно объединить несколько пунктов в группу . Название группы указывается в атрибуте label :

<select name="select1">
  <optgroup label="Отечественные">
    <option value="1">ВАЗ</option>
    <option value="2">ГАЗ</option>
    <option value="3">Москвич</option>
  </optgroup>
  <optgroup label="Зарубежные">
    <option value="4">BMW</option>
    <option value="5">Opel</option>
    <option value="6">Audi</option>
  </optgroup>
</select>

Тег <label>

С помощью тега <label> можно указывать пояснительную надпись для элемента формы . Тег имеет два атрибута :

for – Позволяет указывать идентификатор элемента , к которому привязана надпись . Точно такой же идентификатор должен быть указан в атрибуте id элемента формы :

<label for="passw1">Пароль*:</label>
<input type="password" name="passw1" id="passw1">

Атрибут id может иметь практически все теги . В большинстве случаев он предназначен для доступа к элементу из скрипа . Если элемент формы разместить внутри тега <label> , то надпись будет связана с элементом и без указания атрибута for :

<label>Пароль*:
  <input type="password" name="passw1" id="passw1">
</label>

Форма регистрации

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Форма регистрации</title>
    <style type="text/css">
@media screen and (max-width: 767px) {
body {
    max-width: 767px;
    height: auto;
}
}
body {     /* Стиль для всего документа */
     font-size: 10pt;     /* Размер шрифта */
     font-family: "Verdana", sans-serif;    /* Название шрифта */
   }
h1 {
    color: blue;   /* Цвет шрифта */
}
label {    /* Стиль для всех элементов label */
     display: inline-block;    /* Тип блока */
     width: 150px;     /* Ширина */
     vertical-align: top;    /* Вертикальное выравнивание */
   }
select {     /* Стиль для всех списков */
     width: 250px;    /* Ширина */
     border: 1px solid black;    /* Определение стиля для границы */
   }
input.txt {    /* Стиль для элемента input, имеющего класс txt */
     width: 250px;    /* Ширина */
     border: 1px solid black;    /* Определение стиля для границы */
   }
textarea{    /* Стиль для многострочного текстового поля */
     width: 250px;    /* Ширина */
     height: 100px;    /* Высота */
     border: 1px solid black;    /* Определение стиля для границы */
  }
form div {    /* Стиль для всех div, расположенных внутри form */
     margin-bottom: 20px;    /* Отступ блока снизу */
  }
  </style> 
  </head>
  <body>
<h1>Форма регистрации</h1>
   <form action="reg.php" method="POST" enctype="multipart/form-data">
  <div><label for="login">Логин*:</label>
   <input type="text" name="login" id="login" class="txt" required>
  </div>
  <div><label for="passw1">Пароль*:</label>
   <input type="password" name="passw1" id="passw1" class="txt" required>
  </div>
  <div><label for="passw2">Повторите пароль*:</label>
   <input type="password" name="passw2" id="passw2" class="txt" required>
  </div>
  <div><label for="sex1">Пол*:</label>
   Муж. <input type="radio" name="sex" id="sex1" value="1">
   Жен. <input type="radio" name="sex" id="sex2" value="2"></div>
  <div><label for="education">Образование*:</label>
   <select id="education" name="education" required>
    <option value="" disabled> </option>
    <option value="1">Среднее</option>
    <option value="2">Высшее</option>
   </select></div>
  <div><label for="comment">Комментарий:</label>
   <textarea id="comment" name="comment" cols="15" rows="10"></textarea>
  </div>
  <div><label for="userfile">Ваше фото:</label>
   <input type="file" name="userfile" id="userfile"></div>
  <div><label for="rule">С правилами согласен*:</label>
   <input type="checkbox" name="rule" id="rule" value="yes" required>
  </div>
  <div>
    <input type="submit" value="Отправить" style="margin-left: 150px;">
  </div>
 </form > 
</body>
</html>

Открыть пример в новом окне

Форма регистрации

Форма регистрации
Форма регистрации

Рекомендуемые материалы

<form >
HTML Формы

Блог Web - вебверстки

Мой блог написан с целью обучения Web – разработки.

    admin@sms-book

Полезные статьи


Контакты


© web-blog | Designed by smsbook