HTML для начинающих. Урок 16. Формы простые

Автор Lyudmila Yeriomenko
HTML для начинающих. Урок 16. Формы простые

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

Открыл и закрыл его и также м добавил сюда атрибут Action attribute Action указывает. Какой файл будет обрабатывать форму. На данном этапе пока мы с вами не занимаемся обработкой формы я могу этот атрибут удалить пока он мне абсолютно не нужен доля.

Давайте создадим поле для ввода большое поле для ввода текста для отправки формы для того чтобы создать поле для ввода используется тег Input Tag Input вообще универсальный как он используется как для поля для ввода.

Так и для чего бокса и для радиокнопки CSS Input. Это ты который символизирует. Вот Но, а какой. Вот — это будет в виде поле для текста или checkbox. А за — это отвечает от Type attribute Type по умолчанию указан как текст и мы получаем текстовое поле для ввода дали. Давайте создадим большое поле для ввода большого текста в виде комментария создается с помощью тега textarea DMX заполнил за меня все необходимые атрибуты. А — это имя — это количество колонок и рядов Tag textarea имеют открывающий и закрывающий. Тег Вот так — это выглядит вот мы видим сами тексты я вот мы видим Tag Input. Теперь давайте создадим кнопку кнопка создается с помощью тега также Input. Без обид либо с помощью тега Button поступлю первым способом напишу Tag Input только значение то я покажу сабмит к слову кнопка созданная через будет автоматически отправлять форму отправлять форму на обработку отправлять её. Данные есть произойдет отправка формы в данном случае у меня не указан атрибут Action. Я вообще удалил его и форма отправляется и. Она передает эти данные на эту же страницу поэтому мы видим перезагрузку данной странице вот таким образом ещё кнопку можно создать через kik батан батан имеет открывающий и закрывающий тег внутренний текст кнопки — это может быть отправить или ещё что-то сам по себе он приседал направляюсь форму либо можно принудительно указать той прогноз чтобы также производилась отправка. Ну и сам по себе он тоже выполняет отправку формы. О'кей я становлюсь варианте с Input Type submit. Давайте разберем эти теги немного поподробнее выровняем всё — это в некую форму чтобы — это всё красиво выглядела давайте начнем с того Input во-первых я поставлю brakelight для того чтобы следующий текст. Ария приходил на следующую строку либо я могу вообще поместить его в. ТПП даст не уступает сверху снизу вообще-то в разметке до по-хорошему то есть уже нормально верстки сайтов у нас будет класс по которому мы тупой либо будет Def обёртка, но пока этого нет я буду использовать просто TP для того чтобы задать отступы дали Input мы можем задать такое атрибут как placeholder attribute placeholder будет содержать начальное значение этого тега. Ну например — это поле предназначено для ввода имени я напишу введите имя то есть этот текст который отображается как подсказка когда я ставлю курсор мы еще увидим этот текст, но как только я начинаю набирать этот текст сразу же пропадает — это placeholder есть ещё такое атрибут. Как value слово. Когда у вас очень много атрибутов особенно часто — это делают в таких играх формами. Вы можете переносить их вот таким образом давайте так всю всю эту значение. То есть когда я ввожу сюда какое-то значение например. Юрий Это говорит о том, что я у. Люды Гринвуд. Но я могу также задать какой-то целью изначально такое бывает необходимо очень редко. То есть когда вы прямо создаёте форму с уже записанными значениями, но тем не менее такая ситуация может возникнуть, тогда вы просто прописывать и всю и даёте базовое значение. Давайте изменю например вот так если я удалю отсюда я увижу Place вот таким образом — это работает моделью можно не указывать если вы ожидаете, что его укажут пользователь вот здесь. Дарья наверняка замечали некие лейблы ярлыки названия для полей названия для поля обычно размещается выше него либо слева. Давайте напишем здесь имя имя пользователя — это у нас был название для этого поле название можно связать с полем с помощью специального. Тайга лейбл и с помощью — это один из вариантов выглядит. Таким образом мы пишем так лейбл выебал — это ярлык. Ну или грубо говоря название для какого-то элемента формы я помещаю название этого элемента поля так далее я могу связать такой был с этим инпутом связывается он следующим образом в. Тагиле был есть атрибут for и в него мы должны указать имя — это нашего поля. То есть у инпута я создам атрибут — это идентификатор идентификатор — это уникальное название страницы то есть. Есть правила по созданию модификаторов. Вы можете создавать идентификатор для, но он должен быть уникальным то есть вот здесь я напишу на примерный теперь на странице я не могу создавать 2 идентификатор с именем я могу — это прописать вот здесь. Но — это будет являться критической ошибкой потому, что идентификатор весь смысл идентификатора в том, что он уникален и он обозначает какой-то вот поэтому он идентификаторы мы не повторяем то здесь я могу тоже создать идентификатор, но он будет другим например коммент комментарий beginpath я создал идентификатор. Теперь я могу связать лейбл с этим с этим он потом по идентификатору то есть вот здесь и днём и здесь я пишу формой как мы увидим, что они связались. Теперь я могу кликнуть по имя пользователя и мы видим курсор у меня.

0 комментариев
0

Читайте также