Титры к видео уроку - "Формы"

Ссылка на полный видео урок

С ф
ормами мы сталкиваемся каждый день, когда заходим на почту заполняя логин и пароль, входим в «Вконтакте», когда вводим какую то поисковую информацию (напр. Заходим в Google, заполняем текстовое поле. Это и является формы.). Итак, давайте рассмотрим нашу презентацию, что мы сегодня будем изучать по формам? Сам тег
, который создает форму, также атрибуты, которые есть у данного тега и посмотрим что за значения можно задавать в эти атрибуты. Далее мы поговорим про метод Get и Post. К ним мы вернемся чуть позже. Далее поговорим про тег , который является основопологающим при строении форм. И про значения в атрибуте Type, которые можно задавать для данного тега. Мы видим их будет достаточно много. Мы поговорим про выпадающий список – тег Select и про различные типы элементов Input, такие как hidden, file и так далее. Еще мы поговорим про то как группировать элементы с помощью тега
. И также поговорим про тег . Далее мы будем разбираться с атрибутами, которые можно задавать для тега ; для каких тайпов можно, для каких –нельзя. Также мы посмотрим на различные значения этих атрибутов. Допустим если мы посмотрим на readonly, selected и disabled. На этом в принципе все, давайте перейдем к примерам. Мы видим, что будем создавать два поля формы. Поскольку мы не оформили здесь type form, то это еще не может считаться полной формой, так же мы не создали здесь взаимодействие с сервером отправки значения поля формы по этому мы только тренируемся создавать поля формы. Итак, создадим здесь два поля форм, это будет два -а. Надеюсь вы помните что в презентации мы говорили что поля создаются с помощью тега <іnput>. Первых два наших тега <іnput> это : <іnput type=”text”> и <іnput type=” password”>. Первый будет иметь текстовое значение, а второй password- это соответственно наш пароль. Давайте поговорим про атрибуты name и value. name и value это пара ключ-значение, которые передаются на сервер. Они обьеденяются ампресантом, в данном случае у нас будут две пары ключ-значение – это то, что мы введем для текстового поля под именем «логин». Получается значение, которое мы введем будет присвоено ключу «Логин» и наше значение Psw с именем, в которое мы введем наш пароль – предадутся на сервер. Каждая пара ключ-значение обьедененна знаком равно «=». Итак, давайте запустимся и посмотрим как это выглядит. Видим окошко, в котором написано : «Введите логин» потому что мы заполнили value. И так же у нас здесь есть «password», он полностью пустой и как только мы начинаем вводить значения – мы видим, что они от нас скрыты. Итак, в данном примере мы рассмотрели два новых типа поля, и узнали что у -ов есть свои пары ключ и значение. Итак, давайте еще посмотрим парочку вариантов использования -ов. Следующий пример –это пример на использование check-box-ов, так называемых полей, которые позволяют выбрать один или несколько правильных вариантов. В нашем примере будет три -а с типом 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, но никак не две сразу. Итак, давайте посмотрим четвертый пример «Робота с тегом ». Теперь мы добрались к тегу , теперь мы можем создать самую настоящую форму, попытаться ее отправить. А сейчас давайте поговорим о теге , что мы можем попытаться в нем создать. В нем мы можем создать три атрибута 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 мы будем использовать тег , еще одно текстовое поле, пароль и выпадающий список. Тоже создается тег

© 2017 ITVDN, все права защищены