Задание создайте html форму

Практическая работа № 4 Формы в html-документах

Цель:Изучение HTML-форм и их элементов. Приобретение навыков использование форм для взаимодействия пользователя с HTML-документами.

Формы используются при создании интерактивных страниц, позволяющих осуществлять передачу данных, вводимых пользователем в браузере, на Web-сервер. Формы используются для организации опросов, заполнения анкет, тестирования и т.д. Кроме того с помощью сценариев (скриптов), например JavaScript, форма позволяет получить доступ к любому элементу HTML-документа и изменять его и применять по своему усмотрению.

Форма отображается в окне браузера в виде набора стандартных элементов управления – полей ввода данных и кнопок.

По команде пользователя браузер собирает введенную информацию, форматирует ее и передает на сервер. На стороне Web-сервера обработку полученной от клиента информации выполняет специальная программа-обработчик. Таким образом, формы являются способом обмена данными между браузером и Web-сервером.

1. Формы в html-документах

В HTML-документе форма открывается тегом

и заканчивается меткой

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

Формы передают информацию серверным программам-обработчикам в виде пар

[имя переменной]=[значение переменной].

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

Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.

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

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

ACTION=url

где url— адресWeb-сервера и программы, которая будет обрабатывать данные формы. Если это поле отсутствует, будет использован URL адрес текущего документа. Допустимо использовать значениеMAILTO:url для отправки данных по электронной почте.

METHOD=get/post

где get/post– метод, определяющий способ передачи данных формы протоколом HTTP. Метод GETможет использоваться для передачи коротких сообщений.Браузер при этом берёт значение action формы, добавляет `?’, затем присоединяет набор данных формы, разделенных символом амперсанда (&), и направляет полученную строку на указанный URL. Информация передается в явном виде. Например, если в строке набора браузера присутствует http://adress.com/lessons.php?rub=28 это значит что передается значение переменной rub равное 28. В формахHTML-документов этот метод обычно не используется, так как допускает простой перехват отсылаемых на сервер данных.

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

Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.

задает тип кодирования содержимого заполненной формы. Этот атрибут действует только для метод POST и имеет только одно возможное значение (которое является значением по умолчанию) — application/x-www-form-urlencoded.

TARGET=window

Определяет положение ответа сервера по получению формы (по аналогии с тегом )

Значения параметра window:

имя окна, в котором будет выведен результат, если указанное имя отсутствует, то результат будет показан в новом окне;

показать результат в новом окне;

Источник

HTML Урок 7. Создание форм в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

form action="file.php" method="post" id="form"> . содержимое формы . /form>

Атрибуты формы:

• В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
• Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
• Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

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

input type="text" name="login" size="20" value="Логин" maxlength="25">

• Значение атрибута type — text — указывает на то, что это именно текстовое поле
• size — размер текстового поля в символах
• maxlength — максимальное кол-во вмещающихся в поле символов
• value — первоначальный текст в текстовом поле
• name — имя элемента, необходимо для обработки данных в файле-обработчике

input type="password" name="pass" size="20" value="Пароль" maxlength="25">

Вместо текста в поле отображается маска — звездочки или кружочки

input type="submit" value="Отправить данные">

Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

input type="reset" value="Очистить форму">

Результат:

Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

input type="checkbox" name="asp" value="yes">ASPbr> input type="checkbox" name="js" value="yes" checked="checked">javascriptbr> input type="checkbox" name="php" value="yes">PHPbr> input type="checkbox" name="html" value="yes" checked="checked">HTMLbr>

В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа.

input type="radio" name="book" value="asp">ASPbr> input type="radio" name="book" value="js">Javascriptbr> input type="radio" name="book" value="php">PHPbr> input type="radio" name="book" value="html" checked="checked">HTMLbr>

radio кнопка html служит для единственного выбора из нескольких вариантов.

Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

Выпадающий список HTML

Рассмотрим пример добавления выпадающего списка:

select name="book" size="1"> option value="asp">ASP/option> option value="js">JavaScript/option> option value="php">PHP/option> option value="html" selected="selected">HTML/option> /select>

Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта

Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

1 2 3 4 5 6 7 8 9 10 11 12

select name="book" size="1"> optgroup label="Английские"> option value="asp">ASP/option> option value="js">JavaScript/option> option value="php">PHP/option> option value="html" selected="selected">HTML/option> /optgroup> optgroup label="Русские"> option value="asp_rus">ASP по-русски/option> option value="js_rus">JavaScript по-русски/option> /optgroup> /select>

Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1 :

select name="book" size="4" multiple="multiple"> .

Текстовая область в HTML

Для ввода большого фрагмента текста служит элемент текстовая область:

textarea name="description" cols="30" rows="10">Текст/textarea>

• Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали.
• Атрибут rows определяет количество строк в элементе.
• Атрибут name необходим для обработки элемента программистом. Поэтому его можно опустить.

Другие элементы

input type="button" value="что-то сделать">

input type="image" width="32" height="32" src="1.png">

Для прикрепления файла к форме существует специальный элемент управления:

input type="file" name="userfile" size="20">

При его использовании значение кодировки формы (атрибут enctype у тега form ) должен иметь значение multipart/form-data

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

input type="hidden" name="uid" value="15362">

Дополнительные элементы и атрибуты

input type="checkbox" id="book1"> label for="book1">ASP/label>

В примере создана надпись (тег label ) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled">br> input type="checkbox" name="asp" value="yes">ASPbr> input type="checkbox" name="js" value="yes" checked="checked" disabled="disabled">javascriptbr>

input type="text" name="login" size="20" value="Логин"  maxlength="25" readonly="readonly">

fieldset> legend>Книги/legend> input type="checkbox" value="html">HTMLbr> input type="checkbox" value="asp">ASPbr> input type="checkbox" value="js">javaScriptbr> /fieldset>

Задание: Необходимо создать анкету web-разработчика согласно изображению. Элементы располагать в табличном виде

Источник

4 Формы в HTML-документах

Цель работы: формирование умений создание форм с помощью HTML
Задание 1
Создайте новую страницу. Составьте форму-анкету (используя метод POST), включающую в себя следующие поля (все переменные должны быть, читаемы, например: русский язык — langru, а не C1 или T2, по умолчанию в значениях должны быть ваши данные):
Вариант
– регистрация на сайте программистов
• Фамилия
• Имя
• Отчество
• E-mail
• Выбор страны (обязательно выпадающим SELECT, не менее 10-ти)
• Выбор города (обязательно с помощью radio, переменные должны быть одинаковыми, не менее 5-ти)
• Выбор языка (обязательно с помощью checkbox, переменные должны быть разными, не менее 5-ти)
• Выбор языка программирования (обязательно с помощью SELECT MULTIPLE, переменные должны быть разными, не менее 10-ти)
• Пароль
• Дополнительная информация (обязательно с помощью TEXTAREA)
• В скрытом поле (hidden), передайте переменную student со значением «Ваше_имя»(student=Ваше_имя).
• Кнопка для загрузки информации на сервер
• Кнопка для очистки формы

Для выполнения задания создаю новую страницу. Составляю форму-анкету, включающую в себя следующие поля: Фамилия, Имя, Отчество, E-mail, выбор страны (выпадающим SELECT), выбор города (с помощью radio), выбор языка (с помощью checkbox), выбор языка программирования ( с помощью SELECT MULTIPLE), пароль, дополнительная информация (с помощью TEXTAREA), в скрытом поле (hidden) передаю переменную student со значением «Smetanina», кнопка для загрузки информации на сервер, кнопка для очистки формы

Задание 2
Создайте новую страницу. Создайте простые поисковые формы к поисковым системам.
Создаю новую html страницу, в которой создаю формы для ввода поисковых запросов, использую метод GET, в атрибуте указываю ресурс, который будет осуществлять поисковый запрос.

Решение (бесплатная часть):

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

png — 1 шт.,

Здесь предоставлено готовое решенное задание по дисциплине Компьютерные науки (Computer science), вы можите получить его за вознаграждение.
Если у вас есть другие решенные задания, контрольные или курсовые, вы можите продать их на нашем сервисе практически без комиссии, для этого авторизируйтесь или зарегистриуйтесь Пожаловаться

Найди готовое или заработай

С нашими удобными сервисами без комиссии*

• У вас есть задание, но нет времени его делать
• Вы хотите найти профессионала для выплнения задания
• Возможно примерение функции гаранта на сделку
• Приорететная поддержка
• идеально подходит для студентов, у которых нет времени для решения заданий

• Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
• Вам предоставят готовое решение
• Будет предоставлено в минимальные сроки т.к. задание уже готовое
• Вы получите базовую гарантию 8 дней
• Вы можете заработать на материалах
• подходит как для студентов так и для преподавателей

• Вы профессионал своего дела
• У вас есть опыт и желание зарабатывать
• Вы хотите помочь в решении задач или написании работ
• Возможно примерение функции гаранта на сделку
• подходит для опытных студентов так и для преподавателей

Источник