<< Пред. стр.

стр. 40
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

<form>
<srong>Password:</strong>
<input type="password" name="userPassword" value="ladda">
</form>

В этом примере для поля пароля предварительно задано значение. Это означает, что
при загрузке страницы текст в атрибуте value отображается в поле пароля. Если вы
не хотите, чтобы в поле пароля загружалось предустановленное значение, просто уда-
лите этот атрибут:
<input type="password" name="userPassword">
Хотя браузер не отображает на экране фактическое значение поля пароля, при переда-
че формы Web-сервер получает текст, введенный в иоле пароля, в виде следующих строк:
userPassword=ladda;
ГЛАВА 68. Работа с элементами управления форм 371




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


Совет
Как и в случае текстовых полей и полей файлов, для поля пароля за-
дается его физическая ширина с помощью атрибута size, а также с
помощью атрибута w.axlength указывается максимальное число
знаков, которое может вводиться посетителем.




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

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

Листинг 68.9. Исходный код страницы, вид которой в браузере
показан на рисунке 68.9
<form>
<table>
<tr>
<td>Select the n e w s l e t t e r you would l i k e t o receive:</td>
372 Строим Web-сай I'M

</tr>
<tr>
value- "news'
<tdxinput- type="radio" name="newsletter"
checked>News</td>
</tr>
<tr>
<tdxinput type="radio" name="newsletter" value="sports"
>Sports</td>
</tr>
<tr>
<tdxinput type="radio" name="newsletter" value="business"
>Business</td>
</tr>
<tr>
<tdxinput type="radio" name="newsletter" value="entertain-
ment">Entertainment</td>
</tr>
<tr>
<tdxinput type="radio" name="newsletter" value="humor"
>Humor</td>
</tr>
</table>
</form>




Select the newsletter you would like to receive
©News
О Sports
О Business
О Entertainment
О Humor




Puc. 68.9. Используйте переключатели, когда требуется реализовать
небольшое число взаимоисключающих вариантов выбора
ГЛАВА 68. Работа с элементами управления форм 373

Обратите внимание на атрибут checked в теге i n p u t для переключателя «News» (Но-
вости). С помощью этого атрибута осуществляется предварительный выбор указанно-
го переключателя при загрузке формы.
Обычно названия различных элементов управления на форме являются уникальны-
ми. Не так обстоит дело с группами переключателей - очень важно, чтобы для всех
переключателей в одной и той же группе использовалось одно название. В противном
случае браузеру не будет известно, какие переключатели принадлежат той или иной
группе, и вы не получите взаимоисключающих вариантов выбора.
Атрибут v a l u e определяет данные, передаваемые для выбранного переключателя.
Таким образом, если посетитель выбирает получение бюллетеня «Humor» (Юмор), пе-
редаваемые формой данные выглядят подобно следующей строке:
newsletter=humor
Другие, не выбранные переключатели, не передаются браузером.



Работа с кнопками сброса
При щелчке на кнопке сброса (рис. 68.10) браузером возвращаются для всех полей в
форме их значения по умолчанию. Если значение по умолчанию не предусмотрено
для поля, оно очищается браузером.


Совет
Можно добавлять любое требуемое число кнопок сброса, но в
действительности для каждой формы необходима только одна кноп-
ка сброса. Обычно кнопку сброса лучше всего размещать вверху
формы, справа от кнопки Submit (Передать).




Рис. 68.10. Добавление кнопки сброса позволяет посетителю
возвращать форму в исходное состояние
374 Строим Web-сайты

Листинг 68.10. Исходный код страницы, вид которой в браузере
показан на рисунке 68.10
<form>
<input t y p e = " r e s e t " name="fieldsReset" vaiue="Reset Fields">
</form>

Атрибутом value кнопки сброса определяется текст, который появляется на кнопке.



Работа с кнопками Submit (Передать)
При щелчке на кнопке Submit (Передать) данные формы посылаются на обработку
(Рис. 68.11). Место назначения, куда отправляются данные формы, отображается в ат-
рибуте a c t i o n тега <f orm>, а способ отправки данных формы определяется атрибу-
том method тега <form>. ..

Часто задаваемые вопросы
Какие методы применяются для передачи формы?
Существует два метода: GET и POST. С помощью метода GET данные
формы передаются в открытом текстовом формате, присоединеннь<-
ми в виде длинной строки пар атрибут/значение к концу URL-адреса
действия формы. При использовании метода POST данные формы
пересылаются в отдельном сообщении почти также, как защищенная
электронная почта между браузером и Web-сервером.


Листинг 68.11. Исходный код страницы, вид которой в браузере
показан на рисунке 68.11
<form action="/forms/process.php" method="POST">
xinput type="submit" name="formSubmit" value="Submit Form">
</form>

В этом примере при щелчке на кнопке Submit (Передать) данные формы пересылают-
ся с использованием метода POST. Передача осуществляется по задаваемому в атрибу-
те a c t ion относительном)' пути, который указывается относительно корня и включа-
ет в качестве пункта назначения страницу с именем process.php. содержащую сервер-
ную программ)' для обработки данных формы.
Как и в случае других кнопок, текст, задаваемый в атрибуте value кнопки Submit (Пе-
редать), отображается сверху на кнопке.
ГЛАВА 68. Работа с элементами управления форм 375




Рис. 68.11. С помощью кнопки Submit (Передать) данные формы
пересылаются на Web-сервер для, обработки


Часто задаваемые вопросы
Как обработать данные формы?
К сожалению, для обработки и использования данных формы необ-
ходимы серверные сценарии, которые выходят за рамки этой скром-
ной книги.
Не отправляйте данные формы на клиентский документ, такой, как
HTML-страница или файл JavaScript, поскольку в этом случае браузе-
ру не известно, что надо делать.




Работа с текстовыми областями
Текстовые области - это многострочные поля для ввода текста, пример которых пока-
зан на рисунке 68.12.
Листинг 68.12. Исходный код страницы, вид которой в браузере
показан на рисунке 68.12
<form>
<textarea name="typeTextHere" cols="50" rows="5">Type text
here.</textarea>
</form>

Атрибут cols тега <textarea> задает размер текстовой области по горизонтали в
знаках, а не пикселах, тогда как атрибут rows определяет размер текстовой области
по вертикали в виде числа строк. Таким образом, в примере на рисунке 68.12 тексто-
вая область по ширине равна 50 знакам и но высоте занимает 5 строк.
Предварительно задаваемый текст для текстовой области указывается между тегами
<textarea>, а не в атрибуте value, используемом в других элементах управления.
376 Строим Web-сайты

Если вы не хотите, чтобы на экран выводился предварительно заданный текст, вооб-
ще не указывайте его:
< t e x t a r e a name="typeTextHere" cols="50" rows="5"x/textarea>
По умолчанию текст в текстовой области не переходит автоматически на новые стро-
ки. Когда посетитель вводит текст, браузер добавляет новые символы в текущую стро-
ку. При нажатии клавиши Enter или Return происходит переход на новую строку.
Чтобы изменить данное свойство, для атрибута wrap тега t e x t a r e a задается значе-
ние v i r t u a l или physical:
< t e x t a r e a name="typeTextHere" cols="50" rows="5" wrap="virtual">
</textarea>




:Type text here.




Рис. 68.12: Используйте текстовые области для ввода нескольких строк текста



Определение
В случае виртуального переноса строк (virtual wrapping) текст в
текстовой области передается формой без дополнительных симво-
лов возврата каретки. При физическом переносе строк (physical
wrapping) текст передается формой с символами возврата каретки в
конце каждой строки.


Тип переноса строк влияет на способ передачи браузером данных формы. В случае
виртуального переноса строк текст отображается в текстовой области разбитым на
строки, и форма передает текст в виде непрерывной строки знаков без символов возв-
рата каретки (если только посетитель не создает их в явном виде посредством нажа-
тия клавиши Enter или Return). В случае физического переноса строк текст передает-
ся формой точно в том виде, в котором он отображается в текстовой области, с сим-
волами возврата каретки в конце каждой отдельной строки.
ГЛАВА 68. Работа с элементами управления форм 377


Работа с текстовыми полями
Текстовые ПОЛЯ - это элементы управления, предназначенные для ввода одной стро-
ки текста. Пример текстового поля показан на рисунке 68.13. Текстовые поля являют-
ся, вероятно, самими распространенными элементами управления в Интернете.
Ширина текстового поля (в знаках, а не в пикселах) задается атрибутом s i z e . Макси-
мальное число знаков, которое посетитель может ввести в поле, определяется значе-
нием атрибута maxlength, а текст, отображаемый по умолчанию, указывается в атри-
буте value.
Листинг 68.13. Исходный код страницы, вид которой в браузере
показан на рисунке 68.13
<form>
<input type="text" name="typeTextHere" value="Type text here."
size="50" maxlength="80">
</form>




Jype text here




Рис. 68.13. Используйте текстовые поля для ввода одиночных строк текста

Когда посетитель щелкает внутри текстового поля, браузер не выбирает автоматичес-
ки всю строку текста в поле. Это часто бывает неудобно, если текстовые поля содер-
жат предварительно заданные значения, поскольку посетителю требуется очистить
прежние сведения до того, как вводить новые данные. Простая строка кода на
JavaScript исправляет эту проблему:
<input type="tex" name="typeTextHere" value="Type text here."
size="50" maxlength="80" o n F o c u s = " t h i s . s e l e c t ( ) ; " >
Событие onFocus происходит при выделении посетителем текстового поля посред-
ством щелчка внутри поля или в результате перехода на это поле с помощью клавиши
Tab. При установке фокуса на текстовое поле методом s e l e c t () выделяется все в
этом поле.
378 Строим Web-сайты


Часто задаваемые вопросы
ЧТО произойдет, если опустить атрибут size текстового поля?
Если опустить атрибут size, браузером будет использоваться шири-
на текстовых полей по умолчанию, которая зависит от конкретного
браузера. Пропуск атрибута maxlength означает отсутствие преде-
ла на число знаков, которые может вводить посетитель в это поле.




Совет
Код onFocus="this. select (); " можно также добавить в поля па-
ролей и текстовые области.
ГЛАВА69.
Применение стилей к текстовым
элементам управления
Элементы управления текстом воспринимают CSS-правила стилей также, как это де--
лают и другие HTML-элементы. С помощью каскадных таблиц стилей (CSS) можно,
например, изменить стандартный шрифт меню или цвет фона кнопки Submit (Пере-
дать). Однако, как и в случае других HTML-элементов, разные браузеры не всегда
«дружат» с CSS-стилями, которые определяются дизайнером для своих элементов уп-
равления, поэтому обязательно просматривайте созданные Web-страницы в различ-
ных браузерах.


Часто задаваемые вопросы
Можно ли использовать CSS-стили с нетекстовыми элементами
управления?
Да, но не стоит связывать с этим большие надежды. Нетекстовые эле-
менты управления, например, флажки, обычно не выглядят так, как
они должны были бы выглядеть при применении к ним CSS-стилей.




изменение текстового стиля
Различные атрибуты текста, существующие в каскадных таблицах стилей, позволя-
ют изменять внешний вид текста в любом элементе управления, использующем
текст, включая текстовые поля, текстовые области, кнопки, меню и списки. Табли-
ца 69.1, в которой обобщены стандартные CSS-атрибуты текста, может служить па-
мяткой для дизайнера на случай, если потребуется вспомнить некоторые из этих
атрибутов.
Используйте комбинации атрибутов из таблицы 69.1 для разработки сложных тексто-
вых элементов управления, подобных тем, что показаны на рисунке 69.1. Эти приме-
ры показаны вверху, и они наглядно демонстрируют, что можно сделать, если не
предъявлять высоких требований к эстетичности.


Совет
Поскольку разные элементы управления часто используют один и тот
же тег, то лучше создать специальные классы для каждого типа эле-
ментов управления, чем создавать одно общее правило стиля для
HTML-тегов элементов управления.
380 Строим Web-сайты

Табл. 69.1. Стандартные CSS-атрибуты для текста
в текстовых элементах управления

Атрибут Управляемый элемент Пример

font-family Anal
Гарнитура шрифта текста в элементе font-family:
Helvetica, sans-serif;
управления

font-style Стиль текста в элементе управления font-style: italic;

font-weight Начертание шрифта текста в эле-font-weight: bold;
менте управления

Размер шрифта текста в элементе уп- font-size:
font-size 12рх;
равления

Варьирование шрифта текста в эле- font-variant:
font-variant small-
менте управления caps;

Способ изменения браузером реги- text-transform: lower-
text-trans-
стра букв текста внутри элемента уп- case;
form
равления

text-decora- Подчеркивание, линия сверху или text-decoration: U d r
n e-
tion перечеркивание текста внутри эле- line ;
мента управления




TYPE TEXT HERE. YOU'LL BE GLAD YOU NO, TYPE TEXT HERE INSTEAD.
DID.




Puc. 69.1. Примените CSS-атрибуты текста, чтобы изменить
внешний вид текста в текстовых элементах управления
ГЛАВА 69. Применение стилей к текстовым элементам управления 381

Листинг 69.1. Исходный код страницы, вид которой в браузере
показан на рисунке 69.1
<head>
<style type="text/css">


. textf ields { ... •.
font-family: "Times New Roman", Times, serif;
font-style: italic;
.•
'
font-weight: bold;
font-size: 18px;
font-variant: small-caps;
font-decoration: underline;




.buttons {
font-family: "Times N w Roman", Times,
e serif;

<< Пред. стр.

стр. 40
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>