Элементы HTML-формы
Большинство элементов добавляется в форму с помощью элемента <input>. Назначение и внешний вид элемента <input> меняются в зависимости от значения атрибута type.
Элемент <textarea> (текстовая область)
Для создания больших текстовых полей применяется элемент <textarea>, который в отличие от других элементов формы не является пустым, а следовательно, для него должны быть указаны открывающий и закрывающий теги. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами. Размеры поля устанавливаются с помощью атрибутов cols и rows.
cols — число столбцов видимого текста:
<textarea name="pole" cols="20">rows — число строк видимого текста:
<textarea name="pole" cols="20" rows="15">При этом, если пользователю потребуется ввести в текстовую область больше строк текста, чем указано с помощью атрибута
При разработке форм для новых проектов используйте правила CSS для установки ширины и высоты текстовой области <textarea>. Однако при просмотре исходного кода сайтов вы еще часто можете встретить атрибуты cols и rows.
При необходимости можно запретить пользователю изменять текст в текстовом поле, например, если поле используется для представления какого-нибудь договора. Такой запрет вводится с помощью атрибута readonly.
В следующем примере представлен вариант создания больших текстовых полей. Первое поле предназначено только для чтения, а во второе поле можно ввести текст:
Пример: Текстовая область (textarea)
Ознакомтесь с соглашеием:
Условия нашего соглашения…
Ваше мнение о этом соглашении:
Введите свой комментарий…
<form action="" method="POST">
<p>Ознакомьтесь с соглашеием:</p>
<textarea cols="24" rows="3" name="about" readonly>
Условия нашего соглашения…</textarea><br/>
<p>Ваше мнение о этом соглашении:</p>
<textarea name="comments" cols="24" rows="4">
Введите свой комментарий…</textarea>
</form> Раскрывающийся список (select)
Элемент <select> создает на веб-странице раскрывающийся список (также называемый раскрывающимся или выпадающим меню), позволяющий выбрать одно значение из множества возможных.
Как и в рассмотренных других элементах формы, элементу <select> назначается уникальное имя, с помощью атрибута name. Элемент <select> работает в паре с элементом <option>, создающим меню. Элемент <option> задается для каждого пункта меню. Текст, расположенный между тегами <option>
Атрибут value используется в каждом элементе <option> для установки значения, которое будет отправлено на сервер вместе с именем выбранного элемента. Указав для элемента <option> атрибут selected, вы сделаете его значением по умолчанию для данного списка. При загрузке страницы такие элементы будут выделены. Если атрибут selected не установлен, то при загрузке страницы будет отображен первый вариант ответа из созданного списка. Если пользователь не выберет другой пункт списка, то на сервер будет отправлен пункт, отмеченный атрибутом selected по умолчанию:
Пример: Раскрывающийся список (select)
Выберите вариант
ПервыйВторойТретийЧетвертыйПятый<form action="" method="POST">
<p>Выберите вариант</p>
<select name="form_select">
<option value="Значение 1">Первый</option>
<option value="Значение 2">Второй</option>
<option selected="selected" value="Значение 3">Третий</option>
<option value="Значение 4">Четвертый</option>
<option value="Значение 5">Пятый</option>
</select>
</form> Прокручиваемые списки
По умолчанию с помощью тега <select> создается раскрывающийся список, в котором изначально видно только одно значение. Для создания прокручиваемого списка укажите число видимых строк, введя соответствующее значение атрибута size. Если количество элементов списка превышает значение, указанное в атрибуте size, справа появляется полоса прокрутки. Несмотря на то, что атрибут size позволяет отобразить сразу несколько пунктов списка, посетитель может выбрать из списка по-прежнему только один пункт.
Чтобы посетитель мог выбрать из списка одновременно несколько элементов (с помощью клавиши
Пример прокручиваемого списка, в котором выбраны сразу несколько элементов:
Пример: Прокручиваемый список
<p>Выберите вариант</p>
<select name="form_select" size="5" multiple="multiple">
<option value="Значение 1">Первый вариант</option>
<option value="Значение 2">Второй вариант</option>
<option selected="selected" value="Значение 3">Третий вариант</option>
<option selected="selected"value="Значение 4">Четвертый вариант</option>
<option value="Значение 5">Пятый вариант</option>
<option value="Значение 6">Шестой вариант</option>
</select> Группировка пунктов списка (optgroup)
Если в списке находится большое количество пунктов, то посетителю довольно сложно найти нужный пункт. В этом случае можно воспользоваться элементом <optgroup>, предназначенным для создания смысловых групп пунктов списка. Элементы <option> помещаются внутрь контейнера <optgroup>, а заголовок группы указывается в атрибуте label.
Пример группировки пунктов списка с заголовками:
Пример: Создание списка с заголовками
<p>Желаемая работа (можно выбрать несколько): </p> <select name="job" size="8" multiple="multiple" > <optgroup label="Журналистика"> <option value="isk">Искусство</option> <option value="ecol">Экология</option> <option value="tur">Туризм</option> </optgroup> <optgroup label="Программирование"> <option value="html">HTML5</option> <option value="php">PHP</option> <option value="del">Delphi</option> </optgroup> <optgroup label="Создание сайтов"> <option value="diz">Дизайн</option> <option value="verst">Верстка</option> </optgroup> <optgroup label="Переводчик"> <option value="eng">Английский</option> <option value="fr">Французский</option> <option value="kit">Китайский</option> </optgroup> <optgroup label="Строительство"> <option value="zd">Здания</option> <option value="most">Мосты</option> <option value="road">Дороги</option> </optgroup> </select>
Элемент <buttоn>
В отличие от кнопок отправки данных и сброса, в самой кнопке Ьuttоn нет встроенных функций. Благодаря элементу можно сочетать на кнопке текст и изображение, располагая их внутри контейнера <button>.
В следующем примере на кнопке отображается содержимое элемента <button> — текст и изображение:
Пример: Использование кнопки <button>
<p>Добавить email в список:</p>
<input type="text" name="email" value="Ваш email">
<button>
<img src="images/add.gif" alt="add"> Добавить</button>HTML5 Элемент <datalist>
Элемент <datalist> позволяют предоставить пользователю несколько вариантов на выбор, когда он начинает вводить значение в соответствующем поле. Но если ни один из них не подходит,
пользователь может ввести собственный текст. Значение, заданное для атрибута
Пример: Использование элемента <datalist>
<form action="">
<p>Выбор планеты: <input list="planet"></p>
<datalist>
<option value="Солнце">
<option value="Земля">
<option value="Меркурий">
<option value="Марс">
<option value="Венера">
</datalist>
</form>Метки элементов формы (label)
У каждого элемента формы может быть своя пояснительная надпись, или метка, создаваемая при помощи элемента <label> и повышающая доступность, создавая четкие семантические связи между компонентами формы.
Использование элемента <label> при работе с переключателями и флажками — самый распространенный вариант, однако это не ограничение. С таким же успехом можно связать текст с любым элементом формы, и при щелчке кнопкой мыши на тексте связанный элемент автоматически берется в фокус.
Связывание текста с элементом формы осуществляется просто: присваиваете атрибуту for элемента <label> значение такое же, как значение атрибута id у элемента, с которым связан <label>. Соответствие значений атрибутов for и id связывает два элемента вместе, что позволяет пользователям нажать на <label> и передать фокус нужному полю формы:
<input type="checkbox" name="form_checkbox" value="1">
<label for="id_checkbox">Наша метка</label>Использование элемента <label> для создания меток предпочтительнее обычного текста. В первую очередь из-за удобства для конечного пользователя, ведь при применении элемента
Пример: Использование элемента <label>
Элементы формы
| Элемент | Описание |
|---|---|
| <form> | Устанавливает форму на веб-странице |
| <input> | Создает различные элементы формы (текстовые поля, кнопки, переключатели и т.д.) в зависимости от значения атрибута type |
| <textarea> | Создает многострочное текстовое поле |
| <fieldset> | Группирует элементы формы. Может также содержать внутри себя элемент legend с условными обозначениями элементов формы, составляющих логическую группу |
| <button> | Многофункциональная кнопка |
| <label> | Устанавливает связь между определенной меткой и элементом формы (input, select, textarea) |
| <legend> | Применяется для создания заголовка группы элементов формы, которая определяется с помощью тега fieldset |
| <optgroup> | Представляет собой контейнер, внутри которо-го располагаются теги option, объединенные в одну группу |
| <option> | Определяет отдельные пункты списка, созда-ваемого с помощью контейнера select |
| <select> | Позволяет создать элемент интерфейса в виде раскрывающегося или прокручиваемого списка |
| <datalist> | Позволяет предоставить раскрывающийся список с предложенными значениями для любого типа поля ввода |
Задачи
Многострочное текстовое поле
Создайте многострочное текстовое поле, присвойте ему имя name=»pole», а также установите запрет на ввод текста в данное поле пользователем.
Задача HTML:
Реши сам »Многострочное текстовое поле:
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Многострочное текстовое поле:</p> ... </form> </body>
</html>
Подсказка в поле ввода текста
Дополните HTML-код, чтобы в результате получилась форма, приведенная в задании. Когда пользователь начинает вводить значение в поле ввода, ему предоставляется несколько вариантов на выбор: «Среднее», »Среднее специальное» и «Высшее».
Задача HTML:
Реши сам »HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Ваше образование: <input type="text" list="teach" name="education"> ... </form> </body>
</html>
Ниспадающее меню
В задании представлена форма имеющая вид ниспадающего меню с перечнем профессий: «Учитель», «Слecapь», «Дизайнер», «Водитель», «Aктep». Дополните HTML-код, чтобы в результате получилась такая же форма. Присвойте имя списку name=»profession», а значения пунктам списка: «Теасher», «Technic», «Designer», «Driver» и «Actor».
Задача HTML:
Реши сам »Ваша профессия? УчительСлecapьДизайнерВодительAктep
HTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <form action=""> <p>Ваша профессия?</p> ... </form> </body>
</html>
Многофункциональная кнопка
Доработайте HTML-код так, чтобы в результате получилась кнопка с изображением: «Star.png» и надписью — «Звезда».
Задача HTML:
Реши сам »ЗвездаHTML-код: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <button> Звезда </button> </body>
</html>
Please enable JavaScript to view the comments powered by Disqus.
Создание форм в HTML | bookhtml.ru
В этом уроке html займемся созданием форм в html. Это те самые формы, которые позволяют пользователю регистрироваться на сайте, входить на сайт, отправлять e-mail администратору и т.д. Через такие формы на многих сайтах посетители могут общаться с владельцем сайта (отсылать ему какие-то данные).
Форма — это набор полей для ввода, при этом каждое поле имеет свое уникальное имя. Сама по себе она ничего не значит — это обычный объект HTML. Для получения данных из формы, нужен какой-то обработчик. Так что имейте в виду, что форма состоит из двух частей: одна — это внешняя часть, которая видна на html-странице куда пользователь вводит данные. Вторая часть — это обработчик, который принимает на себя данные из каждого поля формы и совершает над ними какие-то действия.
Обработчик пишется на каком-то языке программирования, простым html не обойтись. В нашем случае это будет язык PHP (в него мы вникать не будем).
Перед тем как мы приступим к созданию формы давайте создадим блокнотом еще одну html-страницу, в которой будем записывать html-код нашей формы. Пусть это будет formpage.html.
В этой странице нам понадобится одна таблица с одной строкой и одной ячейкой.
Пример:
<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>
<html>
<head>
<title>страница изучения форм</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»Keywords» content=»формы»>
<meta name=»Description» content=»создание форм в html»>
</head>
<body>
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
</td>
</tr>
</table>
</body>
</html>
Проверьте в браузере как выглядит наша страничка для изучения написания форм.
Форма создается с помощью парного тега <form>, который имеет несколько основных атрибутов. Это атрибут action — обработчик (какой файл будет обрабатывать данные формы), атрибут method — как будут пересылаться данные от формы к обработчику (значение «GET» — открытая передача через строку браузера или «POST» — закрытый метод (пользователи не увидят какие данные передаются в обработчик). Обычно используется метод POST.
Еще один атрибут — name: мы должны указать имя формы.
Пример:
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
</form>
</td>
</tr>
</table>
Тег формы у нас готов, далее будем вставлять в него элементы (поля для ввода данных).
Для примера создадим форму заказа какого-нибудь товара. Первым сделаем поле ввода ФИО. Прописываем в html-коде абзац с указаниями для пользователя.
<p>Введите свое ФИО</p>
В абзац вставим тег переноса строки и на следующей строке пропишем поле для ввода текстовой информации. Для этого используем одинарный тег <input> с указанием необходимых атрибутов.
Пример:
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
<p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
</form>
</td>
</tr>
</table>
Атрибут type со значением text — поле для ввода текста. Атрибут name — обязательно дать имя полю.
Следующим абзацем создадим поле ввода пароля.
Пример:
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
<p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
<p>Введите пароль<br>
<input type=»password» name=»pass»>
</p>
</form>
</td>
</tr>
</table>
Как мы видим — изменились тип и имя поля. Тип «password» позволяет нам вводить пароль скрытый для чтения.
Добавим поле ввода email:
<p>Введите свой email<br>
<input type=»text» name=»email»>
</p>
Далее появляется новый элемент — radioпереключатель, который позволяет выбрать только одну позицию из нескольких. В нашем примере — это выбрать формат диска: CD или DVD.
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd»>DVD<br>
</p>
У нас появился новый тип тега <input> это type=»radio». И еще мы видим что оба поля имеют одинаковое имя. Это говорит браузеру о том, что можно выбрать только один элемент.Если же мы зададим каждому элементу разное имя, то клиент сможет выбрать сразу два элемента.
Атрибут value определяет значение элемента формы, для точного установления серверной программой какой вариант выбрал клиент.
Теперь давайте добавим еще один переключатель, который позволит пользователю выбрать оба элемента. Тип такого переключателя — checkbox. Имена элементам задаем разные.
Пример:
<p>Какие курсы должны быть на диске<br>
<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>
<input type=»checkbox» name=»book» >Курс по созданию книг<br>
</p>
Еще один элемент формы — это выпадающий список. Для его создания так же прописываем новый абзац и используем другой тег — это парный тег <select> и уже внутри этого тега прописываем пункты нашего выпадающего списка, вписывая каждый пункт списка в парный тег <option>.
Пример:
<p>Выберите тип доставки<br>
<select name=»delivery»>
<option>Срочная</option>
<option>Обычная</option>
</select>
</p>
Если мы хотим что бы были видны оба пункта можно к тегу <select> применить атрибут size, указав в значении количество пунктов. Но выбрать можно только один. Если же надо сделать так, что-бы пользователь мог выбрать несколько пунктов, используем атрибут multiple присвоив ему такое-же значение — multiple.
Следующий элемент формы — текстовая область. Применяем тег <textarea>.
Пример:
<p>Введите адрес доставки<br>
<textarea name=»address» cols=»40″ rows=»5″>
</textarea>
</p>
В значении атрибута cols указываем количество символов в ширину, а в значении атрибута rows — количество рядов (строк). Если будет больше рядов, чем прописано — появится прокрутка.
И последний элемент нашей формы — кнопка «отправить». Открываем новый абзац и через тег <input> создаем кнопочку. Только тип этого тега будет уже «submit» — это говорит о том. что эта кнопка будет отправлять данные в обработчик.
Пример:
<p>
<input type=»submit» name=»button» value=»Отправить»>
</p>
Слово, прописанное в значении атрибута value, будет видно на нашей кнопке отправления.
Вот так выглядит весь html-код нашей созданной формы:
<!DOCTYPE html public «-//W3C//DTD html 4.01 Transitional//EN»>
<html>
<head>
<title>страница изучения форм</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<meta name=»Keywords» content=»формы»>
<meta name=»Description» content=»создание форм в html»>
</head>
<body>
<h2 align=»center»>Формы</h2>
<table border=»1″ bgcolor=»white» align=»center» bordercolor=»black» cellpadding=»10″>
<tr>
<td>
<form action=»obrabotka.php» method=»POST» name=»form1″>
<p>Введите свое ФИО<br>
<input type=»text» name=»fio»>
</p>
<p>Введите пароль<br>
<input type=»password» name=»pass»>
</p>
<p>Введите свой email<br>
<input type=»text» name=»email»>
</p>
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd» checked>DVD<br>
</p>
<p>Какие курсы должны быть на диске<br>
<input type=»checkbox» name=»site»>Курс по созданию сайтов<br>
<input type=»checkbox» name=»book» >Курс по созданию книг<br>
</p>
<p>Выберите тип доставки<br>
<select name=»delivery»>
<option>Срочная</option>
<option>Обычная</option>
</select>
</p>
<p>Введите адрес доставки<br>
<textarea name=»address» cols=»40″ rows=»5″>
</textarea>
</p>
<p>
<input type=»submit» name=»button» value=»Отправить»>
</p>
</form>
</td>
</tr>
</table>
</body>
</html>
Можно проверить в браузере. Кнопка «Отправить» пока не работает так как обработчика у нас нет. Об этом можно узнать из урока по созданию обработчика форм.
И еще один момент — как сделать чтобы при загрузке формы в переключателях был выбран какой-то пункт. Для этого прописываем этому элементу ключевое слово checked — что означает — отмеченный.
Пример:
<p>Выберите формат диска<br>
<input type=»radio» name=»format» value=»cd»>CD<br>
<input type=»radio» name=»format» value=»dvd» checked>DVD<br>
</p>
Закончим о создании форм.
Создание HTML Формы | Введение в HTML
В ходе этого урока вы создадите HTML форму для нашего проекта. В других проектах мы также будем работать с HTML формами, по этому вам необходимо изучить информацию из статьи Шпаргалка по созданию HTML5 форм
HTML формы.
Форма (англ. form) в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента <form> и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls), надписей (англ. label) и других.
Примеры форм мы можете видеть каждый день на разнообразных сайтах с возможностью регистрации(авторизации).
<form></form>В промежутках этого тега <form> обязательно должны использоваться такой атрибут как:
Action=”url адрес куда будет отправляться запрос при отправке форм”
Пример
<form action=”/Home/Order” method=”post”></form>
След. Тег
<fieldset><fieldset>/// </> контейнер для объединения для объединения форм html по их смысловой значимости.
Название для блока пишется через тег <legend>…</legend>
Html формы (Inputs)
Первый вид форм который мы изучим, это текстовая форма. Организуется она с помощью тега type. Используется он под началом тега <input….>,который в свою очередь, отвечает за различные элементы интерфейса. Тег <input> может использоваться для создания текстовых полей, различных кнопок, переключателей и флажков.
Обязательным параметром для форм является тег name. Об этом теге мы поподробнее поговорим в следующем курсе HTML5 и CSS3 Для начинающих
Еще пара атрибутов:
Placeholder— подсказка выводимая пользователю по умолчанию.
Если начать вводить что либо в эту форму, это значение пропадает. То есть, в эту форму вы можете ввести к примеру «Введите ваше имя» и эти слова будут отображаться до тех пор, пока пользователь не поставит курсор в данное поле.
Requied – свойство, отвечающее за обязательность заполнения формы. Атрибут означающий, что заполнение данной формы обязательно. И данный из формы не отправятся, пока пользователь не заполнит данное поле.
Употребление всех вышеперечисленных форм вы можете увидеть в данной форме.
<fieldset>…
<legend>Оформление заказа</legend>
<input type=”text” name=”Name” placeholder=”Введите ваше имя” required/></br>(так выглядит форма для ввода текста в одну строчку)
</fieldset>Pattern
Pattern –регулярное выражение для валидации(проверки) данных. То есть, к примеру, если в заголовке с типом “tel”, начать вводить буквы, он покажет пользователю, что данные введены неверно.
комбинация всех этих атрибутов дает нам следующее:
<input type=”tel”name=”Tel” placeholder=”8-(xxx)-(xxx)-(xxxx)” required patern= “8-[0-9]{3}-[0-9]{3}-[0-9]{4}”/><br/>В [..] указывается промежуток возможных цифр
В {..} их количество
Заметьте, что в обоих случаях, в конце строки мы используем тег </br>. Он используется для разбития(разделения) строки
Следующим будет тег <select>…</select>.
Select
Он позволяет выбрать из списка нужные нам элементы. Для его работы необходимо употребить атрибут <option>
Выглядеть она должна таким вот образом :
<select name=”car”>
<option value=”1”>1</option>
<option value=”2”> 2</option>
<option value=”3”> 3</option>
</select><br/>К примеру, если пользователь выберет пункт 1, то значение car выдаст ему 1, заключенную нами в “”
Предположим, пользователь ввел все данные в соответствующие поля, вот только отправить он их никуда не сможет, так как у нас не создано никакой кнопки для этого
Для создания кнопки, нам потребуется функция submit. Выглядеть это должно примерно так
<input type=”submit”/>
Т.к данные отправлять некуда, он естественно выдаст вам ошибку.
Помните, как еще в самом начале, при написании форм, мы использовали метод post ? Так вот, существует так же и второй метод – get (отправляет данные через адресную строку), а метод post отправляет нас непосредственно к значениям переменных , которые мы создали ранее
Если Вы хотите освоить HTML5 формы, то ознакомьтесь с содержанием курса HTML5 и CSS3 Базовый, там мы их разбираем более подробно, останавливаясь на каждом типе пользовательских контролов
HTML-форма и ее основные элементы
HTML—форма – это специальный модуль, предназначенный для ввода и последующей отправки на обработку каких—то данных, к примеру, логина и пароля, информации о пользователе, сообщения и т.д. Чаще всего используются следующие виды форм – регистрация, авторизация, отправка сообщения, отправка комментария, отправка письма на почту, анкета.
Вставка формы осуществляется напрямую в HTML—код страницы. Главный элемент формы называется <form>. Уже внутрь него добавляются все остальные элементы – текстовые поля, «чекбоксы», переключатели и т.д. У элемента <form> имеется несколько атрибутов, один из которых является обязательным. Он называется action. В action указывается, где именно будет приниматься и обрабатываться информация, переданная посредством формы. Как правило, обработка происходит в стороннем PHP—файле. Пример использования атрибута– action=»obrabotchik.php«. Атрибут method позволяет задать метод передачи информации. По умолчанию (если не прописывать атрибут) будет указан метод GET. В данном случае информация передается напрямую через URL—адрес. Для каждого элемента формы будет создана пара следующего вида – «имя элемента = значение, которое в нем лежит». Все эти пары, разделенные знаком «амперсанд» будут перечислены в адресной строке. Если прописать method=»POST» (регистр не важен), то данные будут передаваться не через URL, а через тело запроса (в скрытом режиме). В большинстве случаев используют именно POST. Пример создания формы:
<form action=»obrabotka.php» method=»POST»> /*****ПОЛЯ ВВОДА********/ </form>
<form action=»obrabotka.php» method=»POST»> /*****ПОЛЯ ВВОДА********/ </form> |
Атрибуты HTML-формы
- Атрибут name — позволяет присвоить форме уникальное имя. Это нужно в том случае, если на одной странице размещено несколько форм.
- Атрибут enctype — позволяет задать способ кодирования информации из формы. Обычно его заполняют только тогда, когда при помощи формы происходит пересылка файлов. Вообще, здесь может быть три варианта — enctype= application/x—www—form—urlencoded | multipart/form—data | text/plain. Первый вариант application/x—www—form—urlencoded говорит о том, что происходит пересылка закодированного текста. Третий вариант text/plain используют для пересылки текста в формате «как есть». Второй вариант multipart/form—data используют для файлов.
- Атрибут формы autocomplete позволяет включить так называемое автозаполнение полей.
Поля ввода в HTML — форме
Теперь расскажем о том, какие элементы может содержать в себе форма. Прежде всего, это разного рода input’ы – элементы, предназначенные для ввода данных.
Текстовое поле — type=»text»
Самый распространенный input – обычное однострочное текстовое поле. В коде оно может выглядеть следующим образом:
<input type=»text» name=»t» maxlength=»10″ value=»Иван»>
<input type=»text» name=»t» maxlength=»10″ value=»Иван»> |
В атрибуте type, как вы поняли, указывается тип поля. Атрибут name – это уникальное имя поля (оно нужно для последующей обработки данных). Атрибут maxlength задает максимальную длину вводимого текста. Value – это значение поля по умолчанию (после загрузки страницы в этом поле сразу же будет прописано слово «Иван»).
Поле для пароля — type=»password»
Еще один популярный input – поле для ввода пароля. Выглядит оно вот так:
<input type=»password» name=»p»>
<input type=»password» name=»p»> |
Ключевая особенность – вводимые символы будут отображаться как звездочки.
Чекбокс — type=»checkbox»
Следующий элемент – чекбокс. В коде он может выглядеть примерно так:
<input type=»checkbox» name=»c» value=»1″ checked>
<input type=»checkbox» name=»c» value=»1″ checked> |
Атрибут type здесь также задает тип. ID – это уникальный идентификатор, может использоваться для привязки к чекбоксу CSS—правил или текстовой надписи. Value – это значение, посылаемое на обработку в том случае, если в чекбоксе поставлена галочка. Атрибут checked автоматически ставит галочку в чекбоксе сразу при загрузке страницы. У checked не нужно указывать значение, так как оно совпадает с именем атрибута.
Надпись над элементом — тег label
Следующий элемент – текстовая надпись (элемент label). Как правило, текст привязывают к какому—то уже существующему input’у. В этом случае надпись может выглядеть вот так:
<label for=»ch»>Текст для чекбокса</label>
<label for=»ch»>Текст для чекбокса</label> |
Атрибут for осуществляет непосредственную привязку текста к элементу с id=»ch» (в нашем случае это чекбокс).
Переключатель — type=»radio»
Еще один интересный элемент – это радиопереключатель. Обычно его вставляют в форму, что бы предоставить пользователям возможность выбора из нескольких равнозначных вариантов. Конструкция, приведенная ниже, создаст радиопереключатель из двух input’ов.
<input type=»radio» name=»n» value=»qwe» checked> <input type=»radio» name=»n» value=»qwe2″>
<input type=»radio» name=»n» value=»qwe» checked> <input type=»radio» name=»n» value=»qwe2″> |
Атрибут type задает тип input’а. Name – это имя. Все input’ы в пределах одного переключателя должны иметь одно имя, иначе форма не свяжет их друг с другом. Value –это значение, передающееся при выборе того или иного элемента. Атрибут checked позволяет установить один и только один из элементов в включенное по умолчанию состояние.
Выпадающий список — тег select
Элемент формы select позволяет создать выпадающий список. У него есть несколько атрибутов. Name задает уникальное имя. Size задает количество элементов, отображающихся в списке одновременно (при загрузке страницы). По умолчанию size=1. Атрибут без значения multiple позволяет выбирать сразу несколько элементов, предварительно зажав клавишу Ctrl. Чтобы создать непосредственные элементы списка, используется тег option. Текстовое содержимое данного тега будет отображаться в качестве элемента. При указании атрибута value внутри options на обработку будет передано его значение. Атрибут selected позволяет сделать выбранный элемент списка текущим (по аналогии с checked он будет выделен сразу при загрузке страницы). Несколько элементов можно объединить в группу, присвоив ей какое—то название. Делается это посредством тега optgroup, внутрь которого вставляются нужные option. Атрибут label задает группе название. Ниже приведен пример сгруппированного списка.
<select name=»s» size=»3″ multiple> <optgroup label=»Список»> <option value=»1″>1 элемент</option> <option value=»2″>2 элемент</option> <option value=»3″ selected>3 элемент</option> <option value=»4″>4 элемент</option> </optgroup> </select>
<select name=»s» size=»3″ multiple> <optgroup label=»Список»> <option value=»1″>1 элемент</option> <option value=»2″>2 элемент</option> <option value=»3″ selected>3 элемент</option> <option value=»4″>4 элемент</option> </optgroup> </select> |
Многострочное текстовое поле — тег textarea
Довольно часто в формах используется многострочное текстовое поле. Обычно это делается при отправке почтовых сообщений и комментариев. Элемент, создающий такое поле, называется textarea. Вся конструкция может выглядеть примерно так:
<textarea maxlength=»1000″ name=»area» rows=»5″ cols=»30″> </textarea>
<textarea maxlength=»1000″ name=»area» rows=»5″ cols=»30″>
</textarea> |
Атрибут maxlength задает максимальное количество символов, вводимых в поле. Атрибуты rows и cols – это число строк и символов в строке соответственно. Стоит помнить, что размеры формы не являются фиксированными – ее всегда можно расширить. Однако при загрузке страницы она будет появляться именно с размерами, указанными в rows и cols.
Кнопки в HTML — форме
Последние элементы, о которых мы поговорим – это кнопки. Типичная кнопка отправки формы может выглядеть так:
<input type=»submit» value=»Послать»>
<input type=»submit» value=»Послать»> |
В атрибуте value указывается надпись, которая будет отображаться на кнопке. Что касается type, то здесь может быть несколько вариантов. Submit создает кнопку подтверждения и отправки данных. Reset создает кнопку сброса всех введенных полей в изначальное состояние. Button создает кастомную кнопку без привязанного к ней действия по умолчанию (впоследствии можно будет навесить на нее какой—нибудь скрипт). Image также создает кастомную кнопку, у которой вместо текста будет использоваться изображение. Путь к изображению необходимо указать в атрибуте src.