Базовые элементы Web-технологий (1127027), страница 6
Текст из файла (страница 6)
Возможные значения перечислены ниже. text — поле ввода на одну строку. Часто используется вместе сатрибутами size и maxlength. textarea — поле ввода в несколько строк. file — поле для выбора имени файла для его последующей передачи вкачестве присоединенных данных. Часто используется вместе сaccept. password — поле для ввода пароля на одну строку, заменяющеевводимые символы на звездочки. checkbox — флажок для ввода значения булевского типа (да/нет).Несколько таких флажков с одинаковыми именами могутиспользоваться для определения некоторого множества. Каждоезначение передается на сервер в виде пары name/value, поэтомуатрибуты name и value для флажков лучше указывать. radio — радио-кнопка для ввода значения из нескольких возможных.Все кнопки в группе, определяющей возможные значения, должныиметь одинаковые имена.
submit — определяет кнопку, при нажатии на которую результатызаполнения формы отправляются на сервер. Атрибут value задаетнадпись на кнопке. image — кнопка с изображением на ней, при нажатии передает насервер координаты той точки, в которой был выполнен клик, в видепар name.x=value, name.y=value.
reset — кнопка, сбрасывающая значения всех элементов управленияна данной форме к исходным значениям. hidden — скрытый элемент управления, не видимый пользователю,но содержащий информацию, которая может быть передана насервер. button — определяет пользовательскую кнопку.• <select/> — элемент управления для выбора одного или нескольких пунктов иззаданного списка (меню). Эти пункты определяются вложенными элементами<option>. Может иметь следующие атрибуты.o name — имя элемента.o multiple — включает возможность множественного выбора.o size — количество видимых пунктов списка.o Вложенные элементы <option> с помощью атрибутов selected (исходновыбранный пункт) и value (значение, передаваемое на сервер) формируютпункты списка.
Видимое пользователю название пункта — это текст,следующий за тегом <option>.• <textarea/> — определяет поле для ввода нескольких строк текста. Для их передачина сервер стоит использовать метод POST. Может иметь такие атрибуты.o name — обязательное имя, используется для идентификации поля приобработке результатов его заполнения.o rows — количество строк, видимых на экране.o cols — ширина поля в количестве символов.o wrap — определяет, выполнять ли перенос слов на новую строку.Возможные значения: off — нет переноса, virtual — перенос слов на экране,на сервер поступает единая строка, physical — перенос на новую строкубудет зафиксирован и в тексте, отправленном на сервер.• action — обязательный атрибут, указывающий URL, к которому нужно обратитьсябраузеру для обработки данных формы.На приведенной ниже, на Рисунке 3, странице показано несколько форм.• Первая — форма поиска — содержит поле ввода и кнопку Search (вверху справа).Она описана с помощью следующего кода.<form action="http://mysearch.intel.com/corporate/default.aspx"method="get" name="FORMSearchHeader"><input type="hidden" id="culture" name="culture" value="en_US" /><label for="q">Search</label><span><input type="text" id="q" name="q" size="10" maxlength="255"class="HAT-searchbox" /></span><input type="hidden" name="category" id="category" /><input type="hidden" name="adv" id="adv" /><input type="hidden" name="value" id="value" /><input class="searchbutton" type="image" style="width: 57px; height:20px; border: 0px" name="searchsubmit" id="searchsubmit" alt="Search"src="/common/images/en-us/searchbtn.gif" /></form>• Другая хорошо видимая форма — форма входа на сайт для зарегистрированныхпользователей — находится справа.
Ее код примерно такой<form action="https://ssl.software.intel.com/enus/login/?Lang=ENG&TARGET=http://software.intel.com/enus/articles/non-commercial-software-development" method="post"><input type="hidden" name="qlogin" value="true" /><div class="row"><div class="key">Login ID:</div><div class="value"><input id="txtUserName" name="txtUserName"class="login" size="12" type="text" /></div></div><div class="row"><div class="key">Password:</div><div class="value"><input id="txtPassword" name="txtPassword"class="login" size="12" type="password" /></div></div><div class="row"><div class="key">Remember Me?</div><div class="value"><inputid="chkRememberMe" type="checkbox" name="chkRememberMe" value="on"/></div></div><div style="clear: both"></div><input type="submit" class="login" value="Login" /><br /></form>Рисунок 3.
Вид HTML-страницы с формами в браузере.• Еще одна форма, для выбора языка, тоже находящаяся справа, описана так<form method="get" action=""><select style="width:160px;" name="lang"onChange="window.location.href=this.options[this.selectedIndex].value;"><option selected="selected" value="#"></option><optionvalue="http://www.intel.com/cd/software/products/apac/zho/index.htm">简体中文</option><option value="http://www.intel.com/cd/software/products/asmona/eng/index.htm">English</option><optionvalue="http://www.intel.com/cd/software/products/ijkk/jpn/index.htm">日本語</option><optionvalue="http://www.intel.com/cd/software/products/apac/kor/index.htm">한국어</option><optionvalue="http://www.intel.com/cd/software/products/emea/rus/index.htm">Русский</option></select></form>Обработка формПри обработке форм занесенные в них данные пересылаются браузером с помощьюуказанного в атрибуте method метода (GET или POST) по адресу, указанному в атрибутеaction.Если используется метод GET, то данные формы записываются в сам запрос в видепараметров со значениями, т.е.
в конце указанного в action адреса добавляется знаквопроса, а затем через символ ‘&’ для каждого установленного элемента управленияперечисляются его имя (то, что указано в атрибуте name), знак равенства ‘=’, иустановленное значение.Установленными считаются только элементы управления, находящиеся внутри форм,имеющие имя, не имеющие атрибута disabled. Для форм с несколькими кнопками типаsubmit только одна такая кнопка, нажатая пользователем, считается установленной. Изгруппы радио-кнопок с одинаковыми именами установлена только та, что включена.
Дляменю имя указывается в элементе <select/>, а значение является списком значений valueвыбранных элементов <option/>. Если же ни один пункт списка не выбран, такой элементуправления также считается не установленным.Для элементов выбора файлов текущим значением является список выбранныхпользователем имен, но при обработке формы в качестве значения посылаетсясодержимое этих файлов. Поскольку передаваемый так объем данных может бытьдостаточно большим, для этого лучше использовать метод POST. При этом лучшеуказывать в атрибуте enctype в качестве способа кодирования данных multipart/porm-data.В таком случае формируется составное сообщение MIME, в котором значенияустановленных элементов управления помещаются в отдельные части.
В каждой частиможет быть указан заголовок Content-Type с некоторым значением (по умолчанию,text/plain), должны быть указаны заголовок Content-Disposition со значением “form-data” иимя элемента управления, чье значение содержится в данной части.Например, вот такая форма<html><head><title>Factorial</title></head><body><h1>Factorial Calculation </h1><p>Input a number </p><form method="get"><input type="text" name="value" size="25"><p></p><input type="submit" value="Submit"><input type="reset" value="Reset"></form></body></html>при вводе значения 200 в текстовое поле и нажатии на кнопку Submit формирует запросhttp://localhost:8080/factorial/?value=200.Язык каскадных таблиц стилейЯзык каскадных таблиц стилей (CSS, Cascading Style Sheets) [11,14] предназначен дляописания представления данных, описанных на каком-либо языке разметки.
Описаниепредставления означает, что инструкции CSS указывают браузеру как и где показыватьтекст, рисунок или иное содержимое, описанное с помощью XML или HTML.Инструкции CSS могут определяться в отдельном файле, находимом браузером по ссылке,указываемой в элементах <link rel=“stylesheet” type=“text/css” href=“…”/> в заголовкеHTML-страницы, или внутри самой HTML-страницы в элементах <style type=“text/css”/>.Сама инструкция CSS представляет собой определение стиля, т.е.
набор свойствпредставления (шрифт, размер текста, цвет текста и подложки, форматирование абзаца,границы и пр.) и их значений, привязываемое к селекторам, задающим виды элементов, ккоторым данный стиль применяется.Например, так может быть определен стиль, применяемый ко всем элементам созначением атрибута class=“important”..important { font-weight: bold; color: red; }А вот так этот стиль может применяться в HTML-страничке<p> Это неважное утверждение.<span class="important"> А вот это — важное. </span>Аналогично, можно определять стили для идентификаторов. Отличие от классов в том,что идентификатор элемента должен быть уникален в HTML-документе.#most_important_statement { font-weight: bold; color: red; }Инструкция, привязывающая стиль к конкретным элементам HTML выглядит так.h1, h2 { font: Tahoma; color: red; background-color: yellow; }Она означает, что заголовки типов h1 и h2 будут представлены в данном стиле.Если же нужно модифицировать представление только заголовков, имеющих значениеатрибута class, равное special, то можно воспользоваться такой инструкцией.h1.special, h2.special { color: red; background-color: yellow; }Селекторы HTML-элементов могут быть вложенными или связанными.table p { font-weight: bold; }Приведенная выше инструкция выделяет жирным содержимое элементов <p> внутритаблиц, другие элементы <p> останутся незатронутыми.i > b { font-weight: normal; }Эта инструкция отключает полужирный шрифт для элементов <b/>? непосредственновложенных в элементы <i/>.p + h2 { margin-top: 20px; }Приведенная выше инструкция установит отступ сверху для всех заголовком второгоуровня, непосредственно следующих за элементами <p> в 20 пикселей.Литература[1] Web-сайт консорциума World Wide Web http://www.w3.org/.[2] http://www.xml.com/.[3] XML 1.1, 2004.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
