Отказ от ответственности:
Профессионалов сразу прошу выкрутить на минимум внутреннего "дотошку", текст тестировался на нескольких очень начинающих и они сказали, что им так понятнее. Т.е. про различия протоколов, DNS и вообще всё остальное пока забыли.
Предыстория:
История началась с того, что одна знакомая чика попросила меня объяснить логику работы «формы», т.е. элемента <form> из HTML (не смейтесь, ей было нужно именно это, я вообще-то женат). Она начала изучать JavaScript и сопутствующие технологии на моём любимом freecodecamp. Сами по себе формы - это, вроде бы, просто. Но в процессе разговора я понял, что её проблема в том, что она пока не понимает зачем вообще что-то куда-то отправлять. Это тот уровень, когда человек ещё не до конца разделил в голове фронт и бэк. Исходя из этого я решил написать очень краткое разъяснение, на пальцах.
Сабж:
Любой сайт состоит из клиента (это ещё называют «фронтенд») и сервера («бэкенд»). Клиент — это наш браузер, по сути обычная компьютерная программа. Сервер — это компьютер где-то в интернете с другой программой, которая умеет отвечать на запросы по сети. Запросы и ответы по сети — это просто электрические сигналы в определённом формате по проводам от одного компьютера до другого. Часто используется протокол HTTP — это текстовый формат. Для простоты можно пока считать, что компьютеры общаются посредством текстовых сообщений, типа телеграфной связи или sms или мессенджера. Процесс выглядит примерно так. Мы вбиваем в строку браузера адрес. Адрес — это адрес сервера в интернете. Браузер отправляет по этому адресу текст с сообщением. Например, это просто пустое сообщение. Сервер получает это сообщение и реагирует так, как запрограммирован реагировать. Например, сервер запрограммирован так, что когда на него приходит пустое сообщение, он в ответ посылает тоже текст. Например, такой: «<html><body><h1>Hello!</h1></body></html>». Это сообщение браузер и получает в ответ на свой запрос. И тоже делает с ним то, что запрограммирован делать. Ведь браузер и сервер — это просто компьютерные программы. Например, браузер, видя, что ответ — это текст в формате HTML, разбирает его согласно правилам, заданным в стандарте HTML и отображает в своём окне. (Т.е. HTML — это текст, полученный с сервера, который исполняется в браузере, т.е. на клиенте). Так вот, возвращаясь к формам— форма, это такой HTML-тег. Браузер, разбирая HTML, видит тег <form>, а внутри него теги <input> типа text и <input> типа submit, и рисует в своём окне вместо них поле для ввода текста и кнопку. Теперь, когда пользователь ввёдет в поле ввода что-нибудь и нажмёт кнопку, браузер отправит текст из поля ввода на сервер (на самом деле, если полей ввода больше, он отправит данные из всех полей ввода, что находятся внутри этой формы, т.е. между тегами <form> и </form>). Для чего это нужно? Для того, чтобы клиент и сервер могли общаться между собой. Т.е. процесс обмена сообщениями такой:
1) Пользователь вводит в адресную строку браузера (или кликает по ссылке) — браузер отправляет серверу пустое сообщение (на самом деле не совсем пустое, но это пока неважно).
2) Сервер получает сообщение и в ответ отдаёт в виде строки текста HTML страничку.
3) Браузер получает сообщение с текстом и понимает, что это не просто текст, а разметка HTML. Разбирая её, он вместо тегов <form>, <input>, <button> и т.д. рисует у себя в окне некий интерфейс для пользователя — поля ввода, кнопки, ползунки, радио-переключатели и т.д.
4) Пользователь вводит какие-то данные в поля ввода, например, логин и пароль и нажимает на кнопку submit. Браузер собирает данные из всех полей ввода (поля ввода могу быть на самом деле разными — для текста, для пароля, для чисел, ползунки, переключатели и т.д.) в пределах этой формы и отправляет их на сервер.
5) Сервер, получив эти данные, что-то с ними делает. Например, сохраняет их в своей базе данных. Т.е. важно, что эти данные сохраняются (в базе, в файле, да хоть где — не важно) на компьютере, который является сервером.
6) В следующий раз, когда пользователь захочет войти на сайт, сервер сможет отправить ему форму с полями ввода для авторизации, пользователь введёт логин и пароль, отправит это на сервер. Т.е. повторится тот же самый процесс, что описан выше. Сервер проверит, что такой пользователь с таким паролем у него в базе сохранён и выдаст ему какой-то контент, который, например, не доступен неавторизованным пользователям.
Как-то так. Т.е. форма — это тег, который позволяет нарисовать на страничке интерактивную форму, с помощью которой можно отправить что-то на сервер (даже файл, картинку аватарки, например, которая сохранится на сервере и сервер сможет отдавать эту картинку). И да, собственно JavaScript на этом этапе не нужен и не задействован. Всё делается средствами HTML.
Ответ на вопрос:
— Если я использую тэги input вне формы, они будут просто текстом?
— Нет, они по прежнему будут полями ввода, но ты не сможешь отправить данные из них на сервер с использованием только возможностей HTML. Но, на самом деле, ты всё равно сможешь сделать это при помощи JavaScript (JS). Вообще, ты можешь делать со страницей почти всё, что захочешь с помощью JS — получить данные из поля ввода без тега <form>, преобразовать их в любой формат, отправить их на другой сервер или отобразить их прямо на этой же странице в обратном порядке, покрасить их в розовый цвет или же ты можешь взять текст вообще не из формы ввода, а из любого места на странице. Но хорошей практикой считается использование JS для расширения возможностей HTML. Т.е. если ты можешь отправить данные с помощью HTML — делай это с помощью HTML (гори в аду, JSX!). Если же тебе нужно сделать что-то, чего HTML не может — тогда используй JS. То же самое с CSS. Если возможно, стилизуй страницу только с помощью CSS. Если же тебе нужно что-то, чего CSS не может — сделай это с помощью JS.