Слайд 2
Тег
Тег span используется для того, чтобы вносить
изменения в оформлении некоторых словосочетаний или предложений написанных уже
в установленном блоке.
Когда вы связываете текст с помощью элемента span вы можете добавить оформление с помощью CSS или изменить элемент с помощью JavaScript.
Данный элемент очень удобен, например, для использовании в оформлении форм, чтобы выдавать информацию о местах, где были совершены ошибки при заполнении с помощью JS
Слайд 3
Пример
В начале апреля трава на улице
и желтая
Слайд 4
Работа с формами
Форма – это элемент HTML, позволяющий
передавать информацию на web-сервер, где информация будет обработана. С
помощью форм организуются тесты, голосования, опросы. Заметим, что html-формы сами по себе позволяют только организовывать ввод информацию.
Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.
Слайд 5
Тег и его атрибуты
Форма задается парным тегом
и внутри данного тега располагаются элементы формы.
Тег
имеет следующие важные атрибуты:
name – имя формы. Необходимо указывать, если на странице несколько форм;
action – определяет URL адрес, на который будет передаваться информация из формы;
method – определяет способ передачи данных с формы;
enctype – задает тип содержимого, используемый для отправки данных с формы на сервер.
Слайд 6
Атрибут method
Данный атрибут может принимать 2 значения: GET
– который стоит по умолчанию и POST.
Если описан атрибут
GET, то информация будет передаваться через строку адреса (место, где отображается URL адрес). В данном случае мы также ограничены длиной адресной строки, которую принимает браузер.
С помощью метода POST информация передается серверу без возможности увидеть её клиенту, что увеличивает частично безопасность отправки данных.
Слайд 7
Как правильно выбрать значения для атрибута method?
Если вы
хотите, чтобы ваша программа вызывалась с помощью ссылки, предпочтение
следует отдать методу GET.
Если вы не хотите, чтобы аргументы, передаваемые вашей программе, записывались в файл отчета сервера, используйте метод POST. Например, если форма требует указать имя пользователя и пароль, вы вряд ли захотите, чтобы имена и пароли сохранялись в файле отчета.
Если ваша форма имеет значительные размеры, например в ней есть текстовые окна с заметками и комментариями, следует использовать метод POST.
Если ваша форма содержит файловое поле, используйте метод POST. Кроме того, в этом случае нужно установить значение атрибута ENCTYPE в multipart/form-data.
Слайд 9
Тег - текстовое поле
Данный тег дает возможность
ввести данные в однострочное поле (подобие textbox).
Данный тег имеет
следующие атрибуты:
name – имя элемента;
type – тип элемента;
size – количество символов которые будут видны в поле;
maxlength – максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным
Слайд 10
Атрибуты тега
value - текст, который будет отображаться.
При отсутствии этого параметра поле будет пустым;
disabled - блокирует
поле от любых изменений;
readonly - делает поле доступным только для чтения.
Слайд 11
Значения атрибута type
button - кнопка
checkbox - флажки
file -
поле для ввода имени файла
hidden - скрытое поле (не
отображается на веб-странице)
image - поле с изображением
password - текстовое поле в котором все символы показываются *
radio - переключатели
reset - сброс формы (возвращение формы в первоначальный вид)
submit - кнопка для отправки данных формы на сервер
text - текстовое поле
Слайд 12
Особенности типов
checkbox и radio
Если в теге input установить
атрибут checked то данный элемент будет отмечен точной или
галочкой;
Если необходимо указать принадлежность элементов с типом radio к одной группе, то значение атрибута name у всех элементов должен быть одно и то же;
Если значение value не задано и элемент отмечен, то формат переданных данных будет следующий <имя_элемента>=on.
Слайд 13
Дополнительные атрибуты для кнопок и изображения
Submit, reset, button
имеют следующие атрибуты:
name, value= - отображается на странице;
Image имеет
следующие атрибуты:
name, src=<Ссылка на изображение>;
Слайд 14
Тег
В данном теге есть также атрибут type
который может принимать значения reset, submit, button, ну а
также присутствуют атрибуты name и value.
Чтобы отобразить изображение на кнопке, необходимо между тегами добавить тег
;
Слайд 15
Область для ввода текста
Если одного поля для ввода
не хватает, необходимо использовать тег чтобы создать
область ввода на странице.
Данный тег обладает следующими атрибутами:
name - имя поля;
cols - ширина поля в символах;
rows – высота поля в символах;
disabled - неактивное поле;
readonly - разрешено только чтение;
wrap - способ переноса слов:
off - переноса не происходит,
virtual - перенос отображается, но на сервер поступает неделимая строка,
physical - перенос и на экране и при поступлении на сервер.
Слайд 16
Списки для формы
Списки задаются с помощью тега
и использование внутри него тега .
Select имеет следующие атрибуты:
name
– имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.
size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.
multiple - разрешает выбор нескольких элементов списка.
Слайд 17
Атрибуты тега
selected - им помечают наиболее вероятный
для выбора элемент списка, если список со множественным выбором,
то можно пометить несколько пунктов.
value - значение, которое будет отправлено серверу, если пункт выбран.
Слайд 18
Тег
Внутри тега можно использовать также
парный тег , который будет группировать элементы списка в
нужную группу.
Имя группы задается с помощью атрибута label.