Скриншоты выполненной работы

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ МОРСКОГО И РЕЧНОГО ФЛОТА ИМЕНИ АДМИРАЛА С. О. МАКАРОВА»

Институт Водного транспорта

Кафедра Вычислительных Систем и Технологии

ОТЧЕТ

КУРС: «Телекоммуникационные технологии»

Лабораторная работа №1

«HTML формы»

Вариант № 3

Выполнил:

Студент группы Иса-31,

Бубнов Н.А.

Проверил:

доцент кафедры ВСИ,

Барышникова Н.Ю.

Санкт – Петербург

Содержание

Содержание. 2

Задание. 3

Теоретические сведения. 5

Основные элементы формы.. 5

Элементы формы.. 6

Форма в таблице. 10

Скриншоты выполненной работы.. 12

Код программы.. 15

Заключение. 17

Задание

1. Необходимо создать форму на основе приведенного ниже вида; (рис. 1)

2. Поля ввода объединить в группу, написать Текст подсказки «заполните поля формы»;

3. Сделать поле ввода Место рождения, написать подсказку «Ваш город». При загрузке формы установить на него фокус ввода, оно обязательно для заполнения;

4. Добавить поле «Средний балл» с ограничением от 0 до 5;

5. В выплывающем элементе должны быть следующие значения: Очная, Заочная, На дому;

6. Максимальное количество символов для пароля – 10;

7. Сделать поле ввода Логин, которое содержит последовательность из 3 цифр и 2 строчных латинских букв. При неправильном заполнение вывести сообщение об ошибке и пример;

8. Установите начальное значение переключателя – 3 курс;

9. Текстовое поле: ширина 35 колонок, высота – 7 рядов.

Рисунок 1. Основа формы

Теоретические сведения

HTML форма – это всего лишь каркас, созданный при помощи языка HTML, т.е. Вы можете указать браузеру, где у Вас будет какое поле и что написано на той или иной кнопке. Но для того, чтобы при нажатии на кнопку Ваш комментарий добавился в гостевую книгу или данные заказа полетели в офис – нужна иная технология – программа, скрипт, который привязывается к форме. Обычно такие программы делаются на php.

Основные элементы формы

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

Пример 1:

<form>

<!–элементы формы -->

</form>

В примере 1 два базовых тега: открывающий <form> и обязательный закрывающий тег </form>.

Для тега <form> есть атрибуты:

· name – определяет имя формы, уникальное для данного документа. Используется только, если в документе присутствует несколько форм;

· action – обязательный атрибут. Указывает путь к скрипту (или программе) сервера, обслуживающему данную форму;

· method – определяет способ отправки содержимого HTML формы. Возможные значения GET (по умолчанию) и POST.

Метод GET используется для передачи различных переменных, или очень коротких сообщений. Информация передается в явном виде через строку браузера, т.е. ее можно перехватить. Например, если Вы видите в строке набора браузера нечто вроде https://adress.com/lessons.php?rub=28 это значит, что передается значение переменной rub равное 28, в HTML формах обычно не используется.

Метод POST создан специально для передачи текстовых сообщений. Почти всегда применяется в формах. Передает информацию в скрытом виде.

Элементы формы

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

Основные атрибуты input:

· type – определяет тип поля для ввода данных. По умолчанию – это "text";

· name – определяет имя, используемое при передаче содержания данной HTML формы на сервер. Если Вы собираетесь куда-нибудь передавать информацию из формы, то обязательно вводите имя;

· size – определяет размер поля в символах. По умолчанию имеет значение равное 24. Т.е. если этот атрибут не писать то длина будет равна 24 символа;

· maxlength – определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в атрибуте size. По умолчанию количество символов не ограничено;

· value – определяет, что будет по умолчанию написано в поле для ввода;

Вид элемента определяет атрибут type. Возможные значения атрибута:

· type="text" – создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value;

· type="password" – создание поля для ввода пароля, причем введенная информация отображается звездочками;

· type="checkbox" – создание флажка;

· type="radio" – радиопереключатель, определение одного переключателя;

· type="button" – создание кнопки произвольного назначения;

· type="submit" – создание кнопки, щелчок по которой подтверждает ввод информации в форму (рис.4);

· type="reset" – кнопка для отмены ввода данных в форму;

· type=" image" – создание кнопки с рисунком;

· type="file" – средство выбора файла для присоединения к форме;

· type="hidden" – скрытый от пользователя элемент. Такие элементы используются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.

Элемент radio, производит переключение: либо одно значение, либо другое, два одновременно быть не может. Для каждого radio значение атрибут value будет свой, а name – одинаковый.

Чтобы по умолчанию у Вас радиопереключатель был установлен на каком-либо варианте, то просто допишите атрибут-флаг checked (включен). В радиопереключателе обязательно должен присутствовать атрибут value иначе ничего работать не будет.

Элемпент checkbox отличается от радиопереключателя тем, что здесь можно выбрать несколько вариантов. Атрибут name нужен для того, чтобы обработчик мог идентифицировать данное поле, value – определяет тот параметр, который будет отправлен при поставленной галочке.

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

Если необходимо создать кнопку, которая будет отправлять данные обработчику, то пишем type="submit"(тип-отправить), а если хотите, чтоб кнопка выполняла функцию сброса то type="reset". Атрибут value указывает на то, что будет написано на кнопке.

Для создания кнопки с рисунком image необходимо указать графический файл используя атрибут src. Атрибут align предназначен для позиционирования кнопки с рисунком. Значения атрибута: bottom, left, middle, right, top. Пользоваться этим атрибутом в данном случае не рекомендуется, так как не все браузеры его поддерживают.

Элемент управления, который позволяет пользователю выбрать файл – file. Пользователю предлагается записать имя файла в поле ввода. Кроме того, браузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартный (для операционной системы) диалог выбора файлов.

Элемент select – выбор, у него обязательно должен быть закрывающий тег. Внутри него содержатся элементы option (опции выбора), без него выбирать будет не из чего.

Также есть атрибуты name, value (не обязательный атрибут). Они нужны для того, чтобы обработчик мог идентифицировать выбранный вариант.

Атрибут size задает количество одновременно видимых пунктов меню.

Атрибут-флаг selected означает, что данное значение, будет выбрано по

умолчанию. Можно также сделать, чтобы имелась возможность выбора нескольких пунктов меню при удержании клавиши Ctrl. Для этого используется атрибут-флаг multiple.

Элемент textarea (текстовая площадь) используется для создания больших текстовых полей (рис.6). У этого элемента обязательно наличие закрывающего тега. Этот элемент имеет атрибут name, который поможет идентифицировать заполненное поле на сервере. Здесь нет параметра value, т.к. в качестве значения обработчику посылается текст, который Вы ввели в текстовое поле.

Атрибуты cols и rows определяют ширину и высоту поля. К примеру, cols="45" rows ="5" означает, что ширина будет 45 колонок, а высота 5 рядов. Колонки и ряды естественно формируются из символов. Т.е. ширина 25 колонок, означает ширину в 25 символов.

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

Атрибут maxlength определяет количество символов, которое пользователь может ввести в поле ввода. При превышении этого количества браузер отреагирует на попытку ввода нового символа звуковым сигналом и не даст ввести очередной символ. Не следует путать этот атрибут с атрибутом size, который определяет количество видимых в поле символов. Например, при запросе года Вы можете ограничить количество символов, установив значение атрибута maxlength равным 4.

Атрибут placeholder – это возможность использования замещающего текста (placeholder text) в поле ввода. Замещающий текст отображается внутри поля ввода до тех пор, пока поле не имеет фокуса ввода. Как только пользователь сфокусируется на поле и начнет ввод текста, замещающий текст исчезает.

Атрибут autofocus делает именно то, о чем говорит его название: как только страница загружается, он передает фокус ввода в конкретное поле ввода. Чтобы механизм автофокуса работал надежно, на странице должен быть только один атрибут autofocus. Если таких элементов будет несколько, браузер размещает курсор в последнем поле автофокуса.

Атрибуты min и mах позволяют задать нижнюю и верхнюю границы для значений, которые могут вводиться в числовое поле формы, например, типы поля ввода – number, range, time, date, datetime, datetime-local, month, time или week.

Атрибут required указывает, что поле элемента формы обязательно к заполнению пользователем. Когда пользователь отправляет форму, браузер проверяет, не оставлены ли пустыми все обязательные поля. При необходимости он остановит отправку данных и выведет сообщение об ошибке. Это можно легко реализовать, добавляя атрибут required к элементам input, select или textarea.

Атрибут pattern служит для упрощения процесса проверки формы и содержит новые типы поля input: email, url и tel. Данные значения обеспечивают автоматическую валидацию. При любом несовпадении формата ввода данные типы поля будут выдавать ошибку, предотвращая отправку формы.

Атрибут pattern позволяет задавать Ваши собственные правила валидации значения поля input при помощи регулярных выражений (RegEx). И если значение введенное пользователем в поле не совпадает с заданным шаблоном, то выведется ошибка.

Форма в таблице

Часто формы используются для ввода группы данных, поэтому для наглядности их удобно объединять в таблицы.

Элементы предназначенные для создания группы полей в форме:

<legend> Заголовок группы </legend>

</fieldset>

С помощью элемента fieldset несколько элементов объединяются: пользователь видит их заключенными в рамку. Внутри группы элементы формы используются обычным способом.

Элемент legend позволяет создать заголовок группы. Поскольку этот элемент является контейнером, в нем можно размещать другие элементы HTML. Например, заголовок группы можно составить из двух строк, если использовать тег <br>. В этом случае размер шрифта заголовка целесообразно уменьшить.

С помощью атрибута align можно регулировать положение заголовка:

· top – заголовок сверху;

· bottom – заголовок внизу (что не всегда удается, реализовать);

· left – заголовок вверху и слева (значение по умолчанию);

· right – заголовок вверху и справа. Стандартные атрибуты элемента legend: accesskey, id, class, lang, dir, style, title, атрибуты событий.

Используя различные элементы и атрибуты можно создавать разнообразные формы.

Скриншоты выполненной работы

На рисунке 2 представлена форма с правильно заполненными полями.

Рисунок 2. Верный ввод

На рисунке 3 представлена ошибка, если не заполнено обязательное поле.

Рисунок 3. Обязательное поле ввода

На рисунке 4 представлена ошибка при вводе неверного логина и показ примера.

Рисунок 4. Ошибка ввода логина

Код программы

<HTML>

<HEAD>

<TITLE>Работа с формой</TITLE>

<HEAD>

<BODY>

<form>

<legend> Заполните поля формы: </legend>

Введите ФИО:<p>

Логин:<p>

<input type = "text" id="log"

placeholder="3 цифры и 2 строчные буквы" minlength="5" pattern="(([0-9]{3}[a-z]{2})|([0-9]{2}[a-z]{1}[0-9]{1}[a-z]{1})|([0-9]{2}[a-z]{2}[0-9]{1})|([0-9]{1}[a-z]{1}[0-9]{1}[a-z]{1}[0-9]{1})|([0-9]{1}[a-z]{2}[0-9]{2})|([a-z]{1}[0-9]{1}[a-z]{1}[0-9]{2})|([a-z]{2}[0-9]{3})|([a-z]{1}[0-9]{3}[a-z]{1})|([a-z]{1}[0-9]{2}[a-z]{1}[0-9]{1}))">

Введите пароль:<p>

Место рождения:<p>

Средний балл:<p>

</fieldset>

<p><b>На каком курсе Вы учитесь?</b><Br><p>

<legend>Какие обучающие курсы Вы хотите пройти?</legend><p>

<input type="checkbox" name="option1" value="a1">Курсы на фотошоп<Br>

<input type="checkbox" name="option2" value="a2">Курсы по Abode Dreamweaver<Br>

<input type="checkbox" name="option3" value="a3">Курсы по PHP<Br>

<input type="checkbox" name="option4" value="a4">Курсы по MySQL<Br>

<p><b>Выберите форму обучения:</b></p>

<option value="Очная">Очная</option>

<option value="Заочная">Заочная</option>

</select></p>

<p><b>Введите ваши данные:</b>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp

function buttonclick()

{

let login = document.getElementById('log').value;

let check = /(([0-9]{3}[a-z]{2})|([0-9]{2}[a-z]{1}[0-9]{1}[a-z]{1})|([0-9]{2}[a-z]{2}[0-9]{1})|([0-9]{1}[a-z]{1}[0-9]{1}[a-z]{1}[0-9]{1})|([0-9]{1}[a-z]{2}[0-9]{2})|([a-z]{1}[0-9]{1}[a-z]{1}[0-9]{2})|([a-z]{2}[0-9]{3})|([a-z]{1}[0-9]{3}[a-z]{1})|([a-z]{1}[0-9]{2}[a-z]{1}[0-9]{1}))/;

if (!date(check, login)) numberT.textContent = "Пример, 43g5f";

}

function date(regex, text){

return regex.test(text)

}

</script>

</form>

</BODY>

</HTML>

Заключение

Выполнив лабораторную работу №1, мы получили такие знания как:

· что такое HTML форма и что необходимо для полноценной работы формы;

· различные элементы такие как: input и textarea. Их атрибуты;

· взаимосвязь таблицы и формы. Атрибуты таблицы.

Скриншоты выполненной работы

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