Вы здесь: Главная > HTML > Формы

Формы

Опубликовано автором

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

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

Основные теги в HTML-формате форм: form, input, textarea, select и option.

Основные теги

Тег form

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

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

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

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

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

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

Тег input

Тег input может принимать множество обличий.

<input type="text">

или просто

<input>

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

<input type="password">

похоже на текстовое поле, но символы, введённые пользователем, будут скрыты.

<input type="checkbox">

это флажок, который пользователь может включать и выключать. Он может иметь атрибут checked

<input type="checkbox" checked>

атрибут не требует значения. Он как бы включает начальное состояние флажка.

<input type="radio">

похож на флажок, но пользователь может выбрать только один переключатель в группе. У этого также может быть checked атрибут.

<input type="submit">

это кнопка, которая при выборе отправляет форму. Вы можете управлять текстом, который отображается на кнопке отправки, например, с помощью атрибута value

<input type="submit" value=" Ооо. Посмотрите. Текст на кнопке. Вау">.

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

Тег textarea

Тег textarea по сути, это большое многострочное текстовое поле.

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

<textarea rows="5" cols="20"> Большая простыня текста </textarea>

Любой текст, который вы решите разместить между открывающим и закрывающим тегами (в данном случае “большая загрузка текста”), будет формировать начальное значение текстовой области.

Тег select

Тег select работает с option тегом для создания выпадающих полей выбора.

<select>
    <option>Вариант 1</option>
    <option> Вариант 2</option>
    <option value="third option"> Вариант 3</option>
</select>

Когда форма будет отправлена, будет отправлено значение выбранного параметра. Этим значением будет текст между выбранными тегами option открытия и закрытия, если только в value атрибуте не указано явное значение, и в этом случае вместо него будет отправлено это значение.

Итак, в приведённом выше примере, если выбран первый элемент, будет отправлен “ Вариант 1”, если выбран третий элемент, будет отправлен “третий вариант”.

Аналогично атрибуту флажков и переключателей checked, тег option также может иметь атрибут selected, который начинается с одного из уже выбранных элементов, например:

<option selected>кролик</option>

в этом случае будет предварительно выбран элемент “Кролик”.

Имена

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

Таким образом, ко всем полям name необходимо добавить атрибут, например:

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

Контактная форма для Noah’s Ark, например, может выглядеть примерно так, как показано ниже. (Примечание: эта форма не будет работать, если не существует файла “contactus.php”, который указан в атрибуте action тега form, для обработки отправленных данных).

<form action="contactus.php" method="post">
    <p>Name:</p>
    <p><input type="text" name="name" value="Your name"></p>
    <p>Species:</p>
    <p><input name="species"></p>
    <!-- remember: 'type="text"' isn't actually necessary -->
    <p>Comments: </p>
    <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
    <p>Are you:</p>
    <p><input type="radio" name="areyou" value="male"> Male</p>
    <p><input type="radio" name="areyou" value="female"> Female</p>
    <p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
    <p><input type="radio" name="areyou" value="asexual"> Asexual</p>
    <p><input type="submit"></p>
</form>

Упс.

Страницы в тему:

Примеры CSS

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