Пятница, 20-10-2017
Заработай свою "копейку"
Меню сайта
Категории раздела
Виды заработка [2]
Описаны некоторые виды заработка в интернете, с чего начать зарабатывать деньги
Изучаем html [26]
Почтовый спонсор [39]
Биржи фрилансеров. [1]
Бонусы [0]
Понемногу обо всем [15]
Реклама
Советуем почитать
  • Была идея, стало много денег
  • Статистика


    publ - Главная » Статьи » Изучаем html

    Формы - элемент взаимодействия пользователя с сайтом.

    Формы - элемент взаимодействия пользователя с сайтом

    Для взаимодействия сайта с пользователем применяется тег <FORM>. Назначение тега передать данные, введенные пользователем в поля формы, на сервер сайта, для дальнейшей обработки. Применение форм позволяет создавать форумы, гостевые книги и многое другое. Для обработки данных форм используют языки программирования, такие как PHP или Perl.

    Формат представления:

    <form action="Обработчик данных">

    Поля формы:

    <input> - Используется при создании простых полей.

    <select> - Списки для выбора пользователем.

    <textarea> - Многострочные текстовые поля.

    </form>

    Атрибуты:

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

    enctype - Принимает значение "multipart/form-data" для передачи данных обработчику. Если нет возможности использовать программу обработки формы можно организовать передачу данных на почтовый ящик. В этом случае атрибуту action задают адрес электронной почты в формате "mailto:Адрес получателя", а encode присваивается значение "text/plain". mailto: является ключевым словом и адрес должен в обязательном порядке начинаться с него. После отправки формы откроется почтовый клиент пользователя с предложением отправить данные формы в письме. В письмо будет вложен текстовый файл с названием и значением полей формы (название поля= значение поля).

    method - Метод отправки данных формы. При передаче данных используются два метода GET и POST (значения атрибута). Использование этих методов обусловлено объемом передаваемых данных и отличаются только способом передачи данных формы.

    Метод  GET - Данные передаются на сервер через адресную строку браузера. Поля формы добавляются к адресу символом ? и разделяются символом & ("обработчик?Par1=1&Par2=2" - где Par1 имя поля а после знака = его значение). Используется для отправки простых форм.

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

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

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

    type - Задает тип используемого поля.

    name - Имя поля формы. Должно быть уникально для формы и необходим обработчику для обработки полей.

    disable - Запрещает изменять значение пользователем.

    value - Значение, которое будет передано обработчику. Для текстовых полей определяет значение по умолчанию.

    Разные типы полей имеют свой набор атрибутов.

    Поля создаваемые с помощью тега input
    ЗначениеТип поля
    textПоле ввода текста. Весь текст вводится в одну строку.
    passwordПоле ввода пароля.
    buttonПростая кнопка.
    fileПоле добавления файла.
    imageПоле картинки.
    checkboxФлажок.
    radioПереключатель.
    resetКнопка для очистки формы (задание первоначальных значений полям формы).
    submitКнопка для отправки формы.
    hiddenСкрытое поле (не отображается в форме).

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

    Предназначено для ввода текста одной строкой. Если текст не помещается в окне поля, то производится скроллинг.

    Атрибуты:

    type - принимает значение "text".

    MaxLenght - Определяет максимальное количество символов которое можно ввести в строку.

    Size - Определяет видимый размер поля.

    Ваш любимый месяц:
    Ваше любимое число:

    Ввод пароля

    При введении пароля на экране вместо символов вводимых пользователем выводится знак "*" (или другим символом, в зависимости от системы).

    type - принимает значение "password".

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

    Кнопки

    Для создания простой кнопки атрибуту type задаем значение "button". Простые кнопки создаются для того что бы разделить форму (если она большая) на несколько разделов с промежуточной проверкой введенных данных.


    Переключатели

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

    Кто Вы?
    Мужчина
    Женщина
    Не скажу

    Флажки

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

    Какими языками Вы владеете?
    Русский
    Английский
    Немецкий
    Французский

    Поле ввода файла

    Справа от поля ввода есть кнопка нажав на которую появится окно выбора файла (проводник) для загрузки.

    Выберете картинку.

    Скрытые поля

    Скрытые поля используют для передачи служебной информации (к примеру идентификатор пользователя в системе). Такие поля не выводятся на экран и пользователь их не видит, но они передаются обработчику. Полю присваивается тип "hidden" и в обязательном порядке задаются имя и значение, которые будут переданы обработчику.

    Списки выбора

    Списки дают возможность компактного размещения элементов формы. Для организации списка используется тег <select> который является контейнером в который помещаются элементы списка.

    Формат представления:

    <select name="Имя списка" size="1">

    <option value="Значение">Название элемента</option>

    ...

    </select>

    Атрибуты:

    name - Имя списка передаваемое обработчику.

    size - Размер списка. Если задать размер 1 то будет отображаться выпадающий список. Если размер больше 1 то будет выводится вертикальный список указанной размерности. Если элементов списка меньше - будут добавлены пустые строки. Если элементов списка больше чем размер списка то появляется вертикальная полоса прокрутки. Ширина списка устанавливается по ширине самого широкого элемента.

    multiple - Имеет единственное значение multiple (в IE-8 значение не обязательно). Если установлен атрибут то пользователь может выбрать несколько элементов списка. Необходимо после выбора первого элемента удерживать клавишу Ctrl и добавлять элементы.

    selected - Используется для тега option и указывает выбранный элемент по умолчанию.

    value - Используется для тега option и определяет значение передаваемое обработчику при выборе этого элемента.

    Выпадающий список. Вы проживаете:
    Список, количество элементов меньше чем размер.
    Список множественного выбора. У меня есть:

    Многострочные текстовые поля

    Для написания комментариев, сообщений или больших текстов используется тег <textarea>. Тег является контейнером, в который помещают выводимый в окне текст.

    Формат представления:

    <textarea атрибуты="значение атрибута">Текстовая информация</textarea>

    Атрибуты:

    cols - Ширина поля, количество видимых символов.

    rows - Высота поля, количество видимых строк.

    readonly - Запрещает изменять текст. Значения не требуется.

    warp - Определяет как будет осуществляться перенос текста в окне и в каком виде передавать на сервер.

    Значения атрибута warp:

    hard - При достижении границы окна автоматически происходит перенос слова на следующую строку. Передача на сервер осуществляется с такой же установкой переносов.

    soft - При достижении границы окна автоматически происходит перенос слова на следующую строку. При передаче на сервер перенос строк указывается только в тех местах где нажата клавиша "Enter".

    off - Перенос осуществляется только при нажатии клавиши "Enter". В окне есть горизонтальная полоса прокрутка для просмотра длинных строк.





    Язык и структура HTML...
    Служебная информация...
    Оформление материала...
    Скрипты...
    Единицы измерения...

    Категория: Изучаем html | Добавил: And64Kot (23-07-2010)
    Просмотров: 3032 | Теги: Атрибуты, Post, Get, тег FORM, Формат представления | Рейтинг: 0.0/0 |
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Поиск
    Курсы валют
    Курсы НБУ на сегодня
    Получи бонус WM

    Введи свой WMR кошелек

    Друзья
  • Херсон и херсонцы
  • Цветоводство
  • Все для веб-мастера
  • Программы для всех
  • Мир развлечений
  • Лучшие сайты Рунета
  • Кулинарные рецепты
  • Copyright MyCorp © 2017