Найти тему

Как создать HTML-форму для сайта? (Ввод текста) Подробный разбор.

Оглавление
Изображение Pexels с сайта Pixabay
Изображение Pexels с сайта Pixabay

Без html-форм не обойтись в тех случаях когда необходимо собрать какую-либо информацию от посетителей Вашего сайта. Существуют различные виды элементов форм: ввод текста, выбор вариантов, отправка форм на сервер и загрузка файлов на сайт. Рассмотрим первый вид более подробно (остальные будут рассмотрены в последующих статьях).

Ввод текста

Поле ввода текста

Все что имеет отношение к элементам формы помещается между тегами <form> и </form>. В открывающем теге <form> обязательно прописывается атрибут action, значением которого будет являться URL-адрес страницы-получателя введенных данных при отправке формы на сервер.

В поле ввода текста пользователь сможет без труда ввести свое имя. Пример:

То что вводим
То что вводим
То что получаем
То что получаем

Тег input позволяет создавать компоненты формы нескольких типов, в то время как значение атрибута type указывает этот тип (в данном случае это "text"). Значение атрибута name идентифицирует элемент формы и отправляется на сервер вместе с введенными данными. Два последних тега (size и maxlength) позволяют задать ширину поля и максимальное количество вводимых символов.

Поле ввода пароля

То что вводим
То что вводим
То что получаем
То что получаем

Этот элемент формы отличается от предыдущего лишь тем, что здесь атрибутам type и name присваивается одно и тоже значение password.

Текстовая область

С текстовой областью еще проще:

То что получаем
То что получаем

То что получаем
То что получаем

Здесь мы встречаем новый тег <textarea>, который используется для создания многострочных областей ввода текста. Атрибуты cols и rows используются для задания ширины и высоты текстовой области.

Спасибо за внимание!

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

P.S. Если возникли трудности пишите в комментариях или в сообщениях канала. Отвечу на все и всем)