Step 7 (S-44727)

From Stepik Wiki
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14820/step/7

Step 7 (S-44727) 1.png

[00:00 - 00:15] следующий способ взаимодействия пользователя с веб страницы это формы форма используется для отправки данных на сервер возможно это сложных возможно простых 1 параметр отправляется а давайте посмотрим


[00:15 - 00:33] как сдаются формы верстке а здесь ты взял пример довольно сложной формы с разными полями а форма состоит из тегов форм но есть множество атрибутов


Step 7 (S-44727) 2.png

[00:33 - 00:49] и внутри данной формы находится непосредственно поля ввода данных а поля ввода могут быть разными про них мы поговорим чуть позже какие такие важные атрибуты есть


[00:49 - 01:06] форма у тегов а во 1 следует отметить что визуально сама форма сам так форму он никак себя не проявляет а видны только поля ввода который находится внутри форм а


[01:06 - 01:26] сам так форм он использоваться исключительно как контейнер для того что можно сдать вот эти атрибуты а 1 атрибут этот метод здесь все просто указываете метод с помощью которого форма будет отправлена на сер есть 2 варианта либо нет либо post


[01:26 - 01:41] а есть такое правило которому еще много раз вернемся позже а любое изменение данных на сервере должно осуществляться с помощью метода post


[01:41 - 01:57] получение данных с помощью метода get соответственно в таком случае нам может понадобиться а форма с методом get в том случае когда мы запрашиваем данные то есть форма какого то сложного поиска


[01:57 - 02:16] выводится в поисковую строку что хотите найти сдаете возможно какие то опции поиска но тем не менее вы осуществляете получения данных сервера поэтому используется метод гет указывается в форме а в этом случае все содержимое формы оно будет передано через урл


[02:16 - 02:34] то есть произойдет переход на новую страничку и все содержимое будет передано через понял это позволит вам скопировать уровне например а если вы производите какие то изменения данных на сервере например редактировать анкету сохраняете то метод должен быть post


[02:34 - 02:52] а это правило хорошего тона так следует делать при разработке иначе могут возникнуть некоторые проблемы следующий атрибут а атрибут action а на самом деле этот атрибут указывают


[02:52 - 03:11] а на которой будет отправлена форма а просто здесь указывать как носитель нам так абсолютно а браузеры обрабатывает эти урлы по аналогии с урлами в гиперссылок


[03:11 - 03:28] атрибут таргет так же как гиперссылки он указывает название окна в котором будет загружена открыто формы если атрибут target не указать форму будет а


[03:28 - 03:44] показано в текущем окне то есть произойдет перезагрузка текущей странице а в случае если в нем что то указано а форма будет открыта в окне в окне браузера с именем fan 3 в данном случае


[03:44 - 04:03] а вы что имели есть возможность создавать несколько окон давать им разные имена you must не будет а если указать подчеркивание blank соответственно она будет открыта в новом окне очень интересно атрибут type


[04:03 - 04:18] а атрибут говорит о том как будут закодированы данные формы то есть внутри форму есть инпут то есть какие то да а


[04:18 - 04:37] как их можно закодировать при передаче на сервер существуют в общем 2 вида кодирования ну распространены 2 вида кодирования а это вот такая сложная строка аппликейшн икс в форум


Step 7 (S-44727) 3.png

[04:37 - 04:52] энкод и вот такая строка покороче мультиплатформ дата когда такую следует использовать по умолчанию используется вот это длинная строчка про нем буквально следующем слайде а


[04:52 - 05:09] она используется для отправки обычных данных которые содержат строки символы какие то флажки текстовые данные если вам форме нужно загрузить файл


[05:09 - 05:25] необходимо указать а вот такой n почему а файл может содержать бинарные данные и скорее всего содержит если я такая картинка либо видео файле а


[05:25 - 05:40] и эти бинарные данные не могут разрушить структуру протокола http поэтому а их нужно особым образом кодировать используется мульти кодирование это нечто похожее на аттачмент в письмах


[05:40 - 05:58] то есть аттачмент электронных письмах организован аналогично с помощью мультипорт а вообще обычно и по умолчанию формы передаются с помощью


Step 7 (S-44727) 4.png

[05:58 - 06:15] формы а что это такое это способ кодирования данных которые есть в форме таким образом чтобы можно было передать через угол а мы говорили что урла есть определенная структура


[06:15 - 06:32] а например с помощью решетке отделяется якорь соответственно символ решетка не может встречаться 0 а там более 1 раза а


[06:32 - 06:49] и вообще есть ограничения в виде символа которые могут попадать в урле каким образом происходит кодирования данных чтобы их можно было разместить в орле допустим у нас есть форма следующими данными какой то идентификатор


[06:49 - 07:08] число 3 имя пользователя набрано русскими буквами страница в кодировке utf 8 запишем это если страница в кодировке utf 8 это значит что значение всех текстовых полей тоже будет в кодировке


[07:08 - 07:26] у нас есть кот вася и есть список его друзей в виде чисел но 2 числа мы знаю что меня есть друг с номером 4 друг с номером 5 как это будет выглядеть в закодированном виде а вот указаны снизу а


[07:26 - 07:41] мы видим что данная и в таком виде делятся на пары вот пара вот пара


[07:41 - 07:58] вот пара пара пара а объединяются склеиваются между собой через символ амперсанд а имя равняется значение имя равняется значение


[07:58 - 08:13] если в значении содержится только допустимые символы оно а попадает в том что попадая в результирующую в том виде в каком есть например символ 3 он вполне допустимо для


[08:13 - 08:29] урла соответственно символ 3 попадет как есть а причем числа передаются в таком виде нет никакого там big endian little ending числа придется как строки а вот со значением


[08:29 - 08:45] а со значением строкового поле вася дело обстоит интереснее а символы русские ну и вообще национальной сил они недопустимы допустимо только латиница а


[08:45 - 09:00] эти символы должны быть каким то образом закодирована кодирование работает следующим образом берется отдельный символ например вот буква в а


[09:00 - 09:15] эта буква в кодировке utf 8 представлены в виде каких то 2 байт а эти байки записывается как а шестнадцатеричные числа то есть букву в в кодировке t 8


[09:15 - 09:33] состоит из 2 мбайт до 0 и 92 записываться начиная с процента таким образом 1 русская буква значения превращается в 6 символов формате как вы видите а


[09:33 - 09:49] в 3 раза больше места то есть в кодировке t 8 2 бета а закодировано в форму код занимает 6 тем не менее от позволяет передавать


[09:49 - 10:05] придавать произвольные строки через через куру это в случае если форма отправляется методом get your данной все реализуется таким образом


[10:05 - 10:23] t просто добавляются к урлу если форма отправляется методом post происходит тоже самое форма сериализуется к кодируются с помощью вот этого правила но результирующая строка просто передаются в теле запроса


[10:23 - 10:41] получается по запросу формы передаются опять таки а виде аппликейшен икс в форму а такой способ не подходит и не удобен для передачи файлов


[10:41 - 10:58] почему в основном потому что сильно увеличивается размер то есть смотрите у вас а русский символ занимает в 3 раза больше места а и кроме того не удобно смешивать а большие файлы


[10:58 - 11:13] с мелкими атрибутами часто бывает необходимо передать а и файл а иногда и несколько файлов и еще какие то простые атрибуты в таком случае вам нужно указать в а


Step 7 (S-44727) 5.png

[11:13 - 11:21] будь у формы мультиплатформ дата это немножко другой вид кодировки который позволит вам передавать файлы