Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Формы: кнопки Reset и Submit.

⇐ ПредыдущаяСтр 7 из 8Следующая ⇒

Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить — это нажимать на них. За счёт этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.

Кнопку на веб-странице можно создать двумя способами — с помощью тега <input> и тега <button>.

Атрибут	Описание
name	Имя кнопки, предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Значение кнопки и одновременно надпись на ней.

Кнопка Submit

Для отправки данных на сервер предназначена специальная кнопка Submit. Её вид ничем не отличается от обычных кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной атрибутом action тега <form>. Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде HTML-документа. Что именно делает обработчик, зависит от автора сайта, например, подобная технология применяется при создании опросов, форумов, тестов и многих других вещей.

Синтаксис создания кнопки Submit зависит от используемого тега <input> или <button>.

<button type="submit">Надпись на кнопке</button>

Атрибуты те же, что и у рядовых кнопок (пример 3).

Пример 3. Отправка данных на сервер

HTML5IECrOpSaFx

<!DOCTYPE html>

<html>

<head>

<title>Кнопка</title>

</head>

<body>

<form>

</form>

</body>

</html>

Атрибут name для этого типа кнопки можно не писать. Если не указать значение value, то браузер автоматически добавит текст, он различается в зависимости от браузера. Так, Firefox пишет «Отправить запрос», IE — «Подача запроса», Opera и Chrome — «Отправить». Сам текст надписи никак на функционал кнопки не влияет.

Кнопка Reset

При нажатии на кнопку Reset данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Для больших форм от использования кнопки Reset лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придётся заполнять форму заново.

Синтаксис создания указанной кнопки прост и похож на другие кнопки.

<button type="reset">Надпись на кнопке</button>

В примере 4 показана форма с одним текстовым полем, которое уже содержит предварительно введённый текст с помощью атрибута value тега <input>. После изменения текста и нажатия на кнопку «Очистить», значение поля будет восстановлено и в нём снова появится надпись «Введите текст».

Пример 4. Кнопка для очистки формы

HTML5IECrOpSaFx

<!DOCTYPE html>

<html>

<head>

<title>Кнопка</title>

</head>

<body>

<form>

</form>

</body>

</html>

Значение кнопки Reset никогда не пересылается на сервер. Если надпись на кнопке опустить, иными словами, не задавать атрибут value, на кнопке по умолчанию будет добавлен текст «Очистить».

Стандарт CSS-1

Стандарт CSS-2

Стандарт CSS-3

Способы включения CSS в HTML-документы

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

Связанные стили

При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег <link>. Данный тег помещается в контейнер <head>, как показано в примере 3.1.

Пример 3.1. Подключение связанных стилей

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Стили</title>

</head>

<body>

<h1>Заголовок</h1>

<p>Текст</p>

</body>

</html>

Значение атрибута тега <link> — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте.

Содержимое файла mysite.css подключаемого посредством тега <link> приведено в примере 3.2.

Пример 3.2. Файл со стилем

H1 {

color: #000080;

font-size: 200%;

font-family: Arial, Verdana, sans-serif;

text-align: center;

}

P { padding-left: 20px;}

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

Глобальные стили

При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера <style>, как показано в примере 3.3.

Пример 3.3. Использование глобального стиля

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Глобальные стили</title>

<style>

H1 {

font-size: 120%;

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #333366;

}

</style>

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице

Внутренние стили

Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил.

Пример 3.4. Использование внутреннего стиля

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Внутренние стили</title>

</head>

<body>

<p style="font-size: 120%; font-family: monospace; color: #cd66cc">Пример текста</p>

</body>

</html>

В данном примере стиль тега <p> задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства.

Внутренние стили рекомендуется применять на сайте ограниченно или вообще отказаться от их использования. Дело в том, что добавление таких стилей увеличивает общий объём файлов, что ведет к повышению времени их загрузки в браузере, и усложняет редактирование документов для разработчиков.

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

Пример 3.5. Сочетание разных методов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Подключение стиля</title>

<style>

H1 {

font-size: 120%;

font-family: Arial, Helvetica, sans-serif;

color: green;

}

</style>

</head>

<body>

<h1 style="font-size: 36px; font-family: Times, serif; color: red">Заголовок 1</h1>

<h1>Заголовок 2</h1>

</body>

</html>

В данном примере первый заголовок задаётся красным цветом размером 36 пикселов с помощью внутреннего стиля, а следующий — зелёным цветом через таблицу глобальных стилей (рис. 3.3).

Импорт CSS

В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно со связанными или глобальными стилями, но никак не с внутренними стилями. Общий синтаксис следующий.

@import url("имя файла") типы носителей;

@import "имя файла" типы носителей;

После ключевого слова @import указывается путь к стилевому файлу одним из двух приведенных способов — с помощью url или без него. В примере 3.6 показано, как можно импортировать стиль из внешнего файла в таблицу глобальных стилей.

Пример 3.6. Импорт CSS

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<title>Импорт</title>

<style>

@import url("style/header.css");

H1 {

font-size: 120%;

font-family: Arial, Helvetica, sans-serif;

color: green;

}

</style>

</head>

<body>

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

</body>

</html>

В данном примере показано подключение файла header.css, который расположен в папке style.

Аналогично происходит импорт и в файле со стилем, который затем подключается к документу.

Пример 3.7. Импорт в таблице связанных стилей

@import "/style/print.css";

@import "/style/palm.css";

BODY {

font-family: Arial, Verdana, Helvetica, sans-serif;

font-size: 90%;

background: white;

color: black;}

В данном примере показано содержимое файла mysite.css, который добавляется к нужным документам способом, показанным в примере 3.1, а именно с помощью тега <link>.

Синтаксис и структура CSS

Таблица стилей состоит из правил стиля. В свою очередь, каждое правило состоит из следующих двух частей:

Селектор. Определяет элемент разметки, к которому применяется правило стиля.

Объявление. Указывает, как должен выглядеть размечаемый контент.

Правило стиля определяется с помощью набора символов пунктуации и специальных символов. При этом используется следующий синтаксис: селектор {объявление;}.

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

Свойства идентифицируют параметры отображения текста и графики компьютером (например, размер шрифта или цвет фона).

Значения указывают, как конкретно текст и изображения будут форматироваться на странице (например, размер шрифта 24 пункта или желтый фон).

Свойство отделяется от значения в объявлении с помощью двоеточия, а каждое объявление завершается точкой с запятой: селектор {свойство: значение;}.

В спецификации CSS указаны свойства, поддерживаемые в правилах стиля, а также различные значения, которые они могут принимать. Большинство свойств не требуют дополнительных объяснений (например, color и border).

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

Группировка селекторов

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

Группировка

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

h2 {color: red;}

.thisOtherClass { color: red;}

.yetAnotherClass {color: red;}

Можно заменить на этот, более компактный

h2,.thisOtherClass,.yetAnotherClass { color: red;}

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

Вложение

В хорошо структурированной каскадной таблицей стилей нет необходимости применять множество классов или id селекторов. Это возможно благодаря подробному изложению свойств селекторов внутри других селекторов.

Подобный код:

#top { background-color: #ccc; padding: 1em }

#top h1 { color: #ff0; }

#top p { color: red; font-weight: bold;}

уменьшает необходимость в классах и идентификаторах, если используется подобный HTML:

<h1>Chocolate curry</h1>

<p>This is my recipe for making curry purely with chocolate</p>

<p>Mmm mm mmmmm</p>

</div>

Это происходит, когда селекторы разделяются пробелами. В результате h1 внутри id top получает цвет #ff0, а p внутри id top становится red (красным) и bold (жирное начертание).

⇐ Предыдущая 1 2 3 4 5 678 Следующая ⇒

Читайте также:

Как правильно слушать собеседника

Типичные ошибки при выполнении бросков в баскетболе

Принятие христианства на Руси и его значение

Средства массовой информации США

Последнее изменение этой страницы: 2017-02-19; просмотров: 1422; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.17.203.68 (0.046 с.)