5 советов по созданию онлайн-форм HTML

Советы по созданию онлайн-форм HTML

Моя ежедневная рутина включает проверку выполнения веб-форм моими клиентами. Проверяя формы, я заметил, что одни и те же ошибки постоянно повторяются, поэтому я подумал, что было бы полезно написать несколько советов по созданию HTML-форм. Во-первых, позвольте мне объяснить, когда я говорю «формы», я имею в виду «онлайн-формы» или «веб-формы» или «HTML-формы» на веб-сайте. Как правило, формы собираются для сбора информации от посетителей сайта; а затем обработчик форм отправляет эту информацию на конкретные адреса электронной почты или сохраняет их в базе данных.

Примечание. Для предотвращения автоматического редактирования символы «Меньше» и «Больше чем» заменены на[» and «]"в этой статье.

Совет 1. Правильно закрывающие элементы формы.

Форма начинается с [form…] тег и заканчивается [/form] этикетка. Все элементы формы должны быть включены в [form…] и [/form] теги.

Некоторые примеры элементов формы: текстовое поле, флажок, кнопка выбора, кнопка отправки.

Любые элементы, размещенные снаружи [form…] [/form] область будет игнорироваться.

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

Совет 2. Правильно именовать элементы.

Атрибут элемента name должен содержать только буквы, цифры, подчеркивания и дефисы. Атрибут «name» не должен начинаться или заканчиваться подчеркиванием или дефисом. Вот несколько примеров:

Эти атрибуты имени действительны:

<br /> [input name=&#187;FirstName&#187;&#8230; /]<br /> [input name=&#187;company_address&#187;&#8230; /]<br /> [select name=&#187;Country&#187;&#8230; /]&#8230; [/select]<br />

Эти атрибуты имени недействительны:

<br /> [input name=&#187;First Name&#187;&#8230; /]<br /> [input name=&#187;Address:&#187;&#8230; /]<br /> [input name=&#187;Company&#8217;s address&#187;&#8230; /]<br /> [select name=&#187;-Country-&#171;&#8230; /]&#8230; [/select]<br />

Совет 3. Проверка формы с использованием JavaScript.

В большинстве случаев полезно проверить, правильно ли была заполнена форма. Если пользователь допустил ошибку, форма не должна обрабатываться, и посетитель должен получить дружеское сообщение с объяснением ошибки.

Обычно функция JavaScript вызывается из [form] этикетка. Вот пример, чтобы проверить, является ли поле "YourWebsite" пустым или нет. Если поле не заполнено, JavaScript уведомит пользователя о вводе адреса сайта. Вот код:

<br /> [form action=&#187;URL&#187; onsubmit=&#187;return ValidateForm(this);&#187; id=&#187;TestForm&#187; method=&#187;post&#187;]</p> <p>Введите адрес вашего сайта:[br /]<br /> [input name=&#187;YourWebsite&#187; type=&#187;text&#187; maxlength=&#187;400&#8243; width=&#187;300&#8243; /][br /]<br /> [input name=&#187;SubmitButton&#187; type=&#187;submit&#187; value=&#187;Submit&#187; /][br /]<br /> [/form]<br /> [script type=&#187;text/javascript&#187;]</p> <p>ValidateForm (frm)<br /> {<br /> if (frm.YourWebsite.value == &quot;&quot;)<br /> {<br /> оповещение («Введите адрес вашего сайта.»);<br /> frm.YourWebsite.focus ();<br /> вернуть ложь;<br /> }<br /> вернуть истину;<br /> }<br /> [/script]<br />

Функция JavaScript ValidateForm () вернет в форму «false», если поле «YourWebsite» пустое и форма не будет обработана. Затем пользователь увидит сообщение «Введите адрес вашего сайта».

Совет 4. Внедрение антиспам-решения.

Онлайн-формы на веб-сайтах могут быть легко найдены многими спам-ботами, также известными как пауки или роботы. Когда спамеры найдут вашу незащищенную форму, они:

— отправить спам через форму,

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

Один из способов предотвратить это — использовать изображение Captcha. Captcha — это придуманная аббревиатура для «полностью автоматизированного публичного теста Тьюринга для компьютеров и людей». Люди могут читать искаженный текст на картинке, но современные компьютерные программы не могут.

Совет 5. Тестирование формы!

Тестирование вновь созданной или измененной формы очень важно. Небольшая ошибка может помешать отправке формы по запросу посетителя или клиента; Возможно, вы никогда не узнаете, что кто-то хотел с вами связаться или разместил заказ.

Как вы тестируете форму? После подготовки формы заполните ее информацией, делая вид, что вы посещаете сайт. Отправьте форму, затем проверьте свой почтовый ящик. Должно появиться новое сообщение с данными, введенными в форму. Если вы не видите новое сообщение, это может означать ошибку кода. Восстановите его и повторите тест снова.

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

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