HTML формы можно использовать для отсылки данных через Интернет и часто используются для организации обратной связи с пользователями.
Сами по себе формы совершенно бесполезны. Они должны быть всегда связаны с программами или скриптами, которые будут обрабатывать введенные пользователем данные. Однако этот вопрос лежит за пределами темы данного учебника.
Основные теги, используемые для создания HTML форм, — это тег <form>, тег <input>, тег <textarea>, тег <select> и тег <option>.
Тег <form> создает форму. Он требует наличия одного обязательного атрибута – action. В этом атрибуте указывается адрес, по которому форма будет отсылать свои данные после того, как пользователь отдаст команду «отправить».
Необязательный атрибут method указывает на то, каким образом должны отсылаться данные формы.
Он может принимать два значения – get (значение по умолчанию) и post. При последнем значении данные во время отсылки скрываются (при значении get данные формы прикрепляются к URL).
Таким образом, элемент формы будет иметь приблизительно следующий вид:
Тег <input> – это основа всего мира форм. Он может быть десяти видов:
<input type=»text» /> — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
<input type=»password» /> — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
<input type=»checkbox» /> — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате <input type=»checkbox» checked=»checked» /> и который задает начальное состояние флажка «включен».
<input type=»radio» /> — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
<input type=»file» /> — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
<input type=»submit» /> — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, <input type=»submit» value=»Ого. Надпись на кнопке» />.
<input type=»image» /> — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге <img>.
<input type=»button» /> — создает кнопку, которая без дополнительного кода ничего не будет делать.
<input type=»reset» /> — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
<input type=»hidden» /> — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.
Обратите внимание, что тег <input> закрывает сам себя при помощи конструкции «/>».
Тег <textarea> – создает многострочную область ввода текста. Он требует использование атрибутов rows и cols, которые задают размер области ввода:
<textarea rows="5" cols="20">Здесь вводят много текстовой информации</textarea>
Тег <select> и тег <option> используются для создания разворачивающего или выпадающего меню. Они работают следующим образом:
Все упомянутые выше теги будут корректно отображаться на веб-странице, однако если попытаться обработать соответствующей программой, то ничего не получится.
Это произойдет, потому что всем полям формы необходимо присвоить имена. Имена присваиваются при помощи атрибута name, который необходимо добавить каждому полю формы. Например,
<input type="text" name="talkingsponge" />
Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега <form>, и который обрабатывает передаваемые данные.)
Для начала этой информации будет вполне достаточно. Позднее вы узнаете, как создавать формы с более широкими возможностями.
Структура HTML документа
Хотя основа документа HTML – простой текст, чтобы создать настоящий HTML документ, необходимо кое-что еще. А именно задать структуру документа HTML.
Структура документа HTML состоит из тегов, которые окружают содержимое и придают ему определенное техническое значение.
Измените свой документ следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
Это моя первая веб-страница
</body>
</html>
Теперь сохраните документ, вернитесь в браузер и выберите команду «Обновить» (это перезагрузит вашу веб-страницу).
Внешний вид страницы никак не изменился. Однако предназначение HTML – определение значения для содержимого, а не внешнего представления, и данный пример показал нам несколько фундаментальных элементов веб-страницы, задающих базовую структуру документа HTML.
Первая строка, начинающаяся с «<!DOCTYPE…» говорит браузеру, что вы знаете, что делаете. Возможно в данный момент вы в действительности не представляете, что вы делаете, однако данная команда важна и стоит ее всегда писать. Если этого не сделать, то браузеры переключатся в режим «обратной совместимости» и будут действовать весьма своеобразным образом. Сейчас не стоит особенно беспокоиться об этой команде и ее значимости для структуры документа HTML. Подробнее о типах документов вы узнаете несколько позже. А пока просто запомните, что эту команду следует включать в начало любой веб-страницы.
Вернемся к нашему примеру. Следующая команда в структуре документа HTML, команда <html>, — открывающий тег, который прекращает все недомолвки и прямо говорит браузеру, что все, что между ним и закрывающим тегом </html>, является HTML документом. Все что находится между <body> и </body> является основным содержимым веб-страницы и выводится в окне браузера.
Закрывающие теги
Теги </body> и </html> закрывают соответствующие открывающие теги. Все теги в структуре документа HTML 4.01 (XHTML) должны быть закрыты. Хотя более ранние стандарты прохладно смотрели на то, что некоторые теги оставались открытыми, новые стандарты языка требуют, чтобы абсолютно все теги были закрыты. В любом случае следование этому правилу будет хорошей привычкой.
Не у всех тегов есть соответствующие закрывающие теги (вроде <html></html>). Некоторые теги, которые не заключают в себе контент, закрывают сами себя. Например, тег разрыва строки выглядит следующим образом: <br />. Мы вернемся к этому примеру позднее. Все что нужно запомнить, это то, что все теги в структуре документа HTML должны быть закрыты, и большинство из них (те которые содержат какой-нибудь контент) имеют следующую форму: открывающий тег → контент → закрывающий тег.
Атрибуты
У тегов также могут быть атрибуты.
Атрибуты – это определенная дополнительная информация. Атрибуты определяются в открывающем теге, а их значения всегда заключаются в кавычки. Все это выглядит следующим образом:
<тег атрибут="значение">контент</тег>
Подробнее о тегах с атрибутами мы поговорим немного позже.
Элементы
Предназначение тегов – обозначать начало и конец элемента структуры документа HTML. Элементы же это кирпичики, из которых складывается веб-страница. Так, например, все что находится между тегами <body> и </body>, включая сами эти теги, является элементом body.
Учебник по изучению HTML — javatpoint
следующий →
Учебное пособие по HTML Учебное пособие по или HTML 5 содержит базовые и расширенные концепции HTML. Наш учебник HTML разработан для начинающих и профессионалов. В нашем учебнике каждая тема дана шаг за шагом, так что вы можете изучить ее очень легко.
Если вы новичок в изучении HTML, вы можете изучить HTML от базового до профессионального уровня, а после изучения HTML с помощью CSS и JavaScript вы сможете создать свой собственный интерактивный и динамичный веб-сайт. Но сейчас в этом уроке мы сосредоточимся только на HTML.
Основные моменты HTML приведены ниже:
HTML означает язык гипертекстовой разметки.
HTML используется для создания веб-страниц и веб-приложений.
HTML широко используется в Интернете.
Мы можем создать статический веб-сайт только с помощью HTML.
Технически HTML — это язык разметки, а не язык программирования.
Пример HTML с редактором HTML
В этом руководстве вы найдете множество примеров HTML, по крайней мере, один пример для каждой темы с объяснением. Вы также можете редактировать и запускать эти примеры с помощью нашего онлайн-редактора HTML. Изучение HTML — это весело, и его очень легко выучить.
<голова>
Название веб-страницы <тело>
Напишите свой первый заголовок
Напишите свой первый абзац.
Протестируйте сейчас
Индекс HTML
Учебник HTML
Введение в HTML
Что такое HTML
тегов HTML
Форматирование HTML
HTML-заголовок
HTML-абзац
Якорь HTML
HTML-изображение
Таблица HTML
HTML-списки
Нумерованный список HTML
Ненумерованный список HTML
Список HTML-описаний
HTML-форма
HTML-классы
Идентификатор HTML
HTML-фреймы
HTML JavaScript
Путь к файлу HTML
HTML-заголовок
Макет HTML
Адаптивный HTML
Компьютерный код HTML
HTML-сущности
HTML-символы
Кодировка HTML
Код HTML-адреса
Теги HTML
Выделение HTML
Текстовое поле HTML
HTML-кавычки
Стиль HTML
Заголовок HTML
HTML-ДОКТИП
HTML-тег Div
Предварительный тег HTML
Тег кода HTML
Тег метки HTML
Тег ввода HTML
Тег кнопки HTML
Тег HTML HR
Тег HTML BR
Тег HTML-скрипта
HTML-тег NoScript
Тег HTML b
Учебник HTML5
Учебник HTML5
Руководство пользователя HTML5
Теги HTML 5
HTML-аудио
HTML-видео
HTML-прогресс
HTML-метр
HTML-тег данных
HTML-тег списка данных
Тег заголовка HTML
HTML-тег нижнего колонтитула
HTML-тег рисунка
Тег HTML Figcaption
HTML-тег статьи
Отступающий HTML-тег
HTML-тег диалога
HTML-тег сведений
Сводный тег HTML
Тег раздела HTML
Метка времени HTML
Основной тег HTML
HTML тег WBR
Холст HTML
HTML SVG
Перетаскивание HTML
HTML Карты Google
Семантика HTML5
Миграция HTML5
Имена цветов HTML
Имена цветов HTML
Вопросы для интервью
HTML вопросы для интервью
Теги HTML 5
В этом уроке мы изучим теги HTML 5, такие как тег аудио, тег видео, тег холста, HTML svg, геолокация HTML, перетаскивание HTML и т. д.
Все теги HTML
Наконец, мы изучим все HTML-теги один за другим, например, тег marquee, тег textarea, тег br, тег hr, тег pre, тег h, тег code, тег ввода, тег title, метатег, тег script, стиль тег и т. д.
Обязательное условие
Прежде чем изучать HTML, вы должны иметь базовые знания по основам работы с компьютером.
Аудитория
Наш учебник по HTML разработан, чтобы помочь как новичкам, так и профессионалам.
Проблема
Уверяем вас, что вы не найдете никаких проблем в HTML учебнике. Но если вы обнаружите какую-либо проблему или ошибку в нашем руководстве по HTML, вы можете сообщить нам об этом.
Следующая темаЧто такое HTML
следующий →
Learn HTML — Учебники по HTML для начинающих
60%
ВЫКЛ
PRO РАСПРОДАЖА — Получите скидку 60% на Programiz PRO в течение ограниченного времени. Получите скидку
Указатель страниц
Введение
Основы HTML
Встроенные элементы
Головные элементы
HTML-форма
Семантический HTML
HTML, CSS и JS
Графика и мультимедиа
О HTML
Зачем изучать HTML?
Как выучить HTML?
Введение в HTML
Что такое HTML?
Основы HTML
Основы веб-дизайна
Основы HTML
Абзацы HTML
Заголовки HTML
HTML-комментарии
Таблица HTML
Список HTML
Ненумерованный список HTML
Нумерованный список HTML
Список HTML-описаний
Разрыв строки HTML
Предварительный тег HTML
Горизонтальная линия HTML
Встроенный HTML
Блок HTML и встроенные элементы
HTML-ссылки
HTML-изображения
HTML Полужирный
HTML Курсив
Верхний и нижний индекс HTML
Форматирование HTML
Заголовок HTML
Заголовок HTML
Заголовок HTML
Стиль HTML
Метаэлементы HTML
HTML Фавикон
HTML-форма
HTML-форма
Ввод HTML-формы
Отправить HTML
Действие HTML-формы
Семантический HTML
Семантический HTML
Тег HTML
Тег HTML
Тег HTML
Тег HTML
HTML-тег
Теги HTML и
Доступность HTML
HTML, CSS и JavaScript
Класс HTML
Идентификатор HTML
Макет HTML
Адаптивный HTML-дизайн
HTML и JavaScript
HTML-графика и мультимедиа
HTML-видео
HTML Аудио
HTML SVG
Холст HTML
HTML Разное
HTML-фреймы
HTML-сущности
HTML-котировки
Пути к файлам HTML
HTML-эмоджи
HTML-символы и коды символов
О HTML
HTML — это стандартный язык разметки для создания структуры веб-страниц.
Содержимое HTML (абзацы, списки, изображения, ссылки и т. д.) может отображаться в веб-браузерах в структурированном виде.
HTML описывает структуру, но не внешний вид и функциональность. CSS используется для добавления внешнего вида (цвета, макета, размера и т. д.) к веб-страницам, а JavaScript используется для добавления функциональности.
HTML5 — это последняя и основная версия HTML.
Зачем изучать HTML?
HTML — это основа для создания веб-страниц. Изучение HTML помогает нам понять основы Интернета.
HTML является отправной точкой для многих веб-разработчиков.
Изучение HTML поможет вам продвинуться по карьерной лестнице. HTML может быть полезен маркетологам, авторам контента, продавцам, основателям и т. д.
Как выучить HTML?
Учебники Programiz по HTML — шаг за шагом узнайте все, что вам нужно знать о HTML5.
Документация Mozilla — углубленное изучение современного HTML (может быть немного сложно понять).
Позднее вы узнаете, как создавать формы с более широкими возможностями.
