Використання форм у HTML - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

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

    Почати безкоштовно

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

    Почати безкоштовно

      Використання форм у HTML

      advertisement advertisement

      Введение

      Формы используются для сбора информации, внесенной пользователем. Введенные данные взаимодейстуют с веб-приложениями, например, или когда нужно отправлять информацию в Интернет.

      Формы сами по себе не очень полезные. Вместе с языком программирования их используют для обработки информации, введенной пользователем. Эти разнообразные скрипты нуждаются в других языках, отличающихся от HTML и CSS.

      Теги  forminputtextareaselect и optionбазовые теги для форм в HTML.


      Form

      Тег form формирует такой себе «бланк». Если используется пользовательская форма для отправки данных, то нужно описать атрибут action для указания, куда контент будет отправлен.

      Атрибут method указывает форме, как данные будут отправляться на сервер, также имеет дефолтное   значение get, а также post, что фактически незаметно передает информацию о форме.

      Get применяется для более коротких участков неконфиденциальной информации с сайта. Например, поиск будет отображаться в адресе страницы результатов поиска. Значение post - для более продолжительных, более защищенных материалов, таких как контактные формы, например.

      Вот элемент формы будет выглядеть примерно так:

          <form action="processingscript.php" method="post">

          form>

      Input

      Тег Input  - чуть ли не важнейшее в формах. Он может принимать огромное число значений, самые распространенные:

      <input type=”text”> или просто <input- стандартное текстовое поле. Также может иметь атрибут value, что превращает исходный текст в textbox.

      <input type=”password”> - похожий на textbox, однако символы скрыты от пользователя.

      <input type=”checkbox”> - кнопка с флажком, пользователь может задать режим вкл/выкл. Также может иметь атрибут checked ( <input type=”checkbox” checked> ), делает флажок «включенным».

      <input type=”radio”> - похожий на checkbox, пользователь может выбрать только одну радиокнопку из группы. Также может иметь атрибут checked.

      <input type=”submit”> - кнопка, что отправляет форму. Пользователь может изменять исходный текст формы через атрибут value, например 

      <input type="submit" value="Ooo. Look. Text on a button. Wow">

      Обратите внимание на то, что тег input как и img, и br не имеет закрывающегося тега.

      Textarea

      Textarea – по сути, большое многострочное текстовое поле. Через атрибуты rows и cols задается число строк и столбцов соответственно, хотя можно управлять размером поля через CSS.

      <textarea rows="5" cols="20">A big load of texttextarea>

      Select

      Тег Select в паре с option создает выпадающий список.

          <select>

              <option>Option 1option>

              <option>Option 2option>

              <option value="third option">Option 3option>

          select>

      Выбранное значение отправляется при подтверждении формы. Этим значением будет текст, заключенный в тег option, но будет отослано значение атрибута value, если он явно задан. Так, из примера выше, если выбран первый пункт, «Option 1» будет отправлено, если же третий -

      Тег option может иметь атрибут selected, аналогично как checked для checkbox и радиокнопок. Например, <option selected>Rodentoption> будет изначально выбран вариант “Rodent”.

      Names

      Все вышеописанные теги будут красиво размещаться на странице, но, если подключить скрипт для обработки формы – все они будут проигнорированы. Так случится потому, что поля формы должны иметь уникальные имена. Так что нужно добавить атрибут name во все поля:

      <input type="text" name="talkingsponge">

       

      Пример формы:

      <form action="contactus.php" method="post">

              <p>Name:p>

              <p>

                  <input type="text" name="name" value="Your name">p>

              <p>Comments: p>

              <p>

                  <textarea name="comments" rows="5" cols="20">Your commentstextarea>p>

              <p>Are you:p>

              <p>

                  <input type="radio" name="areyou" value="male">

                  Malep>

              <p>

                  <input type="radio" name="areyou" value="female">

                  Femalep>

              <p>

                  <input type="radio" name="areyou" value="hermaphrodite">

                  An hermaphroditep>

              <p>

                  <input type="radio" name="areyou" value="asexual">

                  Asexualp>

              <p>

                  <input type="submit">p>

          form>

      Источник: http://www.htmldog.com/guides/html/beginner/forms/

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

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.