Посібник новачка з HTML5 & CSS3 – об'ємні форми в HTML5 - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування
УКР
  • РУС
  • УКР

    Вибери свою IT спеціальність

    Підписка
    УКР
    • РУС
    • УКР
    Arrow
    27 березня відбудеться вебінар «Підготовка до співбесіди з PHP» Подробиці і реєстрація
    Arrow

    Посібник новачка з HTML5 & CSS3 – об'ємні форми в HTML5

    advertisement advertisement

    Введение

    К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату.


    Нет сомнений, на сегодняшний день веб-формы – необходимая часть любого веб-сайта. По существу, данная форма – это HTML-документ, состоящий из различных элементов и атрибутов. Теперь рассмотрим создание HTML5 форм.

    Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5. 

    Окно браузера

    Основы создания формы

    index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end.

    <!DOCTYPE html>

    <html>

    <head>

        <title>Formidable Form with HTML5title>

    head>

    <body>

        <div class="container">

            <header>

                <h1>Formidable Form with HTML5h1>

            header>

            <div class="form">

               

               

            div>

        div>

    body>

    html>

    Приступайте к работе с HTML формой

    HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных:

    1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit.

    2. Текстовая область и выпадающие списки.

    Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label.

    В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.

    Результат

     

     

    Как продемонстрировано, код для формы мы включаем между тегами и .

    имеет три атрибута:
    • Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS.
    • Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода.
    • Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post.

    Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге.

    <input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута. 

    Изменение заголовка

    Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте.

    Форма в браузере

    Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега

    . В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html.

    Данные на экране

    Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом:

    Это то, как данные передаются к странице получения, когда в теге определяется значение get.

    maxlength

    Вы можете добавить атрибут maxlength к элементу , чтобы ограничить вводимое пользователем количество символов.

    <input maxlength="10">

    Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов.

    Добавьте выделенный код в index.html. Это создаст два поля пароля. Когда Вы введете текст в эти поля, Вы увидите, что каждый символ был превращен или в звездочку, или в круг.

    Использование тега input

    Тег <input type="radio"> –  тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может  выбрать только один из них в группе.

    Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.

    Тег input type=radio

     

    and

    Тег

    используется, чтобы сгруппировать связанные элементы в форме, создавая рамки вокруг них. Тег используется, чтобы определить заголовок для этой рамки.

    Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender".

    Тег fieldset

    Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком.

    Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу.

    Атрибут ckeckbox

    Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл.

    Добавьте выделенный код в index.html. Это создаст кнопку загрузки, где пользователь может щелкнуть, чтобы выбрать файл и загрузить его.

    Атрибут file

    Таким образом можно без проблем создать свою форму с помощью HTML5.

    Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with

    КОМЕНТАРІ ТА ОБГОВОРЕННЯ
    advertisement advertisement

    Купуй передплатуз доступом до всіх курсів та сервісів

    Бібліотека сучасних IT знань у зручному форматі

    Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

    Стартовий
    • Усі відеокурси на 3 місяці
    • Тестування з 10 курсів
    • Перевірка 5 домашніх завдань
    • Консультація з тренером 30 хв
    59.99 $
    Придбати
    Весняний
    • Усі відеокурси на 15 місяців
    • Тестування з 24 курсів
    • Перевірка 20 домашніх завдань
    • Консультація з тренером 120 хв
    90.00 $
    219.99 $
    Придбати
    Акція
    Преміум
    • Усі відеокурси на 12 місяців
    • Тестування з 24 курсів
    • Перевірка 20 домашніх завдань
    • Консультація з тренером 120 хв
    169.99 $
    Придбати
    Notification success