HTML — Базовый курс 10


134 просмотра.

Краткое описание видео: .продолжаем изучать html в данном уроке.мы займемся html формами это те самые.формы которые позволяют.отсылать сайта письма позволяет делать.заказы и так далее да то есть такие.элементы взаимодействия пользователя и.владельцы сайта через такие формы на.многих сайтах посетители могут общаться.с владельцем сайта до целовать ему.какие-то данные сейчас мы будем учиться.создавать такие формы но перед этим вы.должны понять несколько простых вещей.которые позволят вам более быстро.обучиться создавать эти самые формы и.так что такое форма до формы да по сути.набор полей для ввода да причем каждое.поле имеет свое уникальное имя при этом.сама форма сама по себе да оно как бы.еще ничего не значит это просто как бы.обычный объект html.естественно чтобы как-то эти данные.получить из формы нужен какой-то.обработчик.поэтому вот это имейте ввиду что форма.состоит на самом деле из двух частей.одна это внешняя часть которая видна наш.темой странице докуда пользователь.вводит данные и вторая часть это.обработчик который принимает на себя вот.эти данные из каждого поля да и уже.зависимости от того что в нем прописано.совершая под этими данные.какие-то действия либо отправить эти.данные на email адрес какое-то либо.занести в базу данных и так далее то.есть по сути у нас схема будет выглядеть.так у нас появляется еще вторая часть.формы это обработчик.обычно обработчик пишется на каком-то.языке программирования здесь уже простым.html мне обойтись в нашем случае это.будет язык php естественно вдаваться в.него мы здесь не будем я просто покажу.вам шаблон который будет работать для.отправки этой самой формы.и по сути у нас появляются такие.стрелочки по нажатию на кнопки все.данные которые формы собирается всех.полей она отправляет в этот самый.обработчик.давайте займемся созданием формы в этом.уроке мы будем говорить только о внешней.части то есть в самой html форме да а.следующим уже займемся обработчиком.которым будет отправлять данные на наш.e-mail адрес и так что у нас на данный.момент есть у нас есть несколько страниц.а здесь у нас открыта страница ты был.пейдж cml в которой мы тренировались.создавать таблицы.я предлагаю для форм создать еще одну.страницу в которой мы будем учиться.работать с формами для этого выбираем.пункт файл сохранить как и сохраняем.данную таблицу как форум bich так в ней.сразу изменяем название страницы.изучения форум.здесь допустим меняем ключевые слова и.естественно.описание формы html отлично теперь все.что нам здесь понадобится это одна.табличка потому что в нее мы будем.встраивать.форму все остальное можно удалять одна.табличка с одним с одной строкой и одной.ячейкой.поэтому все лишнее здесь можно удалять.оставляем вот у нас начинается табличка.до.так оставляем ей одну строку вот она.прибыл до.выбираем выравнивание по центру пока.оставляем и одну ячейку пока все.атрибуты удаляем и.и ту же ячейку здесь мы должны закрыть.так отлично вот у нас есть одна табличка.в ней есть ячейка в которую мы будем.вставлять форму так из атрибутов что на.тут можно изменить так вот афон у самого.тела документа можно убрать и заголовок.не таблицы на меняем формы так вот такой.каркас у нас будет если мы сейчас.посмотрим данную страницу здесь.что у нас есть много форм и есть.табличка в которой пока нет данных и все.готово для создания нашей первой формы.отлично итак становимся вечеринку и.создаем нашу форму форма создается с.помощью тега форм то есть опять-таки по.аналогии какие атрибуты есть у формы.во-первых т.к. тут парные поэтому сразу.закрываем у того форме есть несколько.основных атрибутов первое это обработчик.то есть тот самый рабочий которую я вам.показывал на схеме из какой файл будет.обрабатывать эту форму поэтому здесь мы.пропишем что.обрабатывать данную форму у нас будет.файл обработка точка php отлично и.следующий атрибут тоже один из важнейших.это требует метод то есть как именно.будет пересылаться данные от формы к.обработчику пишется таким образом вот.здесь мы вдаваться в подробности не.будем скажу лишь что существует метод.get это как бы открытая передачи через.строку браузера.то есть все данные будут передаваться от.в этой строке либо метод post.закрытый метод пользователь не увидят.какие данные передаются обработчик.обычно используется метод post пройдем.дальше последнее из обязательных.атрибутов это атрибут name.то есть мы должны обязательно указать.имя той форме висит у нас будет form1.отлично сантой форма у нас готов теперь.мы будем вставлять в него элементы так.что мы будем создавать какую форму.я предлагаю создать такую форму где.будут как бы использованы все основные.элементы здесь и поля для ввода поля для.ввода пароля радио переключатели здесь и.же и элементы выбора такого типа.выпадающий список и текстовой области.все базовые элементы + кнопка к ней.так начнём мы с текстовый гости куда.человек должен нести свое фио.то есть по сути это как бы форма заказа.каких-то товаров.возвращаемся в код и первое что мы будем.указывать это человек должен будет вести.свое фио.для этого давайте откроем абзац так и во.первых напишем что именно должен будет.указать пользователь видите свое и а так.здесь можно поставить перенос строки и.на следующей строке мы уже будем.вставлять этот тот самый текстовый блок.до для ввода текстовой информации.вставляется он через так input запомните.пишет таким образом импорт так одинарное.его закрывает не нужно далее мы должны.указать атрибуты обязательно данного.тега во первых этот тип потому что им.бутов бывает много разных в нашем случае.этот тип текст для ввода текста напишем.type текст следующий момент это поле.name.то есть мы должны указать как это поле.называется пусть это будет у нас поле.фио.ну в принципе можно еще указать ширину.данного поля пишется через этот атрибут.вниз допустим указываем 20 отлично что.дальше дальше нужно проверить что у нас.получилось сохраняем данную страницу.обновляя так вот у нас появилось первое.поле для ввода сначала идет у нас текст.и первое поле для ввода принципе текст.можно сделать даже.жирным для этого мы когда эту фразу.помещаем в тех странах.сразу заодно вспоминаем как придавать.тексту жирность.так отлично следующим абзацем мы ведем.чтобы человек вел свой пароль на но это.образно говоря да возможно никакого.пароля у него нет но мы для тренировки.чтобы знать как делается такое поле для.ввода пароля.это более создадим так копируем этот.абзац.и вставляем его здесь здесь нам нужно.изменить только введите свой пароль так.и в поле тип мы естественно должны.заменить.с простого текста на password означает.что в это поле мы творится пароль и.соответственно при вводе данных не видно.будет что именно вводится как и здесь.допустим даем имя пас сохраняем данную.страницу и проверяем отлично вас.появилось поле введите пароль видите.филда если мы вводим фио допустим у нас.водится на русском и все видно да если.мы вводим пароль у нас отображаются.такие тощие скрывающие.сам текст идем дальше следующий пункт у.нас там введите ваш e-mail.опять таки можно скопировать вот этот.обычный текстовый impad потому что здесь.у нас будет то же самое видите e-mail.так name днем тип текст расставляем так.моим допустим будет email email да так.отлично идем дальше выберите вариант.носители информации здесь уже появляется.новый элемент это по радио переключатель.которые позволяют выбрать только одну.позицию отлично да для этого нам опять.таки понадобится абзац они желают делаем.так и опять-таки т.к. импорт только.здесь уже.тип будет немножко другой уводим импов и.в качестве типа мы здесь должны указать.радио такой переключатель он на самом.деле называется радио переключатель и.тип у него остается же.отлично теперь мы должны дать ему имя.так.имя может быть допустим формат формат.диск на у нас указывается так а здесь.рядом с этим радио переключателем мы.допустим можем поставить.9 до дальше делаем так переноса чтобы.следующий радио переключать он был на.следующей строке да и копируем нет так и.опять таки здесь указываем то же самое.имя только в качестве значения уже.указываем сиди.вот при этом как вы видите у нас два.поля с одинаковым именем.это сделано специально то есть это.говорит браузеру о том что можно выбрать.только какой-то один из этих граней.переключателей вот и к тому же нам здесь.нужно еще указать дополнительный атрибут.это атрибут вуаля который будет как бы.приписывать значение потому что в любом.случае у нас будет создана переменная.формат в которую будет занесена какое-то.значение либо сиди либо 9 день поэтому.мы должны обязательно указать здесь.атрибут малия и для 9.мы можем написать формат 9 на для сиди.мы напишем воле теги.он теперь мы из еще кстати не написали.выберите формат близко здесь вам начале.абзаца можем написать формат диска.сохраняем данной странице и проверяем.что у нас получается вот у нас появился.радио переключатель если мы нажимаем.сюда или сюда у нас оставляет только.один вот для примера давайте попробуем.изменить имя.если мы здесь поставим допустим формат.а1 посмотрите что произойдет вот мы.сможем выбрать сразу два радио.переключателя на этом примере.особенно хорошо видно что если вы хотите.сделать комбо группу связанных радио.переключателей чтобы можно было выбрать.только один вы должны дать им одинаковые.имена.сохраняем и перуна собирается.один так идем дальше.дальше у нас идет укажите какие курса вы.хотите видеть на диск и здесь у нас идут.переключатели выбора на то есть можно.выбрать сразу как бы два так для этого.нам понадобится опять-таки скопировать.блок здесь уже выберите курса до курсы.для заказа.так здесь у нас уже не будет ни радио.поэтому здесь меняем здесь у нас будет.тип checkbox.вот такие квадратные штучки в которые.можно вставить.галочку да вот такую.соответственно они тип у них checkbox.запомните так и сюда садисты тоже.checkbox.здесь уже именно одинаковый давать не.нужно допустим если у нас первый курс.это будет по созданию сайтов города.здесь можно дать имя сайт а второй.допустим курс по созданию книгами есть.можно дать имя бог так здесь допустим.давайте напишем курс о создании сайта.здесь курс по созданию электронной книги.по созданию электронной книги при этом.воле нужно естественно нам здесь.заменить так пока мы валя ставим пустыми.чуть попозже я объясню какие значения.нам нужно будет ставить так отлично.сохраняем пока на этом этапе нашу.страницу и проверяем что у нас.происходит здесь.так вот нас появился пункт выберите.курсы для заказа мы можем выбрать сразу.два курса либо по одиночке на отлично.идем дальше смотрим по схеме укажите тип.доставки вот здесь появляется еще один.новый элемент формы это выпадающий.список да сейчас мы поговорим о том как.него создавать как настоящий строке.создаем опять-таки новый абзац так мне.большой справился так и опять-таки пишем.так выберите тип доставки на доставке.переход на новую строку и формирует тот.самый выпадающий список делается он с.помощью тега select запомните.пишется таким образом причем этот ток.парный.здесь его где-нибудь закрываем вот.внутри этого тега мы уже должны вводить.пункты данного выпадающего списка.опять-таки через так им путь и здесь мы.уже вводим значение которые должны быть.в выпадающем списке через стек общин.пишется таким образом общин причем этот.те кто же парный и здесь его закрываем.мода внутри этого тега допустим пишем.срочно еще один общем еще один элемент.выпадающего списка допустим обычные вот.при этом когда человек выберет допустим.срочно будет создан осознанно переменная.с таким именем который мы сейчас укажем.для вот этого тега селе так давайте.дадим ему имя.допустим delivery потому что в данном.случае у нас это доставка.поэтому здесь пишем сь элитным delivery.в принципе сейчас мы еще несколько.атрибутов узнаем у данного тега и здесь.вот вам важно понять то есть когда у нас.будет нажиматься вот эта кнопка.отправить до то будет создана переменной.delivery перемены такой небольшой.контейнер информация вот оно здесь будет.создана.соответственно и в нее будет помещено.именно то значение которое человек.выберет вот здесь и сезона выбрал.срочное перемена delivery про месяца.слова срочная и это перемены уже полетит.обработчик наш ну это мы еще увидим.когда будем делать обработчик в этом все.это мгновенно поймете вот сейчас важно.понять что мы даем имя этому выпадающему.списку и при нажатии кнопки вот вот этой.переменной которые получится у нас будет.присвоен а то имя то значение точнее.которые человек выберет вот и следующий.атрибут расчет сначала давайте проверим.что у нас там получилось смотрим да вот.у нас появился выпадающий список срочно.и обычно вот при этом у нас как бы виден.только один пункт и можно выбрать также.один бум если вам нужно чтобы было видно.допустим сразу два пункта для этого вам.понадобится атрибут сайт спирс таким.образом вот и здесь мы можем указать.допустим 2 чтобы было видно сразу два.элемента сохраняем и проверяем вот.теперь у нас видно оба элемента.но по-прежнему мы можем видеть только.выбрать начни только один из них если вы.хотите сделать так чтобы человек мог.выбрать сразу несколько пунктов есть еще.один атрибут он называется multiply.таким образом пишется и ему нужно.присвоить точно такое же значение.уместно мы сейчас сохраним и проверим то.мы увидим что теперь можно выбирать.сразу два элемента из вот этого списка.ну нам эти в принципе здесь не нужны нам.нужен один только.выпадающий список поэтому лишнее.атрибуты мы удаляем но при создании.форум имейте их виду если они где-то.понадобится так смотрим на схему дальше.у нас идет такая текстовая область.большая и в принципе кнопка отправить.все текста область тоже создает.достаточно просто для этого нам.понадобится специальный тег текст ари.при переводе текстовая область да и.сейчас мы посмотрим как он создается вот.на для начала пить и скопирован абзац.для того чтобы прописать что именно.человек куда должен вести он продолжил.вести данные для до адрес для доставки.до так введите адрес доставки так теперь.сам т.к. текстовой области создается он.с помощью такого тебя текст.ария причем так опять таки парный и если.мы его открыли там его должны закрыть.так и обязательно указываем у него.атрибуты на им во первых name допустим.будет адрес.и обязательно указываем количество.столбцов да так скажем делается это.через атрибут коулс то есть это означает.сколько символов будет помещаться в.ширину в эту форму да но я думаю около.40 должно обязательно помещаться поэтому.поставим 40 и сколько рядов то есть у.нас текстовая область оно будет примерно.вот так выглядит да то есть мы должны.еще указать сколько будет рядов вот для.ввода информации раз-два-три-четыре да.вот сколько таких рядов должно быть в.этой области.давайте укажем 5 рядов для начала и сам.будет мало то.увеличим делать это через слово rose от.английского варианта скажем пять рядов.так принципе все внутрь текстовой.области мы можем даже что-то вести.но пока оставим ее пустой сохраняем.данную страницу проверяем браузере и.видим что у нас появилась форма для.ввода адреса вот и при этом можно вести.40 символов.ширину и уже до 5 ряду высоту.даже если человек идет больше здесь.просто появится полоса прокрутки и.данные все равно его будут получены.так и последний момент который нам нужно.создать эту самую кнопочку для отправки.данных возвращаемся в код как здесь.убираем лишние пробелы и перед.закрывающимся тегом форм нам нужно еще.один абзац.для кнопочки на поэтому открываем здесь.абзац так и создаем кнопочка кнопочка.создается опять-таки через пять input.пишется уже знакомым образом только тип.у нее будет уже не какой-нибудь там.текст до.тип не он будет сабмит.означает что кнопка будет отправлять.данные в обработчик.именно в потом рабочий который мы.прописали здесь вы требуйте action.импорт type сабмит и можем ей дать даже.имя если нужно иногда бывает нужно.допустим.имя будет будет bottom и если мы хотим.написать что-то на кнопки мы должны.указать атрибут у оли и написать.внутреннего значения допустим напишем.отправить отправить заказ в принципе все.если мы сейчас сохраним.данную страницу и посмотрим браузере мы.увидим что у нас появилась кнопка.отправить заказ пока что она ничего не.куда отправить не может потому что.обработчика у нас нету у нас есть пока.только форма так и еще один момент.который я вам сейчас покажу это как.сделать чтобы при загрузке и формы.автоматически вот эти вот пунктов и.какой-то из этих пунктов стоял на потому.что сейчас ни один из пунктов здесь не.выбран вот если мы хотим чтобы какой-то.пункт был уже установлен до.автоматически мы должны ввести еще.ключевые слова не я которые то есть.допустим если мы берем вот эти два радио.переключателя то мы хотим допустим чтобы.у нас автоматически стоял переключатель.dee d она достаточно здесь прописать.ключевое слово пишется таким образом.checked.то есть отмеченный без меча сохраним.проверим то увидим что у нас.900 отмеченным вот тоже самое для вот.этих квадратных check box of да вот мы.также можем это сниму скопировать и.допустим для каждого из них поставить.отмечен нажимаем сохранить.обновляем и видим что они у нас также.при загрузке формы уже.сразу стоят отмеченными точно так же.можно сделать и для вот этих.если мы хотели чтобы по умолчанию стояла.обычная мы можем там прописать вот но.это обычно не делается так дальше теперь.форма у нас готово нам осталось создать.обработчик.но естественно так как у нас обработчик.будет создаваться на языке печки нам.понадобится.некоторые дополнения то есть во первых.это сервер потом как устанавливать.сервера есть отдельный курс на этом.диске.посмотрите этот курс там буквально три.по моему и 4 урока и установите сервер и.уже к следующему уроку будьте готовы что.мы будем тестировать вот эту форму уже.на каком-нибудь локальном сайте.созданным на сервере вот там ничего.сложного нет не пугайтесь там все.объяснено и здесь в следующем уроке я.также покажу как мы будем отправлять.данные усатый форма в обработчик и как.там рабочих будет эти данные.обрабатывать на этом яга на урок.завершая обязательно создайте формула то.он самостоятельно без того чтобы она у.нас.выглядело примерно так же вот в принципе.здесь можно даже табличку уменьшить.потому что она у нас есть слишком.большая допустим до 400 пикселей можно.ее уменьшить.сохраним и пусть она у нас будет вот.такой небольшой.отлично так и в принципе все.единственно еще можно последний момент.здесь это открыть страницу вот эту.главную нашу до индекс.давайте ее откроем и пропишем в ней.нормальные ссылки открыть чтобы у нас.вот здесь были не какие-то там.придуманные ссылки на на тестовую.страницу вот здесь у нас будет ссылка на.страницу про таблица где мы изучали.таблицы на страницу про.таблицы так она у нас называлась ты.болтаешь до пропишем есть ты был павич.так и вот здесь и где у нас.а уроки photoshop мастер мы можем.прописать на форум притча о рампэйдж и.здесь у нас будет.изучение форм по сути мы создаем даже.уже небольшой сайт так изучение форм вот.так здесь можно тайтл изменить на форму.разительно таблицы.так сохраняем данную главную страницу.не теперь мы уже будем у нас уже будет.как бы.нормальные ссылки то есть из нам нужно.что-то про таблица нажимаем нас.загружается страница про таблица да и.собрал формы нажимаем так мы не.прописали расширение там похоже тогда.вот форум пэйдж . hdmi.так сохраняем обновляем у нас.открывается таблица с формами то есть.теперь у нас как бы все три страницы.между собой взаимосвязаны таблицы и.формы и главное все на этом данный урок.я заканчиваю следующему же займемся.обработчиком нашей формы и будем.работать сервером

HTML — Базовый курс 10

Как? Вы еще не смотрели? Ну это зря...