HTML Урок 7. Создание форм в html

Цель урока: Создание и работа с формами в html. Изучение основных элементов формы

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

1
2
3
4
5
<form action="file.php" method="post" id="form">
...
содержимое формы
...
</form>
  • Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.
  • Атрибуты формы:

    action (англ. «действие»)
    Файл на сервере с кодом для отработки отосланных данных
    action="http://www.название.домен/имя программы"
    enctype (англ. «тип кодировки») text/plain (обычный текст)
    application/x-www-dorm-urlencoded (для метода Post отправки формы)
    multipart/form-data (для метода Post, если прикрепляются файлы)
    method (метод отправки данных) post
    get
    • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
    • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
    • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.

    Элементы формы html

    • Текстовое поле html:
    • <input type="text" name="login" size="20" value="Логин" maxlength="25">

      Текстовое поле html

      Результат:

      • Значение атрибута type text — указывает на то, что это именно текстовое поле
      • size — размер текстового поля в символах
      • maxlength — максимальное кол-во вмещающихся в поле символов
      • value — первоначальный текст в текстовом поле
      • name — имя элемента, необходимо для обработки данных в файле-обработчике
    • Поле ввода пароля html:
    • <input type="password" name="pass" size="20" value="Пароль" maxlength="25">

      Поле ввода пароля html
      Результат:


      Вместо текста в поле отображается маска — звездочки или кружочки

    • Кнопка submit html:
    • <input type="submit" value="Отправить данные">

      Кнопка submit html

      Результат:

      Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

    • Кнопка очистки формы html:
    • <input type="reset" value="Очистить форму">

      Кнопка очистки формы html

      Результат:
      Кнопка очистки формы html
      Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

    • Html флажок:
    • <input type="checkbox" name="asp" value="yes">ASP<br>
      <input type="checkbox" name="js" value="yes" checked="checked">javascript<br>
      <input type="checkbox" name="php" value="yes">PHP<br>
      <input type="checkbox" name="html" value="yes" checked="checked">HTML<br>

      флажок
      Результат:

      ASP
      javascript
      PHP
      HTML

      В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа

      Атрибут checked устанавливает сразу элемент отмеченным

    • Radio кнопка html:
    • <input type="radio" name="book" value="asp">ASP<br>
      <input type="radio" name="book" value="js">Javascript<br>
      <input type="radio" name="book" value="php">PHP<br>
      <input type="radio" name="book" value="html" checked="checked">HTML<br>

      radio кнопка html

      Результат:

      ASP
      Javascript
      PHP
      HTML

      radio кнопка html служит для единственного выбора из нескольких вариантов

      Атрибут checked устанавливает сразу элемент отмеченным

    Важно: Для элементов radio необходимо, чтобы значение атрибута name у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться

    Выпадающий список HTML

    Рассмотрим пример добавления выпадающего списка:

    1
    2
    3
    4
    5
    6
    
    <select name="book" size="1">
    	<option value="asp">ASP</option>
    	<option value="js">JavaScript</option>
    	<option value="php">PHP</option>
    	<option value="html" selected="selected">HTML</option>
    </select>

    Результат:

    выпадающий список html

    • Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option, внутри которого отображается текст пункта
    • Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
    • Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

    выпадающий список пример

    Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    <select name="book" size="1">
    	<optgroup label="Английские">
    		<option value="asp">ASP</option>
    		<option value="js">JavaScript</option>
    		<option value="php">PHP</option>
    		<option value="html" selected="selected">HTML</option>
    	</optgroup>
    	<optgroup label="Русские">
    		<option value="asp_rus">ASP по-русски</option>
    		<option value="js_rus">JavaScript по-русски</option>
    	</optgroup>
    </select>

    выпадающий список с подзаголовками
    Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple. Но в таком случае и атрибут size следует установить в значение, большее, чем 1:

    <select name="book" size="4" multiple="multiple">
    ...

    несколько пунктов выпадающего списка html

    Текстовая область в HTML

    Для ввода большого фрагмента текста служит элемент текстовая область:

    <textarea name="description" cols="30" rows="10">Текст</textarea>

    textarea
    Результат:

    текстовая область html

    • Ширина элемента зависит от атрибута cols, который указывает сколько символов помещается по горизонтали
    • Атрибут rows определяет количество строк в элементе

    Другие элементы

    • Обычная кнопка
    • <input type="button" value="что-то сделать">

      html кнопка

    • Элемент кнопка-изображение
    • <input type="image" width="32" height="32" src="1.png">

      Результат:

    • Элемент загрузка файла
    • Для прикрепления файла к форме существует специальный элемент управления:

      <input type="file" name="userfile" size="20">

      Результат:

      При его использовании значение кодировки формы (атрибут enctype у тега form) должен иметь значение multipart/form-data
      элемент файл

    • Скрытое поле
    • Важным элементом при программировании является скрытое поле. Поле не отображается в окне браузера, а призвано передавать дополнительные данные через форму в файл-обработчик.

      <input type="hidden" name="uid" value="15362">

    Дополнительные элементы и атрибуты

    • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:
    • <input type="checkbox" id="book1">
      <label for="book1">ASP</label>

      В примере создана надпись (тег label) для элемента checkbox. Привязка осуществляется через атрибут id, значение которого указано в атрибуте for надписи.

      Результат:

      тег label

    • Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:
    • <input type="text" name="login" size="20" value="Логин" maxlength="25" disabled="disabled"><br>
      <input type="checkbox" name="asp" value="yes">ASP<br>
      <input type="checkbox" name="js" value="yes" checked="checked"  disabled="disabled">javascript<br>

      атрибут disabled html

      блокировка элемента html

      Результат:

    • Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):
    • <input type="text" name="login" size="20" value="Логин" 
      maxlength="25" readonly="readonly">

      только для чтения html

      Результат:

    • Для визуального оформления группы объектов можно использовать элемент fieldset:
    • <fieldset>
      <legend>Книги</legend>
      <input type="checkbox" value="html">HTML<br>
      <input type="checkbox" value="asp">ASP<br>
      <input type="checkbox" value="js">javaScript<br>
      </fieldset>

      рамка для элементов html

      Результат:

      группировка элементов html

    • Можно задать очередность передвижения по элементам клавишей TAB:
    • <элемент tabindex="1">

      Элемент будет первым в очереди переходов.

    Задание: Необходимо создать анкету web-разработчика согласно изображению. Элементы располагать в табличном виде
    html элементы управления

    Поделитесь уроком с коллегами и друзьями:

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить