Теперь, когда мы видели, как добавить кнопки на нашу веб-страницу.
В этом упражнении мы рассмотрим формы и как мы можем добавить формы на
нашу веб-страницу, а также стиль этих элементов формы с помощью классов Bootstrap.
Возвращаясь к странице contactus.html,
прокрутите вниз, пока не увидите этот комментарий под названием «Форма идет здесь».
Мы собираемся заменить это на форму на этой веб-странице.
Итак, давайте удалим это, а затем построим
форму в этом конкретном месте внутри div там.
Чтобы начать работу с формой,
я собираюсь использовать HTML-тег формы и построить форму в этом HTML-теге.
Итак, в этом теге формы,
давайте добавим в радиус элементы нашей формы.
Итак, внутри этой формы,
я собираюсь разделить эту форму на несколько строк там.
Чтобы разделить свою форму на строки,
вы можете просто использовать div с классом = «form-group», а затем применить к нему класс строки.
Таким образом, с этим мы собираемся добавить в две группы форм здесь.
Я собираюсь скопировать это, а затем вставить его ниже здесь.
Итак, вы можете видеть, что я собираюсь добавить две строки в эту форму здесь.
Итак, чтобы добавить элемент в эту форму,
мы собираемся в этот div, а затем я начну с использования тега метки здесь.
И для тегов метки,
так что у меня будет две строки:
одна, позволяющая пользователю заполнить свое имя,
а вторая для своей фамилии.
Итак, вот где мы собираемся использовать эту метку, чтобы указать класс там.
Теперь, Кроме того, Bootstrap позволяет нам использовать сетку Bootstrap,
чтобы указать, как эти формы будут выложены объявление, поэтому я буду применять col-md-2.
Вы можете видеть, что я применил классы столбцов md-2 к этому конкретному элементу.
Таким образом, этот пункт в форме будет занимать два столбца.
Итак, внутри этого элемента формы,
мы разделили каждую строку на 12 столбцов.
Итак, потому что мы уже использовали строку для div,
так что это предоставит нам 12 столбцов внутри div.
Кроме того, я должен применить метку формы класса col к этому.
Итак, это то, что позволяет мне указать ярлык здесь.
Итак, для этой метки
я заполню метку как имя, а затем закрою тег метки.
Таким образом, этот тег метки позволяет мне дать метку,
которая будет занимать два левых столбца в этой конкретной строке.
С правой стороны, я собираюсь использовать другой div, который класс применялся как col-md-10.
Обратите внимание, что более ранняя метка использовала col-md-2.
Итак, для этого div
я собираюсь применить col-md-10 там.
И затем внутри этого div
я собираюсь применить элемент ввода,
который имеет тип текста.
Итак, если вы знакомы с формами из HTML,
вы увидите, что мы используем элементы формы из HTML, чтобы
создать эту форму здесь, так что поле ввода здесь текста типа.
Теперь, вот где мы собираемся применить классы Bootstrap к этому,
и соответствующий класс Bootstrap для этого
является элементом управления формой, а затем я могу указать
идентификатор для этого как имя.
Итак, обратите внимание, что этот идентификатор соответствует этой метке для div.
Итак, имя, а затем имя как
имя, а также я укажу
заполнитель для этого, поэтому позвольте мне использовать следующую строку здесь,
заполнитель, поскольку, я уверен, из ваших знаний HTML,
вы понимаете, как эта спецификация выполняется здесь.
Таким образом, с этим, мы теперь создали наш первый элемент формы в нашей форме.
Давайте посмотрим на веб-страницу.
Перейдя на нашу веб-страницу, теперь вы можете увидеть, как добавление в форму элементов создало
это текстовое поле ввода и метку на левой стороне.
Теперь я собираюсь добавить в другую строку с фамилией.
Возвращаясь к моему contactus.html,
позвольте мне просто скопировать эту часть, а затем вставить ее во второй div здесь,
а затем войти и отредактировать ее.
С имени я меняю это на фамилию.
Убедитесь, что все изменения выполнены правильно.
Даже одно отсутствие неправильного редактирования,
приведет к тому, что ваша форма не будет работать правильно, поэтому убедитесь, что
все имена здесь заменены моей фамилией.
Итак, фамилия,
элемент управления текстовой формой md-10.
Идентификатор здесь должен быть фамилией, а имя также должно
быть фамилией, а заполнитель
снова фамилия, поэтому это должно добавить во второй строке с фамилией.
Перейдя на веб-страницу,
вы можете увидеть, как форма
медленно становится в форму, так что у вас есть имя и фамилия.
Теперь давайте добавим в входные элементы.
Мы увидим, как это работает, когда мы добавляем в код.
Переходя сейчас к следующей части упражнения,
здесь мы добавим еще два поля в
нашу форму здесь для ввода номера телефона и идентификатора электронной почты.
Поскольку основная структура кода похожа
на имя и фамилию, которые вы уже добавили в форму,
поэтому я просто собираюсь скопировать код из имени и фамилии,
а затем вставить его здесь, а затем изменить код соответственно.
Итак, я вставил код от имени и фамилии здесь.
Давайте продолжим и теперь изменим это, чтобы превратить его в поля, которые позволяют
пользователю вводить номер телефона и идентификатор электронной почты.
Итак, для номера телефона,
так вот у нас уже есть имя и фамилия выше.
Итак, третий, я собираюсь изменить это на метку «telnum».
Итак, это из номера телефона, а затем классов,
я собираюсь применить класс col-12 к этому говоря, что эта метка будет в
своем собственном розыгрыше, когда форма отображается на дополнительных маленьких или маленьких размерах экрана.
И затем, для среднего и более высокого размера экрана,
это будет отображаться в двух столбцах
этой конкретной строки здесь, так что это изменение, которое мы сделаем там.
А затем, сама этикетка,
позвольте мне изменить, что контактный номер телефона, связаться по тел.
Теперь, сам номер телефона,
мы позволим пользователю ввести его как две части: одна,
которая является кодом города, а вторая,
которая будет фактическим номером телефона.
Итак, я собираюсь взять эту часть кода,
которая была полем ввода, которое у нас было для
имени, а затем создать еще один ниже здесь,
который я собираюсь использовать для самого телефонного номера.
И теперь мы превратим эту первую в поле для ввода кода города.
Вы также можете использовать его, например,
для кода страны, если это то, что вы хотите поместить в форму.
Итак, для самого кода области
я собираюсь подать заявку на div,
классы = «col-5 col-md-3 здесь».
Итак, обратите внимание, что для среднего экрана
у нас есть два столбца, занятые меткой,
три столбца заняты самим кодом области, а
остальные семь столбцов я дам его текстовому полю здесь.
Итак, аналогичным образом, для кода области я говорю col five.
Таким образом, для дополнительных маленьких или маленьких экранов это будет занимать
пять столбцов, а затем для остальных семи столбцов,
мы позволим телефонному номеру питать себя занятым в.
Итак, позвольте мне изменить следующий на col-7 и col-md-7 здесь.
Теперь это поле я изменю это на tel,
введите тип tel для номера телефона, а класс - элемент управления формой,
идентификатор - код области, а имя - код области, а затем заполнитель,
я изменю это на код области.
И следующая часть,
мы изменим этот тип tel и ID telnum,
имя telnum и заполнитель,
сам, будет номер tel.
Таким образом, это сформирует поле телефонного номера,
которое будет введено как две части:
код города и номер телефона.
Итак, мы используем, опять же,
классы столбцов для того, чтобы структурировать, как
две части поля ввода отображаются в форме там.
Теперь последний, конечно,
это было бы для идентификатора электронной почты, поэтому метка,
я превращаю это в идентификатор электронной почты, а затем сама метка
- это электронная почта, а тип ввода - электронная почта.
Теперь мы меняем тип электронной почты,
который разрешен в HTML, так что позже, если нам нужно сделать проверку формы,
то мы знаем, что это поле должно содержать
только тип записи электронной почты там, и идентификатор,
сам, идентификатор электронной почты и имя электронной почты ID и заполнитель.
Электронная почта. Вот оно.
Давайте сохраним изменения и посмотрим на обновленную форму.
Перейдя к форме в браузере,
вы теперь увидите две дополнительные строки, добавленные в нашу форму.
Имя и фамилия добавляются в предыдущей части упражнения.
Итак, здесь у нас есть контактный номер телефона,
который разделен на код города и номер телефона.
Обратите внимание, как мы использовали классы столбцов, чтобы разместить эти два в
самой форме, а затем поле электронной почты здесь.
Давайте посмотрим на то же самое на очень маленьком экране.
Таким образом, когда вы переходите на дополнительный маленький размер экрана,
вы заметите, как сама форма выложена.
Вы увидите, что метка находится сверху, а затем само поле внизу.
Итак, имя, фамилия.
Обратите внимание, как
поля ввода номера контактного телефона позиционируются с использованием классов столбцов,
поэтому код города здесь,
номер телефона,
а затем идентификатор электронной почты здесь.
Теперь мы продолжим упражнение.
Продолжая в следующем шаге,
мы добавим в флажок, а затем мы добавим в выбор два или четыре.
Чтобы добавить флажок,
давайте просто скопируем эту группу форм здесь, так что мы добавим его как другую строку здесь,
а затем добавим в группу форм div здесь,
а затем закроем div здесь.
И затем внутри этой строки группы формы,
так что это дает нам еще одну строку в форме.
Поэтому внутри этой строки группы форм
позвольте мне сначала добавить флажок.
Итак, чтобы сделать это, мы добавим div с классом = «col-md-6»,
чтобы вы увидели, что это займет
шесть столбцов в среднем
и очень большом размере экрана, а затем offset-md-2, так что это сместит его
вправо на два столбца, а затем отобразит флажок там.
Теперь, внутри здесь, чтобы добавить флажок,
мы скажем div с классом = «form-check», а
внутри этого класса проверки формы мы добавим тип ввода = «checkbox»
и класс = «form-check-input», а затем позвольте мне перейти к следующей строке, а затем
сказать имя = «approbe» и
идентификатор = «approbe» и значение - это пустая строка.
И к этому флажку
добавим метку.
Итак, чтобы добавить метку,
мы пойдем и добавим в
класс label = «form-check-label», а затем
эта метка для этого флажка, который мы только что добавили.
Итак, вот почему мы скажем для="утвердить», так что обратите внимание, что для флажка
мы дали имя и идентификатор как утверждение, поэтому здесь,
мы сохраним для метки для утверждения.
И затем внутри этой этикетки
мы будем указывать содержимое как «Можем ли мы связаться с вами?»
А потом сохраним изменения и пойдем и взглянем на нашу форму.
Перейдя на веб-страницу,
теперь вы можете увидеть, что мы добавили в флажок вместе с меткой здесь и обратите внимание,
что эта метка выделена жирным шрифтом из-за использования там «сильного» тега,
и мы сделали offset-md-2.
Вот почему мы нажимаем этот флажок на этом пути.
Здесь нет метки, но вместо этого это толкается прямо здесь,
так что это причина использования offset-md-2 здесь,
и этот занимает md-6, поэтому здесь шесть столбцов.
Мы еще не закончили с этим.
Я собираюсь добавить в следующую часть здесь,
которая является полем выбора там.
Поэтому я применим еще один div здесь с
классом = «col-md-3 offset-md-1» здесь.
И внутри этого div
я собираюсь определить выбор.
Итак, опять же, из ваших знаний HTML,
вы знаете, что делает выбор для вас.
Теперь выбор будет применять элемент
управления формы классов, так что это класс Bootstrap, который я применяю к выбору здесь,
и закрыть выбор.
И внутри здесь мне нужно дать варианты выбора.
Итак, я использую простой выбор здесь,
и поэтому первый из них - вариант
для телефона или электронной почты и закрыть опцию.
Таким образом, это создает элемент select в моей форме,
который имеет два варианта:
телефон и электронная почта, поэтому
давайте сохраним изменения.
Взглянув на нашу веб-страницу,
вы можете увидеть, как теперь здесь создается окно выбора телефона и электронной почты, так что это
позволяет мне выбрать, какой из них делать, а затем вы также можете установить флажок, как это.
Таким образом, это заканчивает следующую строку.
Добавим еще в одну строку,
что позволит пользователю фактически вводить свои отзывы.
Итак, я буду использовать текстовую область для форматирования этого.
Для следующего я собираюсь использовать текстовую область.
Итак, что я собираюсь сделать, так это я просто собираюсь пойти вверх и скопировать эту часть письма.
Я слишком ленив, чтобы все время печатать.
Итак, я склонен делать вырезать и вставлять везде, где это возможно, но для этого
ярлык должен быть обратной связью и меткой формы столбца,
а затем фактический текст: «Ваша обратная связь здесь».
Так вот этикетка.
А затем, здесь, второй,
я собираюсь отформатировать этот.
Вместо типа ввода
я собираюсь изменить это на текстовую область,
а затем мне не нужен тип там.
Текстовая область, класс по-прежнему является элементом управления формой, а идентификатор является обратная связь.
Имя - это обратная связь, и заполнитель
здесь не нужен, и вместо этого измените его на сколько строк я
хочу дать из обратной связи для текстовой области?
Так что я скажу 12 строк, а затем закрою текст.
Поэтому обратите внимание, как я включил текстовое поле в свою форму.
Сохраните изменения.
Взгляни. Перейдя на мою веб-страницу,
теперь вы видите, что моя форма принимает свою полную форму здесь.
У вас есть имя, фамилия,
телефон, адрес электронной почты, а затем обратная связь.
Текстовая область из 12 строк.
Теперь вам понадобится кнопка, которую пользователь должен нажать, чтобы отправить свой отзыв.
Итак, давайте добавим в кнопку отправки в эту форму.
Возвращаясь к форме снова,
создайте еще одну строку здесь, используя
div здесь с строкой группы форм
здесь, и внутри здесь я собираюсь добавить кнопку здесь.
Итак, я бы сказал, div
class = «offset-md-2", потому что я хочу, чтобы моя кнопка
располагалась прямо под всеми теми полями, которые
у меня есть здесь, поэтому для метки используются два левых столбца.
Таким образом, кнопка отправки не нуждается в метке, поэтому я просто собираюсь нажать
ее справа здесь, а затем я бы
сказал «col-md-10», чтобы это заняло оставшиеся 10 столбцов там.
И затем внутри этих div,
я собираюсь добавить туда кнопку.
Таким образом, когда вы добавляете кнопку в свою форму,
используйте тег кнопки здесь с типом submit.
Итак, это кнопка отправки для вашей формы там и класса.
Помните классы кнопок, кнопка первичная,
так что это создаст темно-синюю кнопку в вашей форме, а
затем закроет кнопку там,
а затем я просто войду и внутри кнопки,
я дам имя как «Отправить отзыв», а затем сохраню изменения.
Теперь наша форма заполнена.
Итак, давайте взглянем на окончательный вариант нашей формы.
Перейдя на нашу веб-страницу,
вы можете увидеть заполненную форму.
Все эти поля мы уже видели,
кнопка внизу с надписью «Отправить
отзыв» и темно-синяя кнопка из-за использования кнопки «первичный».
Таким образом, это завершает форму, которую мы хотели создать на нашей веб-странице.
С этим мы завершаем это упражнение,
где мы видели, как мы можем построить форму и включить ее в нашу веб-страницу.
Вы будете работать с формами в некоторых из
последующих упражнений, включая ваше второе задание.
Это хорошее время для вас, чтобы сделать хороший комментарий с формами сообщений.