Партнерка на США и Канаду по недвижимости, выплаты в крипто

  • 30% recurring commission
  • Выплаты в USDT
  • Вывод каждую неделю
  • Комиссия до 5 лет за каждого referral

Начало формы

Работа со временем
Создание пунктуальности (никогда не будете никуда опаздывать).
Излечение от пунктуальности (никогда никуда не будете торопиться).
Изменение восприятия времени.

Чтобы добавить к рамке специальный заголовок применяется контейнер <LEGEND>, который должен располагаться в теге <FIELDSET>. Внутри тега <LEGEND> допустимо использовать текст и теги форматирования, вроде <B>, <I>, <SUP>, <SUB>, а также стили (пример 16.2).

Пример 16.2. Использование тега <LEGEND>

<html>
<body>

<form>
<fieldset>
<legend style="font-weight: bold">Изменение убеждений</legend>
<input type="checkbox" value="t1">

Изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм).<br>
<input type="checkbox" value="t2">

Изменение веры в непогрешимость любимой партии.<br>
<input type="checkbox" value="t3">

Убеждение в том, что инопланетяне существуют.<br>
<input type="checkbox" value="t4">

Выбор политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).<br>
<input type="checkbox" value="t5">

Повышение веры в собственные способности.<br>
</fieldset>
</form></body></html>

Любые пробелы в теге <LEGEND> будут проигнорированы, если вы желаете их непременно добавить, используйте символ неразделяемого пробела &nbsp;.

НЕ нашли? Не то? Что вы ищете?

При использовании тегов <FIELDSET> и <LEGEND> учтите, что они работают в браузерах Internet Explorer 4, Netscape 6, Opera 5 и старше. Также результат работы в разных браузерах будет несколько различаться, как показано на рис. 16.1 – 16.3.

Рис. 16.1. Отображение в браузере Internet Explorer 6

Рис. 16.2. Браузер Netscape 7

Рис. 16.3. Браузер Opera 7

Из рисунков видно, что для браузера Internet Explorer рамка получается цветная и с закругленными углами. Для остальных браузеров цвет рамки по умолчанию черный, а цвет заголовка совпадает с цветом текста. Кроме того, Opera «забывает» о полях вокруг текста, из-за чего текст «налипает» на рамку. Цвет рамки группы поменять не удастся, а вот отступы вокруг текста и цвет заголовка изменяются с помощью стилей (пример 16.3).

Пример 16.3. Изменение вида заголовка

<html>
<head>
<style type="text/css">FIELDSET {padding: 10px /* Поля вокруг группы */} LEGEND {color: red /* Цвет заголовка группы */}</style></head>

<body> <form><fieldset>
<legend>Пробуждение обаяния </legend>...</fieldset></form> </body> </html>

В примере отступы устанавливаются с помощью параметра padding, а цвет заголовка через атрибут color.

Блокирование элементов формы

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, – блокирование (disabled) и только для чтения (readonly).

Блокированные поля

Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом

Замечание

Некоторые браузеры позволяют выделять и копировать содержимое заблокированного текстового поля, но все остальные действия недоступны.

Далее представлены разные элементы форм в заблокированном режиме.

Текстовое поле

Многострочное текстовое поле

Кнопка

Флажки

Список

Переключатели

Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь же не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 17.1 показано применение скриптов для изменения блокировки кнопки.

Пример 17.1. Использование блокирования поля

<html>
<head>
<script>
function agreeForm(f) { // Если поставлен флажок, снимаем блокирование кнопки
if (f. agree. checked) f. submit. disabled = 0// В противном случае вновь блокируем кнопкуelse f. submit. disabled = 1}</script></head>
<body> <form>
<textarea cols="30" rows="4" readonly>
Типовой договор

Отдаю свою душу, а взамен получаю здоровье и бессмертие.
</textarea>
<p>

<input type="checkbox" name="agree" OnClick="agreeForm(this. form)">

Я согласен со всеми условиями

</p>
<p><input type="submit" name="submit" value="Далее" disabled></p>
</form>

</body> </html>

Результат данного примера показан ниже.

function agreeForm(f) { if (f. agree. checked) f. submit. disabled = 0 else f. submit. disabled = 1 }  

Начало формы



Я согласен со всеми условиями

Конец формы

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».

Для блокирования поля используется параметр disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его, как показано в примере 17.1.

Замечание

В некоторых случаях можно встретить запись disabled="disabled" или disabled="true". Она также работает, но имеет скорее отношение к XHTML. Впрочем, в HTML такая форма тоже действует.

Поля только для чтения

Поля формы можно не только блокировать, но и делать их только для чтения. В этом случае доступ к ним сохраняется, но изменять значения, заданные по умолчанию, нельзя. Разумеется, речь идет только о текстовых полях, где требуется вводить текст. Выделять и копировать его можно, но изменить не получится.

Для установки режима «только для чтения» используется параметр readonly, он добавляется к тегу <INPUT type="text"> или <TEXTAREA>. На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся. Атрибут readonly на другие элементы формы не действует.

Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе – «только для чтения».

 

В примере 17.2 показано создание поля для чтения.

Пример 17.2. Использование параметра readonly

<html>
<body>

<form>
<textarea name="textarea1" cols="20" rows="10">Обычное текстовое поле</textarea>
<textarea name="textarea2" cols="20" rows="10" readonly>Поле только для чтения</textarea>
</form>

</body>
</html>

Изменение ширины поля

Обычно ширина текстового поля регулируется параметром size тега <INPUT>, но в большинстве случаев это не удобно, поскольку на размер в таком случае влияет выбор браузера, его параметры, настройки операционной системы и т. д. Чтобы установить заданную ширину поля лучше использовать стили, в частности, ширина изменяется с помощью свойства width.

Ширина однострочного текстового поля

Для изменения ширины однострочного текстового поля используется следующий синтаксис.

<input type="text" style="width: значение">

В качестве значений могут использоваться любые единицы принятые в CSS, например, пикселы, проценты, дюймы и т. д. Не обязательно ширину устанавливать внутри тега <INPUT>, так, в примере 18.1 показано, как это делать другим способом, через таблицу глобальных стилей.

Пример 18.1. Изменение ширины текстового поля

<html>
<head>
<style type="text/css">.search { width: 200px /* Ширина в пикселах */}</style></head><body>
<form action="handler. php">
Поиск: <input type="text" class="search">
</form></body></html>

В данном примере ширина текстового поля устанавливается равной 200 пикселов.

Поиск:

Замечание

Если ширина одновременно задается с помощью параметра size и стилей, то значение size будет проигнорировано и ширина примет значение, указанное через стили.

Ширина и высота многострочного текстового поля

Кроме ширины можно задавать и высоту поля через свойство height. Для многострочного поля синтаксис изменения размеров будет следующий.

<textarea style="height: высота; width: ширина">
...
</textarea>

В примере 18.2 показано, как устанавливать размеры для этого поля.

Пример 18.2. Размеры многострочного текста

<html><head><style type="text/css">TEXTAREA { width: 100%; /* Ширина в процентах */ height: 100px /* Высота в пикселах */}</style></head>
<body> <form action="handler. php">
<textarea> </textarea></form></body></html>

В данном примере ширина многострочного текстового поля установлена как 100%, и занимает всю отведенную область, а высота равна 100 пикселов.

Ширина кнопок

Ширина кнопок зависит от текста надписи, которая расположена на кнопке. Когда размеры кнопок изменяются в большую сторону, справа и слева от текста добавляется пустое пространство, за счет которого кнопка и расширяется.

Синтаксис изменения размеров кнопки следующий.

<input type="button" style="width: ширина; height: высота">

В примере 18.3 показано, как изменить ширину кнопки.

Пример 18.3. Ширина кнопок

<html><head>
<style type="text/css">.agree { width: 60% /* Ширина в процентах */}</style></head><body> <form action="handler. php">

<p align="center"><input type="button" value="Я согласен со всеми условиями"

class="agree">
</p></form></body></html>

Результат данного примера показан ниже. Заметим, что вид кнопок в разных браузерах может различаться между собой, при равной их ширине.

Замечание

Если заданная ширина кнопки меньше текста надписи, тогда текст будет обрезан с правого края.

Ширина списка

Исходно ширина списка определяется самым широким текстом, входящим в список. С помощью стилей можно установить требуемую ширину списка, несмотря на указанную особенность.

Синтаксис изменения ширины списка следующий.

<select style="width: ширина">
 <option>...</option>
</select>

В примере 18.4 показано, как изменить ширину списка.

Пример 18.4. Ширина списка

<html>
<head>
<style type="text/css">SELECT {width: 200px /* Ширина списка в пикселах */}</style></head><body>
<form action="handler. php">
<b>Выберите блюдо</b><br>
<select>
<option>Мчади</option>
<option>Када на мацони</option>
<option>Пахлава</option>
<option>Чурчхелла</option>
<option>Кчуч</option>
<option>Лилибдж</option>
</select></form></body></html>

Результат данного примера показан ниже.

Выберите блюдо

Цвет фона элементов формы

Для изменения фона под элементами формы используется универсальный стилевой атрибут background или его производный параметр background-color. Для элементов, которые образованы с помощью тега <INPUT>, в общем случае синтаксис для изменения цвета фона будет следующий.

<input type="..." style="background: цвет">

Не обязательно стиль указывать внутри тега, более правильным вариантом будет вынести его в таблицу глобальных стилей, как показано в примере 19.1.

Пример 19.1. Изменение цвета некоторых полей формы

<html><head><style type="text/css">INPUT {background: #fc0 /* Цвет фона */}</style></head><body> <form>
<table align="center" cellpadding="4" cellspacing="0">

<tr> <td>Текстовое поле</td><td>Кнопка</td></tr>
<tr> <td><input name="textfield" type="text" value="Ваше имя"></td>
<td><input name="Submit" type="submit" value="Submit"></td></tr>
<tr> <td>Переключатели</td><td>Флажки</td></tr>
<tr> <td>

<input type="radio" name="radio" value="radiobutton">

<input type="radio" name="radio" value="radiobutton2">
<input name="radio" type="radio" value="radiobutton3"></td>
<td>

<input type="checkbox" name="checkbox" value="checkbox">

<input type="checkbox" name="checkbox2" value="checkbox">
<input type="checkbox" name="checkbox3" value="checkbox"></td></tr>
</table> </form> </body> </html>

Результат данного примера показан ниже.

Текстовое поле

Кнопка

Переключатели

Флажки

Замечание

Браузеры Netscape и Firefox не изменяют цвет фона у переключателей и флажков.

Цвет фона многострочного текста

Аналогично, цвет фона меняется и у многострочного текста (тег <TEXTAREA>).

<textarea style="background: цвет">...</textarea>

В примере 19.2 показан способ изменения цвета текста и фона поля.

Пример 19.2. Фон у поля с многострочным текстом

<html>
<head>
<style type="text/css">TEXTAREA {background: #000; /* Цвет фона */color: fc0; /* Цвет текста */width: 100% /* Ширина поля */}</style></head>
<body>

<form>
<textarea> Введите ваш комментарий </textarea>
</form> </body></html>

Результат данного примера показан ниже.

Начало формы

Цвет фона списка

Список обычно формируется из трех тегов: <SELECT>, <OPTGROUP> и <OPTION>, к каждому из них можно применять свои параметры цвета. Таким образом, с помощью цвета акцентируется внимание на отдельных пунктах списка или они визуально отделяются друг от друга.

Цвет списка

Вначале рассмотрим, как изменить цвет всего списка целиком. Синтаксис следующий.

<select style="background: цвет">
 <option>Пункт 1</option>
 <option>Пункт 2</option>
 <option>Пункт 3</option>
</select>

В примере 19.3 показано, как установить цвет фона и текста списка.

Пример 19.3. Цвет фона списка

<html><head><style type="text/css">SELECT {background: #69c; /* Цвет фона */color: ffe /* Цвет текста */}</style></head>
<body> <form><select>
<option>Аметист</option>
<option>Бирюза</option>
<option>Жадеит</option>
<option>Сердолик</option>
</select> </form></body></html>

Результат данного примера показан ниже. Обратите внимание, что выделенный пункт имеет системный цвет фона.

Цвет группы в списке

Тег <OPTGROUP> предназначен для группирования элементов списка и добавления к группе заголовка, который задается параметром label. Цвет фона добавляется ко всей группе целиком, а не только к ее заголовку. Общий синтаксис следующий.

<select>
 <optgroup label="Заголовок 1" style="background: цвет">
 <option>Пункт 1.1</option>
 <option>Пункт 1.1</option>
 </optgroup>
<optgroup label="Заголовок 2" style="background: цвет">
 <option>Пункт 2.1</option>
 <option>Пункт 2.1</option>
 </optgroup>
</select>

В примере 19.4 показан один из способов изменения цвета группы списка.

Пример 19.4. Цвет фона и текста группы списка

<html>
<body>

<form>
<select>
<optgroup label="Русская кухня" style="background: maroon;

color: white">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>

<optgroup label="Украинская кухня" style="background: lemonchiffon;

color: mediumblue">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup></select></form></body></html>

Результат данного примера показан ниже.

Цвет отдельных пунктов списка

Для выделения цветом желаемых пунктов меню стилевое свойство background следует установить для тега <OPTION>.

<select>
 <option style="background: цвет">Название пункта</option>
</select>

В примере 19.5 показано создание списка из трех разноцветных пунктов, цвет для которых установлен через стилевые классы.

Пример 19.5. Цвет элементов списка

<html>
<head><style type="text/css">.diamond { color: #66f}.emerald { background: #3baf17; color: #fff}.ruby { background: #d31c1c; color: #fff}</style></head>
<body> <form>
<select>
<option selected>Камни</option>
<option class="diamond">Алмаз</option>
<option class="emerald">Изумруд</option>
<option class="ruby">Рубин</option>
</select></form></body></html>

Результат данного примера показан ниже.

Получение данных формы

Рассказ о формах был бы не полным, если не затронуть вопрос, что же делать с данными дальше, после того, как они введены пользователем и отправлены на сервер. Там информация уже анализируется и сохраняется в случае необходимости. Централизованное хранение данных на сервере, например в базе данных, позволяет организовывать множество интересных вещей – от обычных опросов до сложных форумов.

В качестве обработчика формы может выступать любой серверный язык программирования – Perl, Си, Python, PHP и т. д. В дальнейшем рассмотрим манипуляции с данными формы при помощи PHP, как одном из наиболее популярных и доступных языков.

Использование глобальных переменных

Каждому элементу формы, у которого есть уникальное имя, заданное параметром name, сопоставлена переменная с тем же именем (со знаком доллара впереди). Так, в примере 20.1 показано создание формы с текстовым полем username. Поскольку для тега <FORM> не указан параметр action, данные формы будут отправлены на эту же самую страницу. Код PHP проверяет, установлено ли какое-либо значение у переменной $username и если да, то выводит его в окне браузера.

Пример 20.1. Использование глобальных переменных

<html>
<body>

<?php// Функция isset проверяет, присвоено ли переменной $username какое-либо значение if (isset($username)) { // Выводим текстecho "Привет, $username";}

else {?><form><p><b>Введите ваше имя:</b><br><input type="text" name="username"></p><p>

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

<?php}?>

</body></html>

В данном примере вначале идет проверка на существование значения переменной $username с помощью функции isset. Если какое-либо значение присвоено, оно будет выведено, в противном случае отображается форма, где требуется ввести имя пользователя.

Замечание

В настройках PHP (файл php. ini) можно запретить работу с глобальными переменными (register_globals = Off), в таком случае указанный пример не будет работать должным образом. Желательно вообще обходиться без глобальных переменных, что делается обычно в целях безопасности.

Массивы $HTTP_GET_VARS и $HTTP_POST_VARS

Для доступа к данным формы, переданной через метод GET или POST, используются специальные массивы, соответственно, $HTTP_GET_VARS и $HTTP_POST_VARS. Например, имя поля формы, заданное параметром name, называется lorana, тогда для получения значения этого поля используется запись $HTTP_GET_VARS["lorana"]. Это будет в том случае, если параметр method тега <FORM> равен значению GET или вообще отсутствует, поскольку по умолчанию значение атрибута method равно GET. Аналогично обстоит дело и с методом POST.

В примере 20.2 показано, как получать данные формы и выводить их в окне браузера.

Пример 20.2. Получение данных через метод GET

<html>
<body>

<?php

if (isset($HTTP_GET_VARS["drink"])) {

echo "Вы предпочитаете пить " . $HTTP_GET_VARS["drink"];

}

else {
?>

<form>
<p><b>Что вы предпочитаете пить?</b></p>
<p>
<input type="radio" name="drink" value="пиво">Пиво<br>
<input type="radio" name="drink" value="чай">Чай<br>
<input type="radio" name="drink" value="кофе">Кофе<br>
<input type="radio" name="drink" value="молоко">Молоко
</p>
<p><input type="submit" value="Отправить"></p>
</form>
<?php
}
?>

</body>
</html>

В данном примере создается группа переключателей, значение у которых определяется параметром value тега <INPUT>, а имя – парметром name. Выбранный пользователем вариант получаем через массив $HTTP_GET_VARS["drink"], где drink – это имя переключателя.

Массивы $_GET и $_POST

Существуют аналогичные массивы для хранения данных переданных через метод GET или POST – соответственно, $_GET и $_POST. Они имеют более короткую форму записи и скорее по этой причине применяются довольно часто. Принцип работы с этими массивами достаточно прост. Если в форме используется метод GET, то для получения значения элемента формы достаточно указать $_GET["имя поля"], где имя определяется параметром name.

В примере 20.3 показано использование массива $_POST для получения данных формы.

Пример 20.3. Получение данных через метод POST

<html>
<body>

<?php

if (isset($_POST["test"])) {

$answer = $_POST["test"];
if ($answer == "a4") echo "Правильный ответ.";
else echo "Вы ошиблись с ответом";

}

else {
?>

<form method="POST">
<p><b>Какой тег указан неверно?</b></p>
<p>
<input type="radio" name="test" value="a1">DT<br>
<input type="radio" name="test" value="a2">DFN<br>
<input type="radio" name="test" value="a3">DEL<br>
<input type="radio" name="test" value="a4">DD<br>
<input type="radio" name="test" value="a5">DL<br>
</p>
<p><input type="submit" value="Ответить"></p>
</form>
<?php
}
?>

</body>
</html>

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3