Step 8 (S-44728)

From Stepik Wiki
Revision as of 23:32, 5 August 2017 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

Step 8 (S-44728) 1.png

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


Step 8 (S-44728) 2.png

[00:18 - 00:38] input это универсальная опора а чаще всего используются как текстовая а но существуют и другие варианты тегов input есть атрибут type зависимости от а атрибута type во поле ввода выглядят по разному например


[00:38 - 00:54] input type hidan это поле не видно для пользователя вообще а зачем такие а hidan полях обычно передаются какие то данные которые разработчик хочет сохранить для себя то есть


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


[01:12 - 01:29] его легко изменить а например при редактировании какого то объекта при редактировании анкета в хидден поле можно разместить идентификатор объекта который мы редактируем ну например номер заказа


[01:29 - 01:46] а замечу что это не является средством защиты либо каким то средством безопасности это просто способ разместить дании форме невидимо для пользователя а далее type текст


[01:46 - 02:04] это же типа умолчанию а так текст означает что поле будет выглядеть как текстовые поля то есть небольшой небольшое поле ввода куда пользователь сможет ввести текст а как вариант ставить пасворд


[02:04 - 02:19] а это поле для ввода паролей а при этом вводимый текст будет отображаться в виде звездочек пользователей его не увидит


[02:19 - 02:35] а есть специальные типы type чекбокс это отображение построения гуи это называется чекбоксом а


[02:35 - 02:50] radio отображение группы radio button а группа переключателя выбор вариантов файл


[02:50 - 03:07] input type file эта кнопка которая предлагает выбрать файл который будет загружен форму а мы видим что импульс это самый универсальный т к он может использоваться для разных полей ввода


[03:07 - 03:26] а помимо него есть а t the bottom на себя представляет просто кнопка на которую можно нажать и отправить форму текст area а это многострочное поле ввода


[03:26 - 03:40] удобно когда вам нужно ввести какой то объемный текст а ты просто недостаточно места а с точки зрения программирования особо никаких отличий нету отличия только визуальные есть


[03:40 - 03:57] теги селект и option позволяет организовать выпадающий список то есть drop down list со значениями у тегов а у тегов для чего то есть


Step 8 (S-44728) 3.png

[03:57 - 04:15] стандартные атрибуты name и в есть практически у всех так и происходит они а специфично для инпута а атрибут type определяет внешний вид и функционал


[04:15 - 04:30] тегов input но здесь на по здесь приведен пример инпута а текстовая импульса то есть мы видим что равняется текст поэтому инфы будет выглядеть как текстовые поля а далее указ


[04:30 - 04:45] атрибут name атрибут name задает то имя с которым данные попадут форум когда форма а кодируется отправляется на сервер она из себя представляет набор


[04:45 - 05:02] и назначение и назначение вот name это имя конкретного инпута это соответственно значение а причем это значение по умолчанию то есть когда отображается что мы форма


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


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


[05:36 - 05:53] а желательно те данные которые мы живем сохранить и вывести чтобы пользователи в не потерял ему не нужно было вводить и 2 раз в этом случае как раз пользоваться атрибут в а помимо вэлли есть атрибут placeholder


[05:53 - 06:10] place холдер это чисто визуально атрибуции эта строчка которой помещается в поле ввода но она не отправляется на сервер это своего рода подсказка пользователь видит поле ввода и видит пример данных которые туда следует вести


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


[06:25 - 06:43] автокомплит это не стандартный атрибут но тем не менее он реализован практически во всех браузерах он включает а подсказку suggested делать то что браузер запоминает что пользователь вводил определенные поля с определенными именами


[06:43 - 06:59] например если пользователь когда ты вводил в поле с именем емейл свой адрес то браузер будет подсказывать этот адрес в других полях с именем ему если это поведение нежелательно а оно например в может быть нежелательно


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


[07:15 - 07:34] вообще количество разных элементов что элементов очень большое про всех поговорить просто невозможно их нужно изучать на практике и а есть хорошее подробное руководство по различным тэгом оно находится на сайте


Step 8 (S-44728) 4.png

[07:34 - 07:41] точка ru поэтому если у вас возникает вопрос именно по трекам а рекомендую обратиться вот к этому