🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: N/A
No summary available.
00:00
Итак шаблон у нас с вами есть вот так вот он отображается в браузере и сегодня наша цель - создать форму внутри этого шаблона форму мы будем создавать с вами по-разному и сперва Давайте научимся делать её на чистом HTML Для этого нам понадобится одноимённый тег form
00:17
печатаете Вот его название нажимаете Tab И вот он автоматически закроется Давайте уберём вот этот атрибут Action он пока нам не понадобится и внутри формы мы должны описать её поля самый базовое тип поле - это текстовый для того чтобы его
00:34
создать вы пишите Input нажимаете Tab И почем автоматически заполнит тип этого поля смотрите он подставит текст обновляем страничку и вот видим это поле здесь мы можем продублировать эту строчку и указать здесь другой тип поля
00:51
Ну например я нажимаю здесь ctr пробел вот мне на выбор выскакивают все доступные варианты и мы можем например взять соответственно у нас появится новое поле для ввода числовых значений то есть
01:06
текст здесь уже не получится вводить в отличие от этого поля вот здесь доступны только числовые значения этих типов полей Как я уже сказал достаточно много Вы можете поэкспериментировать с ними отдельно И я также в этом уроке расскажу
01:22
Где взять информацию об этих типах полей теперь что касается отображения смотрите мы не знаем В какое поле Као нужно вводить поэтому принято также отображать перед полем то есть пометку поля информацию о том что или какой именно
01:38
тип информации нужно вводить в этом поле Итак это тоже г вот я написал нажимаю Tab И вот он автоматически у меня закрывается смотрите у него есть атрибут for в котором нужно указать айдини поле ввода Для этого нам нужно его с вами
01:56
придумать Итак смотрите мы пишем ID вот меня уже высвечивает этот вариант я могу нажать Enter и у меня автоматически подставит вот эти значения Итак давайте мы здесь будем заполнять информацию об имени соответственно ID я дам name
02:14
ID и вот это значение дишни я дублирую сюда в Label если мы обновим страничку то ничего не изменится для того чтобы вот эта текстовая информация в Леле появилась вы должны будете Вот здесь между открывающимся и закрывающим тегом
02:30
написать текст в нашем случае это будет имя и Давайте двоеточие поставим обновляем страничку и вот мы видим лел появился перед нашим первым полем ввода давайте мы второе поле вода заменим тоже на текстовое с копируем вот эту
02:47
строчку здесь у нас будет вводиться фамилия соответственно дишни нам нужно проставить для этого полевода Давайте напишем surname ID стоит учитывать что айдини - это уникальные название То есть вы не можете
03:04
иметь два элемента с одинаковым айдини ком видите по черма будет автоматически это подчёркивать Итак значит этот Л У нас для фамилии идёт Давайте обновим страничку и вот видим результат имя фамилия чтобы эти поля ввода у нас
03:21
отображались каждой с новой строчки Мы можем поставить в любом месте после вот этого инпута есть я пишу нажимаю Tab вот он автоматически в значке больше-меньше заключается и у нас происходит с вами перенос на новую
03:37
строчку Можем даже ещё один бр поставить чтобы они так не находились близко друг к другу ну и нам остаётся с вами добавить поле для написания отзыва но отзыв Как вы понимаете может занимать достаточно большой объём поэтому есть
03:52
специальный тег который называется Text Area вот я его напечатал нажимаем с вами сразу Tab нам подставили атрибуты шник давайте мы с вами назовём фидбек и добавим в конце ID Значит нам
04:08
понадобится с вами л Давайте сразу с бром скопи Итак здесь у нас будет отзыв связываться он будет Вот с этим ашнико обновляем страничку и вот получается у нас с вами такое отображение вот на поле текст вы конечно
04:24
же можете влиять вот уменьшать количество рядов и колонок Давайте поставим пять рядов и вот она станет гораздо меньше и нам осталось конечно же добавить кнопку для отправки данных ну здесь всё просто мы создаём тег
04:39
Button нажимаем Tab Это парный тег он сразу смотрите закрывается и здесь мы пишем текст отправить обновляем страничку вот кнопка у нас появляется Давайте перенесём её на новую
04:56
строчку Итак мы вводим здесь значение нажимаем отправить и страничка у нас обновляется значения пропадают и смотрите немножко изменился у нас сам Ro и Теперь смотрите самое главное За каждым полем ввода должно быть
05:12
закреплено своё имя и это имя мы будем с вами потом отлавливать для каждого поля ввода на сервере имена очень просто задаются также смотрите внутри тега Input мы отступаем пишем или выбираем вот здесь вот name нажимаем Enter и дальше даём
05:29
название Давайте здесь просто напишем имя продублируйте храниться информация о фамилии и Для текста иря Вот у нас уже
05:45
name проставлен давайте мы напишем фидбек обновим страничку заполним наше значение любой информации нажимаем отправить и смотрите Что произошло наш рот изменился после знака вопроса идут вот
06:01
такие пары имя нашего поля равно значение вот дальше идёт имя следующего поля равно значение и напоследок последнее поле отзыва то есть мы уже с вами видим небольшую логику наша форма собирает значение в каждом поле и это
06:16
значение закрепляется за определённым именем и всё это делается по нажатию кнопки отправить при этом страничка смотрите Каждый раз будет перезапуска при каждом нажатии этой кнопки здесь информация собирается так как они пустые наши поля были при
06:33
отправке то после каждого из полей мы видим с вами пустоту вот если я допустим фамилию заполню чем-нибудь нажимаю отправить Вот введённая информация здесь у нас отображается Ну вот а ротах мы с вами поговорим на следующем уроке и расскажу более подробно как это
06:49
формируется А теперь давайте поговорим об вот этой кнопке отправить смотрите браузер по умолчанию создат это поведение для кнопки То есть если нока прописана в форме то она автоматически будет иметь вот такой тип submit то есть
07:05
она будет собирать наши данные из каждого поле и отправлять их на сервер Но если вы зададите ей другой тип Вот например buton то она автоматически потеряет это поведение Давайте обновим страничку из рота мы уберём эту
07:20
информацию Итак вводим значение нажимаем отправить и видите ничего не происходит то есть опять же повторюсь Вот это действие по умолчанию то есть собирать и отправлять данные она уже не сможет и также здесь есть тип reset
07:36
соответственно это сброс данных обновляем страничку вводим значение нажимаем отправить видите поля нашей формы просто очищаются при этом не меняется Ну вот и что касается вот этих типов полей Как я уже сказал Их
07:53
существует большое количество о них Вы можете прочитать Вот на этом сайте cools он английский но здесь очень хорошие примеры в принципе можно даже и без перевода обойтись То есть вы видите пример нажимаете TR Yourself то есть
08:09
попробовать самому и вот Работаете С этой формой то есть можете менять здесь атрибуты менять текст нажимаете Run и смотрите как это всё меняется так вот форма может состоять из разных элементов все элементы форм которые есть вот вы
08:24
можете посмотреть здесь наиболее часто используемые это Например Давайте вернёмся туда радиокнопки то есть это выбор одного из указанных значений чекбоксы могут предоставить
08:42
выбор нескольких значений То есть вы так вы можете проклинает и так далее и смотрите Что здесь хорошего в формах То есть если у вас есть Готовое решение Вот например форма для радио Баттона да то я могу всё
08:57
содержимое формы скопировать вставить в нашу форму Давайте повинен немножко чтобы было всё ровно здесь поставим б Давайте два раза обновим нашу
09:13
страничку и смотрите у нас этот радио бан появился мы можем выбрать одно из значений нажимаем отправить Да мы кнопку с вами забыли заменить на обновляем страничку здесь ну неважно
09:30
Какие значения нажимаем отправить и смотрите у нас появился новое значение то есть новое имя нашего поля Давайте скопирую это название и вот вы увидите его как раз в нашем поле ради Button и
09:46
вот здесь будет этому полю проставляться то значение которое вы выберете в этой форме выбираете HTML нажимаете отправить Вот HTML подставляется вот JavaScript так формы создаются Давайте
10:03
уберём Radio Button оставим нашу форму в таком виде и на следующем уроке продолжим работать с формами И я покажу как эти данные отправить на сервер и там их принять Ну а на сегодня у меня всё и по старинке все вопросы если они у вас остались Вы можете оставить в
10:18
комментариях увидимся на следующем занятии