Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Тег <span> и работа с формами в html

Содержание

Тег Тег span используется для того, чтобы вносить изменения в оформлении некоторых словосочетаний или предложений написанных уже в установленном блоке.Когда вы связываете текст с помощью элемента span вы можете добавить оформление с помощью CSS или изменить
Занятие № 3 Тег и работа с формами в HTMLРассказчик:Чувашов Александрhackdiod@gmail.comТел. 89028329117 Тег Тег span используется для того, чтобы вносить изменения в оформлении некоторых ПримерВ начале апреля трава на улице Работа с формамиФорма – это элемент HTML, позволяющий передавать информацию на web-сервер, Тег и его атрибутыФорма задается парным тегом и внутри данного тега располагаются Атрибут methodДанный атрибут может принимать 2 значения: GET – который стоит по Как правильно выбрать значения для атрибута method?Если вы хотите, чтобы ваша программа Атрибут enctypeДанный атрибут может принимать следующие значения: Тег - текстовое полеДанный тег дает возможность ввести данные в однострочное поле Атрибуты тега value - текст, который будет отображаться. При отсутствии этого параметра Значения атрибута typebutton - кнопкаcheckbox - флажкиfile - поле для ввода имени Особенности типов checkbox и radioЕсли в теге input установить атрибут checked то Дополнительные атрибуты для кнопок и изображенияSubmit, reset, button имеют следующие атрибуты: name, Тег В данном теге есть также атрибут type который может принимать значения Область для ввода текстаЕсли одного поля для ввода не хватает, необходимо использовать Списки для формыСписки задаются с помощью тега и использование внутри него тега Атрибуты тега selected - им помечают наиболее вероятный для выбора элемент списка, Тег Внутри тега можно использовать также парный тег , который будет группировать Тег Данный тег используется для связывания элемента формы с введенным текстом. Например,
Слайды презентации

Слайд 2 Тег
Тег span используется для того, чтобы вносить

Тег Тег span используется для того, чтобы вносить изменения в оформлении

изменения в оформлении некоторых словосочетаний или предложений написанных уже

в установленном блоке.
Когда вы связываете текст с помощью элемента span вы можете добавить оформление с помощью CSS или изменить элемент с помощью JavaScript.
Данный элемент очень удобен, например, для использовании в оформлении форм, чтобы выдавать информацию о местах, где были совершены ошибки при заполнении с помощью JS

Слайд 3 Пример
В начале апреля трава на улице

ПримерВ начале апреля трава на улице

и желтая


Слайд 4 Работа с формами
Форма – это элемент HTML, позволяющий

Работа с формамиФорма – это элемент HTML, позволяющий передавать информацию на

передавать информацию на web-сервер, где информация будет обработана. С

помощью форм организуются тесты, голосования, опросы. Заметим, что html-формы сами по себе позволяют только организовывать ввод информацию.
Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Слайд 5 Тег и его атрибуты
Форма задается парным тегом

Тег и его атрибутыФорма задается парным тегом и внутри данного тега

и внутри данного тега располагаются элементы формы.
Тег

имеет следующие важные атрибуты:
name – имя формы. Необходимо указывать, если на странице несколько форм;
action – определяет URL адрес, на который будет передаваться информация из формы;
method – определяет способ передачи данных с формы;
enctype – задает тип содержимого, используемый для отправки данных с формы на сервер.

Слайд 6 Атрибут method
Данный атрибут может принимать 2 значения: GET

Атрибут methodДанный атрибут может принимать 2 значения: GET – который стоит

– который стоит по умолчанию и POST.
Если описан атрибут

GET, то информация будет передаваться через строку адреса (место, где отображается URL адрес). В данном случае мы также ограничены длиной адресной строки, которую принимает браузер.
С помощью метода POST информация передается серверу без возможности увидеть её клиенту, что увеличивает частично безопасность отправки данных.

Слайд 7 Как правильно выбрать значения для атрибута method?
Если вы

Как правильно выбрать значения для атрибута method?Если вы хотите, чтобы ваша

хотите, чтобы ваша программа вызывалась с помощью ссылки, предпочтение

следует отдать методу GET.
Если вы не хотите, чтобы аргументы, передаваемые вашей программе, записывались в файл отчета сервера, используйте метод POST. Например, если форма требует указать имя пользователя и пароль, вы вряд ли захотите, чтобы имена и пароли сохранялись в файле отчета.
Если ваша форма имеет значительные размеры, например в ней есть текстовые окна с заметками и комментариями, следует использовать метод POST.
Если ваша форма содержит файловое поле, используйте метод POST. Кроме того, в этом случае нужно установить значение атрибута ENCTYPE в multipart/form-data.

Слайд 8 Атрибут enctype
Данный атрибут может принимать следующие значения:
"text/plain" —

Атрибут enctypeДанный атрибут может принимать следующие значения:

указывает Web-браузеру, что результаты формы должны передаваться в виде

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

Слайд 9 Тег - текстовое поле
Данный тег дает возможность

Тег - текстовое полеДанный тег дает возможность ввести данные в однострочное

ввести данные в однострочное поле (подобие textbox).
Данный тег имеет

следующие атрибуты:
name – имя элемента;
type – тип элемента;
size – количество символов которые будут видны в поле;
maxlength – максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным

Слайд 10 Атрибуты тега
value - текст, который будет отображаться.

Атрибуты тега value - текст, который будет отображаться. При отсутствии этого

При отсутствии этого параметра поле будет пустым;
disabled - блокирует

поле от любых изменений;
readonly - делает поле доступным только для чтения.

Слайд 11 Значения атрибута type
button - кнопка
checkbox - флажки
file -

Значения атрибута typebutton - кнопкаcheckbox - флажкиfile - поле для ввода

поле для ввода имени файла
hidden - скрытое поле (не

отображается на веб-странице)
image - поле с изображением
password - текстовое поле в котором все символы показываются *
radio - переключатели
reset - сброс формы (возвращение формы в первоначальный вид)
submit - кнопка для отправки данных формы на сервер
text - текстовое поле

Слайд 12 Особенности типов checkbox и radio
Если в теге input установить

Особенности типов checkbox и radioЕсли в теге input установить атрибут checked

атрибут checked то данный элемент будет отмечен точной или

галочкой;
Если необходимо указать принадлежность элементов с типом radio к одной группе, то значение атрибута name у всех элементов должен быть одно и то же;
Если значение value не задано и элемент отмечен, то формат переданных данных будет следующий <имя_элемента>=on.


Слайд 13 Дополнительные атрибуты для кнопок и изображения
Submit, reset, button

Дополнительные атрибуты для кнопок и изображенияSubmit, reset, button имеют следующие атрибуты:

имеют следующие атрибуты: name, value= - отображается на странице;
Image имеет

следующие атрибуты: name, src=<Ссылка на изображение>;

Слайд 14 Тег
В данном теге есть также атрибут type

Тег В данном теге есть также атрибут 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 - им помечают наиболее вероятный

Атрибуты тега selected - им помечают наиболее вероятный для выбора элемент

для выбора элемент списка, если список со множественным выбором,

то можно пометить несколько пунктов.
value - значение, которое будет отправлено серверу, если пункт выбран.

Слайд 18 Тег
Внутри тега можно использовать также

Тег Внутри тега можно использовать также парный тег , который будет

парный тег , который будет группировать элементы списка в

нужную группу.
Имя группы задается с помощью атрибута label.

  • Имя файла: teg-ltspangt-i-rabota-s-formami-v-html.pptx
  • Количество просмотров: 125
  • Количество скачиваний: 0