0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

HTML Формы

HTML Формы

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

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

Пример: Простая HTML-форма

  • Результат
  • HTML-код
  • Попробуй сам »

Моя первая форма:
Имя:
Фамилия:

Отправка данных формы через AJAX

Когда пользователь отправляет форму, браузер переходит от текущей страницы и отображает текст ответного сообщения. Это нормально, когда ответ является HTML-страницей. Однако в веб-API текст ответа обычно либо пуст, либо содержит структурированные данные, такие как JSON. В этом случае имеет смысл отправить данные формы с помощью запроса AJAX, чтобы страница могла обработать ответ.

Статья в тему:  Скачать вк на нокиа люмия 640. Вконтакте

В следующем коде показано, как отправлять данные формы с помощью jQuery.

Функция отправки jQuery заменяет действие формы новой функцией. Это переопределяет поведение по умолчанию кнопки Отправить. Функция Serialize сериализует данные формы в пары «имя-значение». Чтобы отправить данные формы на сервер, вызовите $.post() .

По завершении запроса обработчик .success() или .error() отображает соответствующее сообщение пользователю.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector