Урок №10. Формы HTML(часть 2).

Содержание урока:

Поле многострочного текста
Раскрывающиеся списки
Надписи
Общий пример
Форма обратной связи(PHP)


 

Поле многострочного текста

Для текстов с большим количеством символов, например для сообщений, или комментариев, удобно использовать именно поле многострочного текста.

Поле многострочного текста создается тегом <textarea></textarea>.

Атрибуты тега <textarea>:

    name — задает имя поля.

    cols — задает ширину поля в символах.

    rows — задает количество строк текста, видимых на экране.

    wrap — задает способ переноса слов, значения атрибута таковы:

             off — переноса не происходит.

             virtual — перенос отображается, но на сервер поступает неделимая строка.

             physical — перенос и на экране и при поступлении на сервер.

    disabled — неактивное поле.

    readonly — разрешено только чтение.

Пример:

    <form name="forma1">

      <textarea cols="25" rows="4" wrap="off"></textarea><br>

      <textarea cols="40" rows="6" wrap="virtual"></textarea><br>

      <textarea cols="50" rows="8" wrap="physical"></textarea>

    </form>

 

Результат:



Введите текст в формы, и Вы, увидите, как работает атрибут переноса (wrap).

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


Раскрывающиеся списки.

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

И те и другие задаются с помощью тега <select></select>, между этих тегов задаются значения, которые задаются с помощью тега <option>.

Атрибуты тега <select>:

         name — задает имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега .

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

         multiple — разрешает выбор нескольких элементов списка. При выборе нескольких элементов списка необходимо удерживать клавишу ctrl.

Атрибуты тега <option>:

         selected — им помечают наиболее вероятный для выбора элемент списка, если список с множественным выбором, то можно пометить несколько пунктов.

         value — значение, которое будет отправлено серверу, если пункт выбран.

 

Пример:

    <form name="forma1">

Какой язык вы хотите изучать:

      <select name="language" size="1">

        <option selected value="english">Ангийский

        <option value="china">Китайский

        <option value="japan">Японский

      </select><br><br>


Какое время вы готовы на это потратить:<br>

      <select name="time" size="3">

        <option selected value="3">3 месяца

        <option value="6">6 месяцев

        <option value="1">1 год и больше

      </select><br><br>


Какие дни недели для занятий вас устроят:<br>

(выбирайте с нажатой клавишей ctrl)<br>

      <select name="day" size="7" multiple>

        <option selected value="mon">понедельник

        <option value="tue">вторник

        <option value="wen">среда

        <option selected value="thu">четверг

        <option value="fri">пятница

        <option value="sat">суббота

        <option value="san">воскресенье

      </select>

    </form>

 

Результат:

Какой язык вы хотите изучать:

Какое время вы готовы на это потратить:


Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)

Дополнительным и очень полезным для формирования списков является тег <optgroup></optgroup>. Он позволяет группировать элементы списка по признакам.

Атрибут тега <optgroup>:

        Label – задает названия группе элементов.

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

 

Пример:

    <form name="forma1">

Каталог:<br>

      <select name="catalog" size="9">


        <optgroup label="Аксессуары">

          <option value="1">Наушники</option>

          <option value="2">Чехлы</option>

          <option value="3">Карты памяти</option>

        </optgroup>


        <optgroup label="Бытовая техника">

          <option value="4">Холодильники</option>

          <option value="5">Плиты</option>

          <option value="6">Вытяжки</option>

        </optgroup>


        <optgroup label="Телефоны">

          <option value="7">Смартфоны</option>

          <option value="8">Кнопочные телефоны</option>

          <option value="9">Офисные телефоны</option>

        </optgroup>


      </select>

    </form>

 

Результат:

Каталог:

Как видно из примера, обязательным является закрывающий тег </option>, иначе список будет работать некорректно.

Ну и в завершении этого урока, вот Вам пример всего выше изложенного:

    <form name="forma1">

      <table border="0" cellspacing="6" cellpadding="8">

      <caption>Форма регистрации аккаунта:</caption>

      <tr>

        <td align="right" valign="top">Ваше имя</td>

        <td><input type="text" name="name" size="16"maxlength="16"></td>

      </tr>


      <tr>

        <td align="right" valign="top">Ваш e-mail</td>

        <td><input type="text" name="e-mail" size="30" maxlength="30"></td>

      </tr>


      <tr>

        <td align="right" valign="top" >Ваш пароль</td>

        <td><input type="password" name="password" size="12" maxlength="12"></td>

      </tr>


      <tr>         <td align="right" valign="top">Повторите ввод пароля</td>

        <td><input type="password" name="password2" size="12" maxlength="12"></td>

      </tr>


      <tr>

        <td align="right" valign="top" >Укажите контактный номер телефона(Номер указывать с +38):</td>

        <td><input type="text" name="phone" size="12" maxlength="12"></td>

      </tr>


      <tr>

        <td align="right" valign="top">Ваш главный приоритет в жизни:</td>

        <td>

        <select name="hobby" size="7" multiple>

         <option selected value="1">компьютеры

         <option value="2">спорт

         <option value="3">животные

         <option value="4">автомобили

         <option value="5">клубы

         <option value="6">музыка

         <option value="7">семья

        </select>

       </td>

      </tr>


      <tr>

        <td align="right" colspan="2">

         <input type="submit" name="submit" value="Отправить">

         <input type="reset" name="reset" value="Очистить">

        </td>

      </tr>

      </table>

    </form>

 

Результат:

Форма регистрации аккаунта:
Ваше имя
Ваш e-mail
Ваш пароль
Повторите ввод пароля
Укажите контактный номер телефона(Номер указывать с +38):
Ваш главный приоритет в жизни:

 

Ну, вот и все, попробуйте форму в действии и приступайте к изучению следующего урока.

Удачи.

 

Закрыть меню