РОССИЙСКИЙ УНИВЕРСИТЕТ ДРУЖБЫ НАРОДОВ
ФАКУЛЬТЕТ ГУМАНИТАРНЫХ И СОЦИАЛЬНЫХ НАУК
КАФЕДРА социологии
РЕФЕРАТ
По практической работе №5
По курсу «Информатика»
Группа: ГСБ-12
Студенты: Захарчук Павел, Арландо
Страна: Россия
Преподаватель:
Матухин Павел Гранитович
Москва
2011
Оглавление
Введение 4
Формы, общие сведения. 5
Тег поля. 5
Поля формы. 8
Текстовое поле формы. 9
Поля пароля формы. 11
Радиокнопки 12
Флажки 14
Поле со списком 15
Атрибуты тега <select> 16
multiple 16
name 17
size 17
Атрибуты тега <OPTION> 17
selected 17
value 18
label 18
Группирование элементов списка 19
Скрытые поля формы 20
Кнопка SUBMIT 24
Кнопка RESET 25
Универсальная кнопка 25
Группы элементов формы 30
Список литературы: 38
Авторы 40
Рисунок 1 11
Рисунок 2 12
Рисунок 3 20
Рисунок 4 28
Рисунок 5 28
Рисунок 6 29
Рисунок 7 29
Введение
Мы, студенты первого курса социологии, решили выполнить реферат по заданиям пятой работы. Данный отчет содержит задания по WEB-формам. Так же отметим, что эта работа содержит задания с 1 по 7 включительно.
Формы, общие сведения.
Связи с адресатами web-страниц, значение, способы организации. Формы web-страниц, назначение, особенности, структура, применение. Атрибуты форм, возврат содержимого.
Формы дают возможность пользователям вводить информацию. Вам наверно, не раз встречались всевозможные тесты, опросы, голосования. Для того, чтобы все это сделать на своих web-страницах и нужны формы.
Здесь следует заметить, что html-формы сами по себе только позволяют вводить информацию, а вот обрабатывать ее HTML не умеет (это все-таки язык разметки, а не программирования). Для обработки информации используются такие языки, как javascript, php и другие.
Тег поля.
Тег <FORM> устанавливает форму на web-странице. Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Файл может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.
Пример использование тега <FORM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег FORM</title>
</head>
<body>
<form action="/ШТМЛ/example/handler.php">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский состав<Br>
<input type="radio" name="answer" value="a2">Операционная система<Br>
<input type="radio" name="answer" value="a3">Большой полоскатый мух</p>
<p><input type="submit"></p>
</form>
</body>
</html>
enctype=Content Type
Этот атрибут определяет тип содержания, используемый для передачи параметра на сервер (когда значение метода - post). Значение по умолчанию для этого атрибута - application/x-www¬form-urlencoded. В настоящее время можно определить только application/x-www-form-urlencoded или multipart/form-data.
Когда значения полей в посылаемой форме может содержать символы, отсутствующие в наборе символов US-ASCII, рекомендуется, чтобы использовались метод post и multipart/form-data [RFC2388].
Устройства вывода должны явно определять тип содержания для каждой части. Если часть соответствует элементу postfield, то тип его содержания должен быть text/plain.
Требуется параметр символов, когда содержание включает символы, отличные от набора символов US-ASCII.
Пример использования: <html>
<head>
<title></title>
<style type="text/css">
<!—
-->
</style>
</head>
<body>
<form action="..." enctype="multipart/form-data" method="post">
<div>
<input type="file" value="имя файла"/>
</div>
<div>
<input type="text" value="Логин"/>
</div>
<div>
<input type="password" value="пароль"/>
</div>
<div>
<input type="submit" value="Отправить"/>
</div>
</form>
</body>
</html>
Поля формы.
Это разные атрибуты тега input. Скопируйте это в блокнот.
<html>
<head>
<title>атрибуты тега input></title>
</head>
<body>
<p>Текстовое поле:<br>
<p><input type="text"></p>
<p>Поле с паролем:<br>
<p><input type="password"></p>
<p>Переключатель:<br>
<p><input type="radio"></p>
<p>Флажок:<br>
<p><input type="checkbox"></p>
<p>Кнопка:<br>
<p><input type="button"></p>
<p>Поле для отправки файла:<br>
<p><input type="file"></p>
<p>Скрытое поле:<br>
<p><input type="hidden"></p>
<p>Поле для отправки формы:<br>
<p><input type="submit"></p>
</body>
</html>
А вот так выглядит один из атрибутов. (пример)
<html>
<head>
<title>Тег INPUT</title>
</head>
<body>
<p><b>Какой поисковой системой в основном пользуетесь:</b><Br>
<input type="radio">Google<Br>
<input type="radio"> Wikipedia<Br>
<input type="radio"> Яндех<Br>
</p>
</body>
</html>
Текстовое поле формы.
Создает элемент для ввода пользователем строки текста
<html>
<body>
<form action="/cgi-bin/handler.cgi">
<b>text name </b><br>
<input type="text" maxlength="n" size="n">
</form>
</body>
</html>
Пример:
<html>
<body>
<form action="/cgi-bin/handler.cgi">
<b>Введите имя</b><br>
<input type="text" maxlength="25" size="20">
</form>
</body>
</html>
Рисунок 1
Поля пароля формы.
<html>
<head>
<title> Новая HTML</title>
</head>
<BODY bgcolor="teal" text="aqua" link="red" background="back.jpg">
WEB страница </P>
<input type="password" name="пароль" size="10" maxlength="7">
<html>
Рисунок 2
Радиокнопки
Радиокнопки TYPE=RADIO
Значение: радиокнопки html придуманы прежде всего для того, чтобы пользователь мог выбирать один из предоставленных ему ответов на вопрос, например, да или нет.
Описание: Radio – при таком значении параметра атрибута Type, с помощью тега Input будет создано в Html Form поле с радиокнопками. В этом случае активным может быть только один из переключателей. По аналогии с включением кнопок на старом радиоприемнике – нажатой может быть только одна клавиша, при нажатии на другую — та клавиша, что была до этого нажата, будет автоматически отщелкнута
Группы радиокнопок:
Text однострочное поле для ввода текста.
password аналогичен элементу управления text, но символы, вводимые в этот элемент управления, не отображаются на экране.
checkbox Элемент управления переключатель.
radio Элемент управления радиокнопка.
file Элемент управления для выбора и передачи файлов.
button Орган управления кнопка.
submit Кнопка для пересылки данных из заполненной формы веб-серверу.
reset Кнопка для сброса содержимого формы в начальное значение.
image Замена кнопки submit графическим изображением.
hidden Скрытое текстовое поле.
Ну и собственно сам код:
<html>
<head>
<title>Тег INPUT</title>
</head>
<body>
<form action="formdata.php" method="post" name="form1">
<p>Какой ваш любимы праздник?</p>
<p> <label> Новый год <input type ="radio" name="time" value="новый год" checked></label> </p>
<p> <label> День рождения <input type="radio" name="time" value="день рождения"></label> </p>
<p> <label> 8 марта <input type="radio" name="time" value="8 марта"></label> </p>
<p> <label> 23 февраля <input type="radio" name="time" value="день рождения"></label> </p>
</form>
</body>
</html>
Флажки
Значение: Флажки (жарг. чекбоксы) используют, когда необходимо выбрать любое количество вариантов из предложенного списка. Если требуется выбор лишь одного варианта, то для этого следует предпочесть переключатели (radiobutton). Флажок создается следующим образом:
<input type="checkbox" атрибуты>
Атрибуты флажков перечислены в табл.1
|
Атрибут |
Описание |
|
checked |
Предварительное выделение текста |
|
name |
Имя флажка для его идентификации обработчиком формы |
|
value |
Задает, какое значение будет отправлено на сервер |
Табл.1
Пример создания флажков:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Флажки</title>
</head>
<body>
<form action="handler.php">
<p>В каких годах произошли самые известные извержения вулкана Кракатау?</p>
<p><input type="checkbox" name="a" value="1417"> 1417</p>
<p><input type="checkbox" name="a" value="1680" checked> 1680</p>
<p><input type="checkbox" name="a" value="1883" checked> 1883</p>
<p><input type="checkbox" name="a" value="1934"> 1934</p>
<p><input type="checkbox" name="a" value="2010"> 2010</p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Поле со списком
Начало формы
Конец формы
Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.
<select атрибуты>
<option атрибуты>Пункт 1</option>
<option атрибуты>Пункт 2</option>
</select>
Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавишиCtrl и Shift и раскрывающийся список.
|
|
|
|
Список множественного выбора |
Раскрывающийся список |
Атрибуты тега <select>
Рассмотрим атрибуты тега <select>, с помощью которых можно изменять представление списка.
multiple
Наличие multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size. Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.
|
|
|
|
Атрибут size отсутствует |
Атрибут size равен 2 |
Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.
В примере 1 показано создание списка множественного выбора.
Пример 1. Список множественного выбора
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
</head>
<body>
<form>
<p><select name="select" size="3" multiple>
<option selected value="s1">Чебурашка</option>
<option value="s2">Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
name
Определяет уникальное имя элемента <select>. Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
size
Устанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple. Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.
Атрибуты тега <OPTION>
Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.
selected
Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.
value
Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.
label
Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри<option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.
Создание списка показано в примере 2.
Пример 2. Использование списка
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
</head>
<body>
<form>
<p><strong>Выбери персонажа</strong></p>
<p><select name="hero">
<option value="s1">Чебурашка</option>
<option value="s2" selected>Крокодил Гена</option>
<option value="s3">Шапокляк</option>
<option value="s3" label="Лариса">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Группирование элементов списка
При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег<optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option>объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.
Пример 3. Группирование элементов списка
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Список</title>
</head>
<body>
<form>
<p><select name="food">
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>
<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Рисунок 3