Отправка данных с использованием форм. Создание формы на html-странице

Тег <FORM> используется для создания форма на web-странице. Форма служат для отправки данных на сервер и обеспечивают диалог пользователя с приложением.
Для отправки формы на сервер обычно используется кнопка, созданная при помощи тега <BUTTON> или <INPUT>, иногда этого же можно добиться, если нажать клавишу <Enter>, находясь в одном из полей данных формы. Когда форма отправляется на сервер, управление данными передается CGI-программе или документу, определенному параметром action тега <FORM>. Предварительно браузер подготавливает информацию в виде пары «имя=значение», где имя определяется параметром name тега <INPUT>, а значение введено пользователем или установлено в поле формы по умолчанию. Если для отправки данных используется метод GET, то адресная строка может принимать вид: http://webcreature.ru/index.php?user=Alex&button=activate Все параметры в адресной строке в этом случае, перечисляются послезнака "?", а символ "&" служит для них связкой.

Пример:

<form name="test_form_name" id="test_form_id" method="get" action="?">
<input type="hidden" name="hidden_name" id="hidden_id" value="hidden" /><br/>
<input type="text" name="text_name" id="text_id" value="text" /><br/>
<input type="password" name="password_name" id="password_id" value="password" /><br/>

<input type="radio" name="radio_group_1" id="radio_id_1" value="radio_1" />
<input type="radio" name="radio_group_1" id="radio_id_2" value="radio_2" />
<input type="radio" name="radio_group_1" id="radio_id_3" value="radio_3" /><br/>

<input type="radio" name="radio_group_2" id="radio_id_a" value="radio_a" />
<input type="radio" name="radio_group_2" id="radio_id_b" value="radio_b" />
<input type="radio" name="radio_group_2" id="radio_id_c" value="radio_c" checked="checked" /><br/>

<input type="checkbox" name="check_a" id="check_id_a" value="check_1" checked="checked" />
<input type="checkbox" name="check_b" id="check_id_b" value="check_2" />
<input type="checkbox" name="check_c" id="check_id_c" value="check_3" checked="checked" /><br/>

<select name="select_name_from" id="select_id_from">
<option value="option_1">1</value>
<option value="option_2" selected="selected">2</value>
<option value="option_3">3</value>
</select><br/>
<select name="select_name_to" id="select_id_to">
<option value="option_4">4</value>
<option value="option_5">5</value>
<option value="option_6">6</value>
</select><br/>
<textarea name="textarea_name" id="textarea_id" cols="20" rows="5">Textarea</textarea><br/>

<input type="submit" name="submit_name" id="submit_id" value="submit" />
<input type="reset" name="reset_name" id="reset_id" value="reset" />
</form>

Задания для практического занятия:

1. Создайте новую HTML-страницу.

2. Создайте документ с несколькими формами (см. пример).

3. Сохраните страницу в личной папке в файл forma.html

Форматирование web-страниц с использованием таблиц стилей.
Создание каскадных листов стилей (css

Стиль— это набор правил оформления элемента web-стра­ницы.

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

Типы селекторов:селекторы тегов, классы и идентификаторы.

Синтаксис стиля:

селектор {параметр].: значение;

параметр2: значение]., значение2;

}

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

Варианты размещения CSS

1. В отдельном файле,если одинаковым стилем оформлены разные страницы. Стили записываются в текстовый файл с рас­ширением CSS (например, mystyle.css):

Пример:

р { color: gold;

background-color: #990000;

}

В коде страницы, на которой используется стиль из этого файла, делают ссылку: Пример:

<head>

<link rel="stylesheet" type="text/css"

href="mystyle.css">

</head>

 

Стиль применяется, когда используют тег, оформленный данным стилем:

<body>

<р>текст</р>

</body>

2. Вразделе head в теге style, если стиль на странице исполь­
зуется несколько раз или в разных тегах.

Пример:

<head>

<style type="text/css"> р { color: gold; background-color: #990000;

}

</style> </head>

3. В любом теге в атрибуте style, если стиль используется редко.
Пример:

<р style="color: gold; background-color: #990000;">

текст </р>

Селекторы тегов. Любой тег HTML может быть селектором. Синтаксис:

Тег { Параметр: Значение; }

Пример:

а) <style>

body { text-align: justify; color: black; font-family:

Arial; }

</style>

б) <headxstyle>

HI { font-family: Arial, Helvetica, Verdana,

sans-serif; font-size: 150%; font-weight: light }

</style></head>

<body>

<Н1>Заголовок</Н1> Обычный текст

</body>

Классы. Классы используют, когда нужно применить стиль к разным тегам web-страницы: ячейкам таблицы, ссылкам, па­раграфам и др.

Синтаксис класса:

Тег.Имя класса { Параметр: Значение; }

В тег добавляется атрибут class= "Имя класса". Пример:

<headxstyle>

P.cite ( color: navy; font-size: 80% margin: 20px }

// параграф с классом cite

</stylex/head>

<body>

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

<p class=cite>TeKCT</p>

</body>

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

.Имя класса { Параметр: Значение; }

Пример:

<headxstyle>

.mycolor { color: navy; color-background: yellow; }

</style></head>

<h2 class=mycolor>TeKCT</h2>

<tablextr>

<td class=mycolor> текст </td>

<td>TeKCT</td>

</tr></table>

Тег spanиспользуют для создания выделенного текста, бук­виц, цитат и др. Пример:

 

<headxstyle>

.capital { font-size: 150%; color: red; }

</styleX/head>

<body>

<span class=capital>B</span>yKBnua

</body>

Псевдоклассы. Псевдокласс используется только для оформ­ления ссылок. Виды псевдоклассов: непосещенная ссылка (link), состояние ссылки под курсором мыши (hover), состояние ссылки в момент щелчка (active), посещенная ссылка (visited). Синтак­сис псевдокласса: А:псевдокласс { Параметр: Значение; }

Пример:

<headxstyle type="text/css">

a:link { color: #003366; }

a:visited { color: #660066; }

a:hover { color: #800000; }

a:active ( color: #FF0O0O; }

</stylex/head>

<body>

| <a href=#>CcbinKa K/a> I <a href=#>Ссылка 2</a> I

<a href=#>CcbtnKa 3</a> I

</body>

Пример:

<head> <style>

a.linkl { font-size: 12px; color: green }

a.linkl:hover { color: red }

a.link2 {font-size: 14px; color: blue }

a.Iink2:hover { color: red }

</style> </head>

<body link=#0000ff>

I <a href=linkl.html>CcbinKa 1</а> | <a href=link2.html

class=linkl>CcbmKa 2</a> | <a href=link3.html

class=link2>CcbLnKa 3</a> |

</body>

Примериспользования наиболее востребованного псевдо­класса (hover):

<headxstyle type="text/css">

a {color: #003366;} a:hover {color: #800000;}

</style></head>

Примериспользования различных классов для разных видовссылок:

<head> <style>

a.linkl {font-size: 12px; color: green;}

a.linkl:hover { color: red;}

a.link2 {font-size: 14px; color: blue;}

a.Iink2:hover {color: red;}

</style> </head>

<body>

I <a href=linkl.html>CcbuiKa 1</а> | <a href=link2.html

class=linkl>CcbmKa 2</a> | <a href=link3.html

class=link2>CcbuiKa 3</a> |

</body>

Шрифт.








Дата добавления: 2015-04-19; просмотров: 1603;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.025 сек.