С формами мы сталкиваемся каждый день, когда заходим на почту заполняя логин и пароль, входим в «Вконтакте», когда вводим какую то поисковую информацию (напр. Заходим в Google, заполняем текстовое поле. Это и является формы.). Итак, давайте рассмотрим нашу презентацию, что мы сегодня будем изучать по формам? Сам тег <Form>, который создает форму, также атрибуты, которые есть у данного тега и посмотрим что за значения можно задавать в эти атрибуты. Далее мы поговорим про метод Get и Post. К ним мы вернемся чуть позже. Далее поговорим про тег <Input>, который является основопологающим при строении форм. И про значения в атрибуте Type, которые можно задавать для данного тега. Мы видим их будет достаточно много. Мы поговорим про выпадающий список тег Select и про различные типы элементов Input, такие как hidden, file и так далее. Еще мы поговорим про то как группировать элементы с помощью тега <fieldset>. И также поговорим про тег <Text area>. Далее мы будем разбираться с атрибутами, которые можно задавать для тега <Input>; для каких тайпов можно, для каких нельзя. Также мы посмотрим на различные значения этих атрибутов. Допустим если мы посмотрим на readonly, selected и disabled. На этом в принципе все, давайте перейдем к примерам. Мы видим, что будем создавать два поля формы. Поскольку мы не оформили здесь type form, то это еще не может считаться полной формой, так же мы не создали здесь взаимодействие с сервером отправки значения поля формы по этому мы только тренируемся создавать поля формы. Итак, создадим здесь два поля форм, это будет два <input>-а. Надеюсь вы помните что в презентации мы говорили что поля создаются с помощью тега <іnput>. Первых два наших тега <іnput> это : <іnput type= text > и <іnput type= password >. Первый будет иметь текстовое значение, а второй password- это соответственно наш пароль. Давайте поговорим про атрибуты name и value. name и value это пара ключ-значение, которые передаются на сервер. Они обьеденяются ампресантом, в данном случае у нас будут две пары ключ-значение это то, что мы введем для текстового поля под именем «логин». Получается значение, которое мы введем будет присвоено ключу «Логин» и наше значение Psw с именем, в которое мы введем наш пароль предадутся на сервер. Каждая пара ключ-значение обьедененна знаком равно «=». Итак, давайте запустимся и посмотрим как это выглядит. Видим окошко, в котором написано : «Введите логин» потому что мы заполнили value. И так же у нас здесь есть «password», он полностью пустой и как только мы начинаем вводить значения мы видим, что они от нас скрыты. Итак, в данном примере мы рассмотрели два новых типа поля, и узнали что у <Input>-ов есть свои пары ключ и значение. Итак, давайте еще посмотрим парочку вариантов использования <Input>-ов. Следующий пример это пример на использование check-box-ов, так называемых полей, которые позволяют выбрать один или несколько правильных вариантов. В нашем примере будет три <Input>-а с типом check-box, которые мы будем отправлять на сервер. Запускаемся и видим что есть обязательные значения name и value и так же здесь используем атрибут checked, который говорит что данный элемент будет изначально выбран. Итак, давайте запустимся и посмотрим. Вот у нас есть первый Input, второй Input и третий Input. Третий Input изначально выбран потому что у нас здесь указан атрибут checked= «cheсked». Давайте вернемся к нашей верстке. Видим что остальные Input-ы пустые, но мы можем например выбрать «самолеты» и «автомобили», сразу выбираем два варианта. Это недопустимо, сразу выбрать можно только один, так же можем ничего не выбрать и оставить пустым наше поле. В таком случае на сервер ничего не отправится. Итак, это все по check-box-ам, обязательно нужно указать name, указать value, или оставить поле просто пустым. Итак, давайте перейдем к следующему примеру, к примеру №3 «Робота с radio». Итак, radio это элемент, который позволяет выбрать только один правильный вариант, то есть check-box позволял выбрать несколько правильных вариантов, которые нужно отправить на сервер, пускай это будет какое то тестовое задание и мы отправляем несколько правильных вариантом. Check-box позволял отправить несколько правильных вариантов, а radio только один правильный вариант. С этим связана и причина по которой мы везде указываем один name, у нас получается только один делигатор отправится на сервер из данных элементов и у них должно быть одинаковое имя, потому что сервер потому, что сервер ожидает элемент с одним именем и с различными значениями, и будет отправляться на сервер только один файл, airplane или car. Давайте запустимся и посмотрим как это выглядит. А выглядит это как переключатели радио (старое, если у кого то осталось можете посмотреть) и по сути функционал тот же. В старых радио вы могли выбрать или fm-волну или am, но никак не две сразу. Итак, давайте посмотрим четвертый пример «Робота с тегом <Form>». Теперь мы добрались к тегу <Form>, теперь мы можем создать самую настоящую форму, попытаться ее отправить. А сейчас давайте поговорим о теге <Form>, что мы можем попытаться в нем создать. В нем мы можем создать три атрибута action, target, method. Что будет происходить в action. В action будет указан файл, который будет обрабатывать данные заложенные в форму. Файлу дадим какую то логику. И он на сервере будет что то делать с логином и паролем. Далее, у нас есть Target, работает так само как и атрибут, который находился в ссылках. То есть он отправляет ответ сервера в отельную вкладку, вот приблизительно таким образом открывается новая вкладка в которой мы будем видеть ответ нашего сервера. Итак, еще у нас есть method. Давайте обратимся к презентации, там у нас есть два слайду которые рассказывают о двух основных методах «GET» «POST». Методы «GET» и «POST» это основные методы, которые используют в значении данного атрибута. Метод GET является очень распостраненным и передает в адресную строку следующим образом: он отправляет запрос на сервер, поскольку он GET, он ждет что сервер ему ответит в адресную строку. Что означает ответ в адресную строку? Таким образом вы заполняете ваш логин и пароль (как в первом примере) и отправляете на сервер, а сервер в адресную строку пишет пару ключ и значение, которые вы отправили, так вы видите свой логин и пароль. Также его может видить человек, который стоит у вас за спиной, так что метод GET имеет определенные проблемы с безопасностью. Так же этот метод ограничен в размере, максимум можно передать 4 kb. Давайте поговорим о методе Post, у него нету обоих этих минусов. Метод Post отправляет данные на сервер, можно сказать «Постит» что бы запомнить, так же у него нету ограничения в 4 kb. Но в наших примерах мы не будем использовать метод Post потому что Visual Studio на local host-е не может запустить файл, у которого форма будет с методом Post . Давайте это проверим, изменим Get на Post и запустимся, попробуем заполнить форму, но как видите, у нас происходит ошибка. Но если мы отдельно в файловой системе в проводнике выберем данный файл и запустимся то увидим, что данный файл отлично отрабатывает. Давайте это сейчас сделаем, мы запустили наш проводник, заходимв курс, выбираем пример №4, запускаем его напрямую без студии, видим что пример один и тот же, заполняем форму, нажимаем Enter. Единственное что не был найден файл SomePage.aspx. Итак, давайте перейдем далее к нашему примеру, который мы рассматривали (мы поговорили о теге Form). Давайте еще раз посмотрим что у нас есть в данном примере. У нас здесь есть Input, Type=«text» (мы уже знаем что это текстовое поле), перенос строки «Password», рядом с ним будет Input, который будет вводить Password (который мы тоже видели) и у нас появляется новый Input, который отправляет данные на сервер. Submit-отправить. Она еще означает «ввести, отправить, зарегистрироваться». Это кнопка, которая отправляет введенные нами данные на сервер. Итак, давайте уберем метод «Post», потому что будем сейчас запускаться и можем написать здесь метод «Get», но можем его и не писать, потому что если мы указываем метод, то по умолчанию выбирается метод «Get». Давайте это проверим. Метод Post не отработал, давайте попробуем с методом Get. Запускаемся, заполняем форму и нажимаем отправить на сервер. Заполнили форму, нажали Enter и видим, что у нас опять-таки ошибка. Ошибки связаны с тем, что у нас не существует данного файла SomePage.aspx. Давайте уберем эту ошибку и запустимся еще раз. Запонляем форму, отправляем, и видим что наши данные как бы отправились. Давай посмотрим на адресную строку. Видим что появился знак вопроса и после него идет первая пара ключей и значений Login и данные, которые я ввел в виде пароля. Так же давайте попробуем ввести сейчас метод Post. Многие сейчас могут подумать что если я убрал ошибку то мы сейчас с легкостью запустимся с методом Post. Но этого не произойдет. Вот сейчас мы вводим наши цифры и видим что у нас опять ошибка сервера и запуститься можно только с проводника. Давайте вернемся и прорезюмируем данный пример. Это достаточно важно. Tagret позволяет открыть новую вкладку при выполнении, мы уже про него поговорили достаточно. Так же здесь может быть метод Post и SomePage, страничка, которая вырабатывает нашу форму. Если странички нету то у нас будет происходить ошибка. Также у нас есть два Input-а TYPE: Text и Password и очень важная кнопка, которая отправляет данные на сервер. Так же давайте посмотрим что в этой кнопке можно написать : «Отправить поисковый запрос» и эти данные будут введены в тело самой кнопки, Value замещает текст по центру нашей кнопки. На этом все, давайте перейдем к примеру №5. В пятом примере мы будем знакомиться с Input-ом Type=«Reset». Его часто используют в различных устройствах. Итак, давайте посмотрим как будем использовать его мы. Мы создаем два текстовых поля также создаем форму для ввода пароля и создаем кнопку, которая будет отправлять наши данные на сервер, а рядом кнопку, которая будет сбрасывать наши значения. Итак, давайте разберемся что такое «Сбрасывать значения» ? Запускаемся и видим что мы можем ввести какие то значения и можем нажать кнопку Reset, которая полностью обнулит нашу форму. Представим ситуацию когда мы заполняем Value для какой то формы. Например здесь, напишем англ. Слово «First». Написали и теперь давайте запустимся. Мы видим что изначально форма с First существует. И даже если убрать First и заполнить какие то другие значения и нажмем Reset то эта форма сбросится к изначальному Value. Видим что мы сбросились до First-а. НА это все. Я надеюсь было понятно. Итак, перейдем к следующему примеру Type= «button». Input Type= «button» помогает нам создать кнопку, пользовательскую кнопку, которая будет похожа на submit, которую мы с вами уже видели. И в данном примере мы будем реализовать следующее: как правило кнопки создаются для того что бы создать какой то сценарий или запустить какой то сценарий. А что бы создать или запустить какой то сценарий нам нужен Java Script. Но поскольку аудитория, которая прослушивает данный курс не знает Java Script, то мы еще здесь и не реализововали. Единственный намек на Java Script у нас находится на 25й строке, в котором мы как раз создаем нашу кнопку Type= «button» и по клику на неё мы вешаем здесь какое то событие, которое будет у нас происходить. С этим вы можете ознакомиться на курсе Java Script. Давайте подробней разберем нашу верстку, мы видим что у нас есть здесь два текстовых поля, которые мы будем заполнять в нашей форме. В форме мы не заполняем никакие атрибуты, это означает, что мы будем работать через метод Get, так же мы используем здесь элемент формы, то есть поля «Password», «Submit», «Reset» и вот собственно наша кнопка. Давайте запустимся, увидим как выглядит наша кнопка «Say hello», давайте просмотрим еще и адресную строку, как же в очередной раз сработает наш метод Get, нажмем кнопку Enter и видим что все наши данные теперь нам видны «Иван, Иванов, Password (скрыт)». Можем использовать Reset и посмотреть что произойдет, давайте сначала введем какие то значения и попробуем их обнулить. Видим что они у нас Reset-нулись (перезагрузились) до «Ивана Иванов». У нас есть еще кнопка «Say hello», которая при нажатии выводит скрипт «Alert hello world». Итак, давайте перейдем к следующему нашему примеру, примеру №7. В примере №7 мы будем использовать тег <Select>, который помогает нам создать конструкцию многозначного выбора. Что означает «конструкцию многозначного выбора», означает просто выпадающий список. Давайте посмотрим подробней на примере. Видим, что мы здесь создаем форму, в которой <Input type= text >, еще одно текстовое поле, пароль и выпадающий список. Тоже создается тег <Select>, просто тег в котором находятся «Options», это теги парные, они не самодостаточны. Очень все это напоминает Списки, в которых есть контейнеры; Но в отличии от списков здесь не айтемы а опшэны. И мы видим что у нас есть шесть вариантов выбора. И так же есть атрибут Selected ккоторый говорит о том что у нас будет выбран фильм «Bad boys» по умолчанию. Аналогично с checkd, где мы выбирали какой элемент будет отмечен при загрузке. Где такое можно использовать? Очень часто при загрузке за нас это используют в различных соглашениях где за нас стоит галочка, допустим я уже прочитал какие то правила согласия, или например место для галочки : установить яндекс.бар (здесь атрибут checked отмечен за нас) Так же атрибут Selected можно следующим образом: допустим у вас есть выпадающий список стран в интернет магазине, который находится в украине, но вы продаете и в другие страны но вы понимаете что приоритет у вас по украине, поэтому у вас изначально выбрана страна Украина. Очень удобно таким образом или создавать выпадающие списки с заранее правильным выбраным вариантом, или Check-box-ы с заранее отмеченным вариантом. Итак, и после этого у нас есть Input type=«Submit» и Input type=«Reset» , это отправка и загрузка, соответственно. Итак, давайте запустимся и посмотрим что у нас тут есть выпадающий список (по умолчанию выбран фильм Bad Boys) , можем выбрать любой другой и отправить на сервер. Отправляем и видим что Иван Иванов без пароля выбрал фильм с именем 4. Итак, давайте перейдем к следующему примеру, это Многозначный список, это список, где можно выбрать более одного варианта. На самом деле он не похож на выпадающий список, где мы можем выбрать много вариантов, он просто похож на самый обычный список. Итак, давайте посмотрим как все реализовано: у нас есть форма, в форме есть два Input-а «type=text», есть пароль и так же есть Select, в котором указан атрибут Multiple и его значение «Multiple», то есть мы можем выбрать более одного правильно варианта, которые мы хотим что бы отправились на сервер. И после этого у нас есть Submit и Reset, отправить на сервер и обнулить (сбросить данные), соответственно. Итак, давайте запустимся и посмотрим. Вот у нас есть наши с вами элементы. И мы хотим в данном случае выбрать более одного варианта. Как мы можем это сделать? Банально, зажав клавишу Ctrl и выбрав несколько правильных вариантов или же можем выбрать целый диапазон, например с первого по последний. Зажимаем Shift, нажимаем на последний элемент, выбирая весь массив. Хорошо, на этом закончим по данному примеру и перейдем к следующему. В данном случае мы будем группировать элементы данного списка. Каким способом мы это сделаем? У нас есть несколько тегов <br/>, которые разделяют наши текстовые поля. У нас есть элементы, которые мы группируем с помощью тега <optgroup>, к которому добавляем атрибут action, то есть у нас будет список отсортирован. Допустим, если абстрагироваться от фильмов то что это еще может быть? Это еще может быть, например, список стран с городами. Например Украина, и города: Киев, Харьков и так далее. В Label мы указываем : Москва, Санкт-Петербург, Краснодар и так далее. И видим что мы здесь создаем Label для Optgroup для фильмов Action, Optgroup для фильмов Fantastic и создаем Optgroup для остальных жанров «Over». У нас есть Input, который отправляет данные на сервер и Input, который сбрасывает данные. Итак, давайте запустимся и видим, что у нас действительно есть Label-ы. Так же видим что по умолчанию у нас выбран фильм «To smokin guns». У нас атрибут Selected для него не обозначен. С чем это связано? С тем, что когда мы загружаемся то нам уже должен быть представлен какой то вариант, но это уже ньюанс работы с Optgroup, то есть поле выбора уже не будет пустым, а начальным будет элемент, который первый в списке. Давайте например поставим фильм Bad boys первым и перезапустимся. Видим что этот фильм начинает наш выпадающий список. Итак, на этом все по данному примеру, перейдем к следующему Input type= «File». В данном примере будем создавать поле для загрузки файла. Обратите внимание что никакой загрузки файла не будет происходить, просто мы будем создавать поле, которое позволит нам обратится к нашей файловой системе и выбрать какой-то файл. Всю остальную логику мы должны подключить через JavaScript у которого недавно появилась такая возможность подключения к локальным файлам или же через серверную технологию, которую мы будем использовать. Давайте посмотрим. У нас есть текстовые блоки с Input type=«text» и Input type= «password», так же элемеен Input для загрузки и элемент для отправки. Итак, давайте запустимся и посмотрим что у нас здесь получается. У нас здесь есть возможность ввести наш логин и пароль и есть возможность выбрать файл для загрузки. Можем попробовать выбрать какой то файл, но с этим ничего не произойдет. Выбираем файл, нажимаем Enter и видим, что у нас было отправлено имя файла, который мы хотим отправить на сервер. Больше ничего с этим не произошло. Давайте перейдем к следующему примеру, тут все понятно. Единственное что каждый браузер в зависимости от настроек и версии отображает кнопку «Обзор» по-своему, и содержимое кнопки. Видите, мы написали «Choose here» но Mozilla отобразила просто «Обзор», так же и с другими браузерами. Если бы у меня была английская локаль то отображало бы «Browse». Давайте посмотрим следующий пример Input type= «hidden». Hidden не отображается пользователю и притом не передает данные на сервер. Давайте просмотрим данный момент. Итак, мы создаем два Input-a type=«text» (на 13й и 15й строке) и создаем Input type password, после этого мы создаем три скрытых поля Type=«hidden» в которых вводим значения «1234», «100», «MasterCard» и после этого создаем кнопку, которая будет отправлять все это на сервер. Давайте запустимся и посмотрим видны ли Input-a type=«hidden». Вводим пароль и отправляем данные на сервер. И что мы сейчас увидим? Вот у нас «MasterCard», «100» «1234» данные. Вот таким образом мы можем скрывать наши Input-ы. Где это нужно ? Например в одной из форм, которая подгрузилась и просит человека ввести логин и пароль и человек который вводит у него изначально на страничке подгружены Input-ы «Hidden», после того как они открываются с помощью JavaScript всплывают еще формы и он заполняет их дальше. Если человек не заполняет поле формы «Password» то форма все равно отправляется такой как она есть. Достаточно специфический Input, но применение ему найти можно. Итак, давайте посмотрим следующий пример №12 Teг «Textarea». Тег предназначен для многострочного поля для ввода. Имеет атрибуты Rows, Cols, которые соответственно указывают высоту и ширину в количестве символов, которые могут уместится в этих колонках. Стоит отметить что «Textarea» это отдельный тег, это не значение Type. Так же он отличается от Type= «text» тем что позволяет создать форму на несколько строчек. То есть есть в Input-e можно было создать только однострочное окно а вот в Textarea мы можем вводить несколько строчек. Давайте запустимся и посмотрим как это у нас выглядит. Итак, запустившись видим что у нас есть текстовое поле Input type=«text» и наше textarea в которое мы можем ввести большое количество символов, употребить Enter как средство для переноса строк. И в то же время когда мы нажимаем Enter в обычном окне type=«text» то начинается отправление данных на сервер. Итак, стоит еще отметить что мы использовали атрибуты cols и rows для задачи значений. (cols=4, rows=10) здесь получается 40 колонок и десять рядов. Вернувшись к примеру видим что действительно у нас здесь может быть 40 колонок и 10 рядов текста. Но эти атрибуты не очень часто используют потому что наша textarea получает только стартовое значение, то есть то как оно отображается пользователю. Но пользователь в любое время может потянуть за правый нижний угол и изменить размер нашей textarea. Что же нужно сделать в таком случае? А в таком случае нужно обратится к нашим с вами стилям, которые мы уже проходили, в данном случае мы обратимся в тег <head>, укажем тег <style> и через него обратимся ко всем textarea на странице. И давайте попробуем задать какуб то ширину для нашего блока и высоту. Сделали его квадатным, запустились и видим что дейтсвительно она приняла наши размеры. Но есть один нюанс: никуда не пропал этот «скрол», который позволяет растянуть наше окно. Итак, вернемся к примеру и посмотрим как же убрать этот resize. Есть два способа. Первый более простой : мы указываем resize со значением «none». Запустившись видим, что пропал уголок, который позволял растянуть наше окно и есть еще более сложный способ, который используют люди, которые не запоминают свойство Resize. Они просто указывают минимальную и максимальные и минимальные значения высот и широт. Нпример все по 200 пикселей. Запускаемся и видим что «скролл» остался но при обращении к нему он не работает, так как мы очень строго задали размеры окна.