Всем привет! Как и обещал, в этом уроке постараюсь познакомить вас с формами html. При пользовании интернетом наиболее частая операция которую мы осуществляем - это, конечно, клики по ссылкам, для того чтобы перейти с какой-то одной странички на другую. Но существует еще одна операция, которую мы каждый день проделываем - это ввод каких-либо данных на сайте и отправка их на сервер. То, куда мы вводим наши данные, называются формами. Формы могут использоваться для авторизации на сайте, ввод какой-то персональной информации: имя, адрес, номер кредитной карты и т. д., задание каких-то параметров фильтрации содержимого, поиск по сайту, загрузки файлов и еще каких-либо действий. Сегодня мы рассмотрим некое введение в формы, то как их стоит правильно создавать, как с ними обращаться, и поймем основной принцип их работы. Итак, я добавил формы ввода имени и пароля + кнопку отправки данных на сервер в код нашего сайта-портфолио из предыдущего урока.
Разберем каждый тег и атрибут в данном фрагменте кода:
- <form> - тег формы
- action - атрибут, значением которого является имя файла на стороне сервера, который будет обрабатывать данные с формы
- method - атрибут который сообщает серверу о методе запроса; данный атрибут необязательный, т.к. если не укажите метод, то по умолчанию будет использоваться get
есть два варианта метода запроса:
post - данные передаются скрытым образом
get - данные передаются в адресной строке
- <input> - тег поля формы
- type - тип поля
в html4 используется два типа полей: текстовое поле и поле для пароля, они отличаются тем, что в поле пароля отображаются звездочки вместо букв и цифр; в html5 появилось большое количество различных типов: email, телефон, дата и т. д.
- name - имя поля; по этому имени на сервере можно будет обращаться к данному полю
- id - атрибут с помощью которого можно будет обращаться из javascript; в нашем случае можно обойтись и без него
- submit - кнопка для отправки данных формы на сервер
- атрибут value использовал, чтобы назвать нашу кнопку "Войти"; по умолчанию в браузере Chrome эта кнопка называется "Отправить", в Firefox - "Отправить запрос", также ради примера value я использовал как подсказку для полей ввода имени и пароля, на некоторых сайтах до сих пор так делают, но данный метод был актуален для html4, в html5 используют атрибут placeholder
Из кода убрал не нужные на данный момент id и name, а также добавил кнопку сброса reset и с помощью value поменял дефолтное "Сбросить" на "Сброс".
В этом уроке мы рассмотрели самые часто встречающиеся элементы - это текстовое поле и кнопки для отправки/сброса данных. В арсенале html по работе с формами существуют еще такие элементы, которые наверняка вы встречали - это переключатели, флажки, выпадающие списки и поля для ввода файлов, их мы рассмотрим на следующем уроке.
Подписывайтесь на канал, пишите комментарии и ставьте лайки. До скорого..