Топ-100 HTML уроки, 5 часть: формы - Разработка сайтов на WordPress
HTML уроки, 5 часть: формы

HTML-формы

Используя HTML-формы, вы можете получать различную информацию от своих посетителей. Слово “форма” имеет много значений, но на самом деле сюда относятся запросы, поля “имя” и “пароль” при регистрации (в блогах, почтовых систем и т.д.), форма обратной связи, которая будет отправлять данные, такие как электронная почта и многое другое. Завершила форма отправляется на сервер, где расположен сайт, чтобы иметь доступ к той информации потребителю, необходимо создать соответствующий PHP файл, который обрабатывает полученную форму. PHP – это тема отдельной статьи, а здесь мы поговорим об с создания самих форм с HTML.

Формы указываются тегами “form” для начала, и “/form” в конце, а между этих двух тегов располагаются все компоненты формы, указанные чаще всего следующим образом:

<inрut type=”тип” name=”имя” />

Вместо “тип” стоит название конкретного типа элемента (рассмотрены ниже), а “имя” – уникальное имя элемента, что позволяет управлять им при обработке формы – подробнее об этом в статье PHP формы.

Рассмотрим последовательно элементы, которые можно включить в одну форму.

Однострочные текстовые поля

Для указания текстовых полей требуется указать type = “text”. Вот пример:

<fоrm>
 Имя:
 <input type="text" name="имя"/> <br/>
 Фамилия:
 <input type="text" name="family"/> <br/>
 E-mail:
 <input type="text" name="mail"/>
 </fоrm>

В браузере эта форма будет выглядеть так:

Имя: Фамилия: E-mail:

Обратите внимание, что слово, которое вы вводите вместо «имя» в name = «имя», не будет отображаться на экране. Чтобы понять посетителям вашего сайта, что нужно вводить в соответствующих полях, вам нужно включить соответствующее объяснение непосредственно перед или после текстового поля.

Вы можете указать длину текстового поля с размером (например, size = “40”) в качестве атрибута ввода. Если вы не укажете длину для текстового поля, по умолчанию это будет 20 символов.

Кроме того, вы можете установить ограничение на максимальное количество символов, которое пользователь может ввести для поля: используйте maxlenght. Например, maxlenght = “10” ограничит количество символов, которое пользователь может ввести для данного поля, до 10.

Вы также можете указать текст для автоматического заполнения в текстовом поле: используйте

value = “текст”.

Многострочные текстовые поля

В отличие от однострочных, многострочные поля позволяют вводить более длинный текст, например комментарий или сообщение. Они устанавливаются с помощью пары тегов <textarea> и </ textarea> и могут быть произвольно выбраны по количеству строк и столбцов (столбцов):

<p>Здравствуйте, введите ваш комментарий:</p>
<tеxtarea name="comment" rows="5" cols="40">
</tеxtarea>

На экране отобразится:

Здравствуйте, введите ваш комментарий:

Радио кнопки

Переключатели (радио кнопки) позволяют выбрать один из нескольких возможных ответов. Поле «name» для всех возможных вариантов должно иметь одинаковое значение. Вот типичный пример:

<fоrm>
Хотите получать новости о новинках нашей компании?<br/> 
<input type="radio" name="product_news" value="yes"/>Да<br/>
<input type="radio" name="product_news" value="no"/>Нет<br/>
</fоrm>

На экране это будет выглядеть так:

Хотите получать новости о новинках нашей компании?
Да
Нет

Обратите внимание, что вы можете выбрать только один из возможных ответов.

Множественный выбор: флажки

Если вы хотите, чтобы пользователи выбирали один или несколько из предложенных вариантов, используйте флажки. Они устанавливаются с помощью type = “checkbox” и точно так же, как переключатели должны иметь одинаковое имя, установленное для name, но разные значения:

<p>Я люблю ездить на:</p>
<fоrm>
Велосипеде:
<input type="checkbox" name="transport" value="velosiped" />
<br />
Машине:
<input type="checkbox" name="transport" value="car" />
<br />
Мотоцикле:
<input type="checkbox" name="transport" value="motocykl" />
</fоrm>

На экране отобразится:

Я люблю ездить на:

Велосипеде:

Машине:

Мотоцикле:

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

Выпадающие меню предоставляют вам выбор, аналогичный флажкам: один или несколько из предложенных вариантов. Единственным отличием является внешний вид – в раскрывающемся меню отображается только один из параметров, а остальные становятся видимыми только при нажатии на меню.

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

<fоrm>
<p>Когда вы любите спать? </p>
<select name="sleep">
<option>ночью</option>
<option>утром</option>
<option>в обед</option>
<option>я не сплю, я вампир</option>
</select>
</fоrm>

Вот и результат:

Когда вы любите спать?

Если вы хотите, чтобы пользователи могли выбрать более чем один из предложенных вариантов, вам нужно добавить multiple=”multiple” в качестве атрибута select (select name=”sleep” multiple=”multiple”). В этом случае выпадающее меню будет включать список. Количество строк вы можете определить с помощью size, например.

<select name=”sleep” multiple=”multiple” size=”4″>

Выбор более чем одного варианта производится нажатием клавиши Shift или Ctrl и щелчком нужных ответов.

Пароли

В целях безопасности, желательно не отображать введенные символы на экране, а показывать что-то другое – обычно звездочки. Такое поле ввода пароля устанавливается с помощью <input type = “password”>. Вот типичный пример использования поля пароля:

<fоrm> 
 Введите имя:
<input type="text" name="imya"/><br/>
Введите пароль:
<input type="password" name="pass" />
</fоrm>

Результат:

Введите имя:
Введите пароль:

Отправление формы

Когда пользователь заполняет все поля, форма должна быть отправлена. Для этого используйте кнопку отправки type = “submit”. Еще одна деталь, касающаяся отправки формы – это указание файла, который будет обрабатывать информацию, и способа ее отправки – action = “filename-processing-file” и method = “get” или method = “post” ( о различиях между get и post читайте в статье PHP формы – $ _GET и $ _POST):

<fоrm name="proba" action="privet.php" method="post">
 Ваше имя:
<input type="text" name="ime" />
<input type="submit" value="отправить" />
</fоrm>

Вот как будет выглядеть результат:

Ваше имя:

В этом случае, указанный файл для обработки формы privet.php будет использовать указанное вами имя, чтобы отправить вам сообщение.

Читайте далее: HTML уроки, 6 часть: цвета

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

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

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

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?