Нужны формы для сайта? узнайте о 18 лучших бесплатных конструкторах онлайн-форм

Содержание:

Как работают HTML-формы?
Кнопка отправки формы
Особенности
Smart Survey
Как обезопасить свой сайт
- Единая точка входа
- Экранизация запросов
Создание объектов в базе данных
Google Forms
Итоги

Как работают HTML-формы?

С помощью HTML формируется пользовательский интерфейс формы. Обработка введенных данных и их отправка на сервер осуществляется с использованием языков программирования: PHP, ASP или Perl.

Приведенное ниже изображение иллюстрирует общую концепцию:

Пользователь посещает веб-страницу, содержащую форму;
Веб-браузер отображает HTML-форму;
Пользователь заполняет форму и отправляет данные;
Браузер отправляет данные формы на веб-сервер;
Скрипт обрабатывает данные формы на веб-сервере;
Страница ответа отправляется обратно в браузер.

Тег HTML-формы

Все элементы ввода HTML формы должны быть заключены в открывающийся и закрывающийся теги <form> следующим образом:

<form>

Элементы ввода…

</form>

Ниже перечислены атрибуты тега формы:

action=”Ссылка на скрипт процессора формы”

Атрибут action указывает на скрипт на стороне сервера, который обрабатывает данные формы. Как правило, это будет скрипт (PHP, ASP, Perl) или программа CGI.

method =get|post (либо GET, либо POST)

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

Предположим, что ваша страница обработчика формы — это Perl скрипт с именем formmail.pl. HTML-код формы будет следующим:

<form action="cgi-bin/formmail.pl" method="post">
................................
.....your input items here .....
................................
</form>

Элементы ввода формы

В форме регистрации для сайта HTML могут быть различные типы элементов ввода: чек-бокс, радио-боксы, простые текстовые поля и т.д.

Давайте рассмотрим, как создаются элементы ввода формы.

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

Ниже приведен код, с помощью которого создается простое текстовое поле:

<input type="text" name="FirstName" />

type=”text”

атрибут «type» сообщает браузеру, что должно быть создано однострочное текстовое поле.

Name = «FirstName»

задает название поля. name используется для идентификации поля на стороне сервера.

Существует еще несколько атрибутов, которые можно использовать для текстового поля:

value=”значение по умолчанию”

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

Пример:

<input TYPE="text" name="FirstName" value="Введите, пожалуйста, свое имя" />

maxlength=”максимальное количество символов”

Задает максимальное количество символов, которое пользователь может ввести в текстовое поле.

Давайте расширим предыдущую HTML-форму несколькими текстовыми полями:

<form action="cgi-bin/formmail.pl" method="post">
   <p>
   Name: <input type="text" name="FirstName" value="" size="25" maxlength="50" />
   </p>
   <p>
   Email: <input type="text" name="Email" value="" size="25" maxlength="50" />
   </p>
</form>

В этой форме есть два поля для получения от посетителя имени и адреса электронной почты. Теги <p> должны разбить элементы ввода на две строки.

Кнопка отправки

HTMLsubmit

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

name=»submit»

В форме может быть больше одной кнопки Submit. На стороне сервера нажатая кнопка может быть идентифицирована с помощью значения атрибута name.

value=»Отправить»

Строка, заданная в атрибуте «value«, отображается как метка кнопки отправки.

Давайте соберем все вместе:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>
   <head >
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
      <title >Form Page: sampleform</title>
   </head>
<body>
<h1>Sample form page</h1>

<form id='sampleform' method='post' action='' >
   <p>
   Name: <input type='text' name='Name' />
   </p>
   <p>
   Email: <input type='text' name='Email' />
   </p>
   <p>
   <input type='submit' name='Submit' value='Submit' />
   </p>
</form>

</body>
</html>

Скопируйте этот код в HTML-файл и откройте его в браузере.

Посмотрите на форму в действии.

Данная публикация является переводом статьи «HTML Form Tutorial» , подготовленная редакцией проекта.

Кнопка отправки формы

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

Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value
. Задавать имя кнопке или нет – на ваше усмотрение, то если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.

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

В итоге код нашей формы получится следующим:

Результат в браузере:

Особенности

В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari
(исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow . В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

На специализированном сайте представлены материалы по css html для чайников . Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.

Все кто разрабатывает web сайты, рано или поздно сталкивается с такой задачей как авторизация и аутентификация пользователей
, реализованная именно с помощью языка программирования, а не с помощью стандарта протокола http. Сегодня мы рассмотрим пример создания простой авторизации с использованием языка программирования PHP, а данные о пользователях будем хранить в базе MySQL.

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

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

Smart Survey

Создать опрос

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

Нажмите на «Предварительный просмотр», чтобы увидеть, как выглядит ваша форма. Жмите «Отправить опрос», чтобы сгенерировать ссылку на форму.

Для сбора ответов выберите один из способов: веб-ссылка, электронная почта, на сайте, и т.д.

Как обезопасить свой сайт

Для безопасности вашего сайта, важны несколько пунктов.

Проще всего делать сайт с единой точкой входа. Коротко об этом поговорим чуть ниже.
Экранировать все запросы. Сделать это можно в ручную или же с помощью подготовленных запросов.
Ограничивать данные которые может ввести пользователь

Единая точка входа

Единая точка входа — это когда все запросы проходят через один главный скрипт. На первый взгляд может показаться, что это не удобно, однако, это не так. Такой подход дает множество преимуществ.

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

В корне сайта нужно создать файл «.htaccess» и прописать в нем правила переадресации.

Этот файл даст хостингу понять, что мы включаем переадресацию на index.php всех запросов, кроме картинок, стилей css и js скриптов.

Экранизация запросов

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

Ручная проверка данных
С помощью подготовленных запросов

Под ручной проверкой подразумевается, что все данные будут проходить фильтр из блоков «if else», а так же через специальные функции которые удаляют спец-символы.

Подготовленные запросы, делают все безопаснее и понятнее при чтении кода. Совершить SQL-инъекцию уже не получиться и проверять данные не обязательно, однако рекомендуется.

Давайте теперь сохраним этот файл. Так как будем его использовать дальше. Назовем его к примеру login.php и положим его в корень сайта.

Создание объектов в базе данных

Переходим к практике. Для начала создадим таблицу хранения данных о пользователях в базе MySQL . Я предлагаю использовать простую структуру таблицы (Вы ее, конечно, можете дополнить чем-нибудь, у меня база называется test, а таблица users
):

CREATE TABLE test.users(user_id INT(11) UNSIGNED NOT NULL AUTO_INCREMENT,
user_login VARCHAR(30) NOT NULL,
user_password VARCHAR(32) NOT NULL,
PRIMARY KEY (user_id))
ENGINE = MYISAM
CHARACTER SET utf8
COLLATE utf8_general_ci;

И давайте сразу же добавим одну запись в эту таблицу:

Insert into test.users (user_login, user_password)
values («mylogin»,»202cb962ac59075b964b07152d234b70″)

Итого у нас получилось:

Логин
– mylogin;
Пароль
-;

Мы пароль, конечно же, будем хранить в хешированном виде, так как хранить пароль в открытом виде, мягко сказать, не безопасно. У нас Выше хеш пароля 123, поэтому, когда будем вводить пароль в форму, мы будем забивать именно 123, а не.

Google Forms

Google ТаблицыGoogle Forms+

Для создания формы выполните следующие шаги:

Добавить в форму «Заголовок»;
Добавить «Описание формы»;
Задать вопрос в поле «Название вопроса»;
Задать «Вспомогательный текст», чтобы подробнее описать суть вопроса;
Выбрать тип вопроса. Существует 9 типов ответов, которые можно выбрать. Варианты предоставления ответа отличаются в зависимости от типа ответа:

o Текст; o Абзац текста; o Множественный выбор; o Чекбокс; o Выбор из списка; o Диапазон; o Сетка; o Дата; o Время;

Нажать «Готово», чтобы создать вопрос;
Нажать «Добавить элемент», чтобы задать еще один вопрос.

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

После того, как вы закончите создание онлайн-формы, можно настроить ее параметры. Например, разрешить респондентам редактировать свой ответ после того, как они отправили данные формы. Нажмите «Отправить форму», чтобы отправить ссылку выбранной аудитории по электронной почте.

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

Итоги

Мы сделали простейшую регистрацию с PDO или же подготовленными запросами. Сейчас нет проверок на существование пользователей, то есть можно создать несколько одинаковых логинов, что ни есть хорошо, конечно же, но для понимания принципов сойдет. Так же, перед каждым отдельным сообщением пришлось добавить «

В реальном проекте нужно добавлять отдельную шапку и там прописать это один раз и забыть.

Вы наверное заметили что мы не сделали страницу выхода из аккаунта. Да, так и есть, попробуйте сделать ее сами. Оставлю только подсказку, сессию можно удалить с помощью функции «session_destroy()», что будет означать что мы вышли из аккаунта.

3.83/5 (23)