Лабораторно-практическая работа №4 Использование форм в HTML

Лабораторно-практическая работа №4

Использование форм в HTML

Цель работы: научиться использовать дополнительные элементы оформления Web- страницы

Теоретическая часть

Элемент <form>

<form> является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как <input>, <textarea> или <button>) должны находиться внутри элемента <form>.

Два атрибута HTML необходимы:

· action содержит адрес, который определяет, куда будет отправлена информация формы;

· method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.

·         Текстовые поля

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

Текст	<input type="text">		Допускает любой тип символов
E-mail	<input type="email">		Может показывать предупреждение, если введён неверный email
Пароль	<input type="password">		Символы показываются как точки
Число	<input type="number">		Могут быть использованы клавиши вверх/вниз
Телефон	<input type="tel">		Может сработать автозаполнение
Многострочный текст	<textarea></textarea>		Может быть изменён размер поля

<label>

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

<label>Email</label>

<input type="email">

Флажки

Флажки — это элементы формы, которые имеют только два состояния: включено или выключено. Они в основном позволяют пользователю сказать: «Да» или «Нет» для чего-то.

<input type="checkbox"> Запомнить меня

Переключатели

Вы можете предоставить пользователю список вариантов на выбор с помощью переключателей.

Для работы этого элемента формы, ваш HTML-код должен сгруппировать список переключателей вместе. Это достигается с помощью одного и того же значения для атрибута name:

<label>Семейное положение</label>

<label>

  <input type="radio" name="status">

  Холост

</label>

<label>

  <input type="radio" name="status">

  Женат

</label>

Выпадающие меню

Если количество вариантов для выбора занимает слишком много места, вы можете воспользоваться выпадающими меню <select>.

Они работают подобно переключателям, отличается только компоновка.

<select>

  <option>Январь</option>

  <option>Февраль</option>

  <option>Март</option>

  <option>Апрель</option>

</select>

Пример: полная форма регистрации

<form action="/signup" method="POST">

  <p>

    <label>Обращение</label>

    <label>

      <input type="radio" name="title" value="mr">

      Г-н

    </label>

    <label>

      <input type="radio" name="title" value="mrs">

      Г-жа

    </label>

  </p>

  <p>

    <label>Имя</label>

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

  </p>

  <p>

    <label>Фамилия</label>

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

  </p>

  <p>

    <label>Email</label>

    <input type="email" name="email">

  </p>

  <p>

    <label>Телефон</label>

    <input type="tel" name="phone">

  </p>

  <p>

    <label>Пароль</label>

    <input type="password" name="password">

  </p>

  <p>

    <label>Подтвердите пароль</label>

    <input type="password" name="password_confirm">

  </p>

  <p>

    <label>Страна</label>

    <select name="country">

      <option>Канада</option>

      <option>Франция</option>

      <option>Германия</option>

      <option>Италия</option>

      <option>Япония</option>

      <option>Россия</option>

      <option>Великобритания</option>

      <option>США</option>

    </select>

  </p>

  <p>

    <label>

      <input type="checkbox" name="terms">

      Я согласен с <a href="/terms">условиями использования</a>

    </label>

  </p>

  <p>

    <button>

      Зарегистрироваться

    </button>

  </p>

</form>

Результат:

 

Практическая часть

1.    Создайте веб-документ, который будет являться главной страницей, объединяющей все ранее созданные документы, по следующему образцу:

 Содержание

1. Форматирование текста

2. Организация текста в виде списка

3. Размещение рисунков

4. Представление информации в виде таблиц

5. Формы

2.  Сохраните документ под именем Главная.html.

3.  Разработайте отдельный веб-документ (Формы.html) — предложенную ниже анкету.

Краткое описание документа:

Лабораторно-практическая работа №4

Использование форм в HTML

Цель работы: научиться использовать дополнительные элементы оформления Web- страницы

Теоретическая часть

Элемент <form>

<form> является блочным элементом, который определяет интерактивную часть веб-страницы. Как результат, все элементы управления (такие как <input>, <textarea> или <button>) должны находиться внутри элемента <form>.

Два атрибута HTML необходимы:

• -action содержит адрес, который определяет, куда будет отправлена информация формы;
• method может быть либо GET, либо POST и определяет, как будет отправлена информация формы.