Теги для создания форм. Часть №1

<form> - Обычно этот тег оборачивает элементы с которыми пользователь может взаимодействовать. Это могут быть поля для ввода текста, выпадающие списки, заголовки полей. Всех их мы разберем далее.


<form> имеет достаточно много атрибутов, мы разберем самые распространенные.


Элемент <form> интерактивный, при правильном его описании мы можем отправлять данные которые расположены внутри нее, на сервер.


<form></form>
<form action="https://some-server-url.com/send-email"
method="get"
target="_blank"
></form>

action - определяет ссылку на сервер куда будут отправляться данные из <form>.


method - определяет метод http с помощью которого будут отправляться данные.


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


Также есть еще много атрибутов у тега <form>, о них читайте в документации


P.S Больше уроков у меня на канале

Web-технологии

534 поста5.8K подписчиков

Правила сообщества

1. Не оскорблять других пользователей

2. Не пытаться продвигать свои услуги под видом тематических постов

3. Не заниматься рекламой

4. Никакой табличной верстки

5. Тег сообщества(не обязателен) pikaweb

Вы смотрите срез комментариев. Показать все
8
DELETED
Автор поста оценил этот комментарий
Комментарий удален. Причина: данный аккаунт был удалён
раскрыть ветку (23)
2
Автор поста оценил этот комментарий
Сделай все по-человечески, ну.

Вам же русским по белому написали:

P.S Больше уроков у меня на канале
раскрыть ветку (3)
2
DELETED
Автор поста оценил этот комментарий
Комментарий удален. Причина: данный аккаунт был удалён
раскрыть ветку (2)
1
Автор поста оценил этот комментарий

Ну, значит, вам же русским по белому написали:

Также есть еще много атрибутов у тега <form>, о них читайте в документации
Автор поста оценил этот комментарий

Бро, во-первых, чего ты агришься?

Далее.

Зашел на канал. Аж 2 урока по html.

Возможно было бы больше уроков по HTML на канале, если бы не ситуация в моей стране - Украине. Думаю тут можно отнестись с пониманием.


"Урок #1 - HTML теги"

Объясняю. Я не ставлю за цель, в своих уроках, которые я сам решаю как делать, объяснять все теги которые существуют, напротив, я ставлю за цель донести человеку суть того как вещи работают. Это нужно для того чтобы этот человек, в дальнейшем мог сам разобраться с похожими вещами.

Ты спросишь - Почему ?

Я отвечу -  хороший специалист, это тот который умеет сам разбираться в том как вещи работают, это тот которого нужно только подтолкнуть в правильном направлении и дальше он сможет открыть доку и прочитать то что нужно. Поэтому в материале и есть ссылки на документацию.


"Урок #2 - Атрибуты тегов HTML"
Повторюсь, эти уроки призваны объяснить разницу между атрибутами и функционалом,  а не объяснять все атрибуты в мире. Я ставлю себе за цель то чтобы человек понял как вещи работают, чтобы он потом мог полноценно сам работать, а не бегать к ментору или коллегам по любой фигне.

Может а атрибутами это звучит не совсем применимо, но логика у меня такая.


P.S. Если честно, я не ожидаю то что вы поймете мою точку зрения, я в любом случае пытаюсь делать свое дело как можно лучше. И если есть адыкватные замечания, то я, с удовольствием, их прочтку и внесу корректировки.


В дальнейшем у меня на канале будут видосы и по формам там буду рассказывать более подробно, так как материал уже записан - но еще не смонтирован.

1
Автор поста оценил этот комментарий
Чтобы скопом отправить все поля внутри тега на сервер.

Не все, а только те, у которых name указан.

1
Автор поста оценил этот комментарий
Нельзя было рассказать, что есть get, есть post

А ещё put и delete и почему браузеры не поддерживают эти методы в method. Потом можно вкратце пробежаться по REST, а там уже и до ООП недалеко.

раскрыть ветку (16)
3
DELETED
Автор поста оценил этот комментарий
Комментарий удален. Причина: данный аккаунт был удалён
раскрыть ветку (15)
1
Автор поста оценил этот комментарий

Я вот пару лет на вэб галерах прогрёб, и прочитав эти уроки вообще нихуя не понял. Не представляю, как новички должны в этом разбираться.


Подать информацию структурировано неподготовленному неофиту это тот ещё квест, а если еще показывать только часть технологии (html без css) то вопрос «нахуя так сложно» новичка никогда не покинет.

раскрыть ветку (14)
Автор поста оценил этот комментарий

Я даже хз что сказать, я уже лет 6-7 работаю, в разных компаниях и в крупных и в мелких и в студиях и продуктовых компаниях. Также уже более года занимаюсь менторством и обучением специалистов и всем все понятно, без каких либо проблем, процентов 80 находят работу и тд.

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

раскрыть ветку (2)
Автор поста оценил этот комментарий
некоторые вещи на определенном этапе развития нужно просто запомнить

Бред. Объяснять всё нужно в комплексе постепенно расширяя объём необходимых знаний.


В идеале б ещё тренировочные примеры и песочницу давать.

Иллюстрация к комментарию
раскрыть ветку (1)
0
Автор поста оценил этот комментарий

Это действительно бред, ведь человек который только начинает изучать HTML и верстку в целом, конечно-же сможет понять что такое методы http и сразу разобраться как они работают и зачем нужны. А дальше можно уже и про клиент-сервер рассказать.

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

Бред это объяснять не отдельную тема, а перемешать все в кучу, чтобы никто ничего не понял.

Автор поста оценил этот комментарий

Как раз и надо давать html без css, а то они потом вырастают и думаю что html это для того чтобы его с помощью css застилить. И в итоге абсолютно не умеют верстать, и только тупо воспроизводят макет с помощью html+css.

раскрыть ветку (10)
1
Автор поста оценил этот комментарий
а то они потом вырастают и думаю что html это для того чтобы его с помощью css застилить

Ага, а потом вырастают и думают, что существуют только блочные и строчные элементы.

0
Автор поста оценил этот комментарий

Ну да, а когда они нечто подобное в devtools увидят, как им чисто html поможет?

Иллюстрация к комментарию
раскрыть ветку (8)
0
Автор поста оценил этот комментарий

А при чем тут css?

И в целом флатер это не про классическую верстку. Очень печально что подавляющая часть фронтэндеров не понимает что такое верстка и для чего нужен html.
раскрыть ветку (7)
1
Автор поста оценил этот комментарий
Очень печально что подавляющая часть фронтэндеров не понимает что такое верстка и для чего нужен html.

А что там понимать? Машинам показать структуру документа, кожаным мешкам - интерфейс.

раскрыть ветку (5)
1
Автор поста оценил этот комментарий

Машинам показать структуру документа

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

раскрыть ветку (4)
0
Автор поста оценил этот комментарий
Соответствует макету? Все ок.

Всё верно. Если семантика не указана в ТЗ, то нафига заморачиваться?

раскрыть ветку (3)
0
Автор поста оценил этот комментарий

Тогда это не верстка. Это говномакет на html, потому что это невозможно будет интегрировать. Несемантичную верстку крайне тяжело использовать в жизни, для чего-то кроме показа того, что она у нас есть.

раскрыть ветку (2)
Автор поста оценил этот комментарий
И в целом флатер это не про классическую верстку.

Что в вашем понимании «классическая вёрстка»?

Автор поста оценил этот комментарий

Вы действительно думаете что новичку, который только начал изучать HTML будет понятно читать о http методах ?

Плюс, в чем смысл рассказывать про <form> в отдельности? Расскажи немного о полях какие-то там могут быть. Про submit-кнопку, которая отправляет форму. Приведи пример готовой формы.

В следующих материала, которые уже подготовлены, есть ссылки на файлы с примерами и тд.

Интересно большой ли смысл есть выкладывать ссылку на codePen если там будет 2 строчки кода тега <form>, мне показалось что смысла особо нет поэтому ссылочку и не приложил.

Вы смотрите срез комментариев. Чтобы написать комментарий, перейдите к общему списку