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

Содержание

• 
  Слайд 1

  Занятие № 3Тег и работа с формами в HTML

  Рассказчик: Чувашов Александр hackdiod@gmail.com Тел. 89028329117 1

• 
  Слайд 2

  Тег

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

• 
  Слайд 3

  Пример

  В начале апреля трава на улице зеленая и желтая

  3
• 
  Слайд 4

  Работа с формами

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

• 
  Слайд 5

  Тег и его атрибуты

  Форма задается парным тегом

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

  Атрибут method

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

• 
  Слайд 7

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

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

• 
  Слайд 8

  Атрибут enctype

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

• 
  Слайд 9

  Тег - текстовое поле

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

• 
  Слайд 10

  Атрибуты тега

  value - текст, который будет отображаться. При отсутствии этого параметра поле будет пустым; disabled - блокирует поле от любых изменений; readonly - делает поле доступным только для чтения. 10

• 
  Слайд 11

  Значения атрибута type

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

• 
  Слайд 12

  Особенности типовcheckbox и radio

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

• 
  Слайд 13

  Дополнительные атрибуты для кнопок и изображения

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

• 
  Слайд 14

  Тег

  В данном теге есть также атрибут type который может принимать значения reset, submit, button, ну а также присутствуют атрибуты name и value. Чтобы отобразить изображение на кнопке, необходимо между тегами добавить тег ; 14

• 
  Слайд 15

  Область для ввода текста

  Если одного поля для ввода не хватает, необходимо использовать тег чтобы создать область ввода на странице. Данный тег обладает следующими атрибутами: name - имя поля; cols - ширина поля в символах; rows – высота поля в символах; disabled - неактивное поле; readonly - разрешено только чтение; wrap - способ переноса слов: off - переноса не происходит, virtual - перенос отображается, но на сервер поступает неделимая строка, physical - перенос и на экране и при поступлении на сервер. 15

• 
  Слайд 16

  Списки для формы

  Списки задаются с помощью тега и использование внутри него тега . Select имеет следующие атрибуты: name – имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option. size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки. multiple - разрешает выбор нескольких элементов списка. 16

• 
  Слайд 17

  Атрибуты тега

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

• 
  Слайд 18

  Тег

  Внутри тега можно использовать также парный тег , который будет группировать элементы списка в нужную группу. Имя группы задается с помощью атрибута label. 18

• 
  Слайд 19

  Тег

  Данный тег используется для связывания элемента формы с введенным текстом. Например, его используют совместно с checkbox и radio, для того, чтобы при щелчке по тексту к данному элементу он отмечался. В противном случае необходимо будет щелкать по самому элементу. 19