Урок №9. Формы HTML

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

Поле для ввода текста/пароля.
Тег флажка.
Переключатели.
Тег кнопки.
Поле для файлов.


 

Формы, это специальная разметка, для получения нужной информации от пользователя. Уверен, Вы сталкивались и не один раз с тестами, опросами и голосованиями на других сайтах. Что бы сделать такой тест, опрос или даже примитивную форму заказа — нужны ФОРМЫ.

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

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

Что бы задать начало и конец формы существует тег <form></form>. Именно в этом теге будет размещаться вся разметка таблицы с ее функционалом.

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

        name — задает имя формы. Необходимо, если на странице несколько форм.

        action – указывает путь к скрипту или программе, которая обрабатывает информацию.

        method — определяет способ отправки информации.

        target — указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.

Приступим!

 


 

Поле для ввода текста/пароля.

 Обычное поле с одной строкой, в которой вписывается и редактируется текст. Данное поле задается тегом <input>.

Пример:

 

    <form name="forma1">

    <input type="text" name="text1" size="20" maxlength="50" value="Введите текст">

    </form>

 

Результат:

 

 

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

        name -задает имя элемента.

        type – задает тип элемента, возможные значения – text или password.

        size — размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться.

        maxlength – максимально допустимое количество символов, которое можно ввести в поле. По умолчанию количество символов неограничено.

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

 

Пример:

 

    <form name="forma1">

      <input type="text" name="login" size="16" maxlength="14" value="Введите логин">

      <input type="password" name="pass" size="16" maxlength="14" value="Введите пароль" >

    </form>

 

Результат:

При значении атрибута type="text" символы будут отображаться как обычно.
При значении атрибута type="password" символы будут заменены на *.

 


 

 

Тег флажка.

Я уверен, что каждый из посетителей этой страницы сталкивался с подобной формой:

Какие страны Вы хотите посетить:
Америка
Англия
Новая Зеландия
Австралия

 

Данная форма задается все тем же тегом <input>, каждый тег задает новый флажок, количество тегов = количеству флажков.

Пример:

    <form name="forma1">

    Какие страны Вы хотите посетить:<br>

      <input type="checkbox" name="land1" value="usa" checked> Америка<br>

      <input type="checkbox" name="land2" value="uk"> Англия<br>

      <input type="checkbox" name="land3" value="new zealand"> Новая Зеландия<br>

      <input type="checkbox" name="land4" value="Australia"> Австралия

    </form>

 

Атрибуты:

        type — задает тип элемента (в данном случае — checkbox).

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

        value — значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь. В нашем примере выбран пункт английский, следовательно, программа-обработчик получит: land1=»usa».

        checked — им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

 


 

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

Отличается от флажков тем, что позволяет выбрать только один ответ пользователя.
Атрибуты у переключателей идентичны атрибутам у флажков, за исключением значения атрибута type.
Вместо значения checkbox(как у флажков) прописываем значение radio.

Именно с помощью type="radio" форма не позволяет выбрать несколько вариантов ответа.

Пример:

    <form name="forma1">

      Укажите ваш цвет глаз:<br>

        <input type="radio" name="eye" value="curry" checked>Карие<br>

        <input type="radio" name="eye" value="blue"> Голубые<br>

        <input type="radio" name="eye" value="green"> Зеленые

    </form>

 

Результат:

Укажите ваш цвет глаз:
Карие
Голубые
Зеленые

 


 

Тег кнопки.

Вы, не раз встречали, например формы регистрации, в которых присутствуют кнопки: «Зарегистрироваться»,«Проверить логин»«Получить код». Создавать эти кнопки довольно легко.

Задается тем же тегом <input>, с атрибутами кнопок Вы знакомы из предыдущих уроков.

Существует четыре вида кнопок:

submit — кнопка отправки содержимого формы web-серверу. Ее атрибуты:

 

        type="submit" — задает тип кнопки.

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

        value – задает надпись на кнопке.

image — визуализированная кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки. Ее атрибуты:

         type="image" — задает тип графической кнопки.

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

        src — задает адрес картинки для кнопки.

 

reset — кнопка, позволяющая сбросить или восстановить все значения по умолчанию в форме. Ее атрибуты:

        type="reset" — задает тип кнопки сброса.

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

        value — задает надпись на кнопке.

 

button — кнопка без определенного действия, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее атрибуты:

        type="button" — задает тип кнопки.

        name — задает имя кнопки

        value — задает надпись на кнопке.

        onclick — указывает, что делать при щелчке по кнопке.

 

Если на форме несколько кнопок, то они должны иметь разные названия.

Пример:

    <form name="forma1">

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

        <input type="image" name="knopka_img" src="knopka.png" width="100px" height="60px">

        <input type="reset" name="reset" value="Сбросить">

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

    </form>

 

Кнопки еще можно задавать с помощью тега <button></button>. Ассортимент возможностей у данного способа несколько шире. Кнопки могут иметь содержимое в виде декоративного текста или картинок.

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

    type — тип кнопки, может принимать значения:

            reset — кнопка очистки формы.

            submit — кнопка отправки данных.

            button — кнопка произвольного действия.

    name — имя кнопки.

    value — надпись на кнопке.

Пример:

    <form name="forma1">

      <button name="submit" type="submit">

        <font size="5" color="red"> Отправить </font>

      </button>

    </form>

 

Результат:

 


 

Поле для файлов.

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

Пример:

    <form name="forma1">

        <input type="file" name="load" size="50">

    </form>

 

Результат:

Ну, думаю за множеством примеров, приведенных выше, атрибуты Вам объяснять не нужно.

Но есть еще три дополнительных атрибута, которые очень полезны в определенных ситуациях.

Multiple – атрибут, который позволяет загружать одновременно несколько файлов.

Accept – атрибут, который указывает формат загружаемых фалов. По умолчанию ограничений для загружаемых файлов нет.

Возможны значения:

       audio/* — выбор музыкальных файлов любого типа;

       image/* — графические файлы;

       video/* — видеофайлы.

Значения атрибута записываются: тип файла/формат файла.

Required – атрибут, делающий заполняемые поля формы обязательными. Если поле с данным атрибутом будет пустым, браузер выдаст соответствующее сообщение, а форма отправлена не будет.

Детальнее посмотрим на примерах.

Пример атрибута Multiple:

    <form name="forma1">

        <input type="file" name="load" size="50" multiple>

    </form>

 

Результат:

Попробуйте добавить пару файлов.

 

Пример атрибута Accept:

    <form name="forma1">

        <input type="file" name="load" size="50" accept="image/png,image/jpeg">

    </form>

 

Результат:

 

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

 

Пример атрибута Required:

    <form action="программа_обработчик.пхп">

        <p><input name="user" required placeholder="Ваше имя"></p>

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

    </form>

 

Результат:

Увидели незнакомый атрибут?
Атрибут placeholder – отвечает за текст подсказки в поле, так же как и атрибут value.
В отличии от атрибута value атрибут placeholder заменяет текст на «прозрачный», его не нужно удалять, он пропадет при нажатии на поле.

Нужно понимать, что не все браузеры поддерживают данные атрибуты. IE полностью игнорирует multiple и accept, Safari не поддерживает accept. Поэтому в примере выше специально для Firefox установлено значение image/png,image/jpeg. Также учтите странную ошибку в Опере, она не допускает пробелы после запятой внутри accept.

Практикуйтесь. С формами продолжим на следующем уроке. До встречи.

 

Закрыть меню