Формы html код для сайта с отправкой примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

login.php

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

Пользовательская страница авторизации

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

Затем, создаем новую страницу в панели администрирования и ставим постоянную ссылку для страницы авторизации.

WordPress автоматически подцепит шаблон page-login.php:

Форма входа

Поместите тег wp_login_form в код шаблона page-login.php для отображения формы авторизации:

<? php wp_login_form(); ?>

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

<?php  
$args = array(  
    'redirect' => home_url(),   
    'id_username' => 'user',  
    'id_password' => 'pass',  
   )   
;?>  
<?php wp_login_form( $args ); ?>

Здесь же вы можете, к примеру, добавить такие штуки как логотип и описание вашего сайта:

<div class="login-branding">  
    <a href="#" class="login-logo">Hongkiat.com</a>  
    <p class="login-desc">  
        Тестовое описание сайта.  
    </p>  
</div>  
<div class="login-form">  
<?php  
$args = array(  
    'redirect' => home_url(),   
    'id_username' => 'user',  
    'id_password' => 'pass',  
   )   
;?>  
<?php wp_login_form( $args ); ?>  
</div>

Теперь приступим к настройке внешнего вида страницы с помощью CSS-стилей. В этом примере я покажу, как выглядит моя страница для входа.

У нее темный фон с голубой кнопкой, которые соответствуют теме сайта Hongkiat.com:

Проверка связки имя-пароль

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

Но есть еще кое-что, на что мы обратим наше внимание

Во-первых, страница wp-login.php до сих пор остается доступной. Стоит поставить редирект с wp-login.php на созданную нами страницу, чтобы наши клиенты могли на неё попасть.

Для этого нужно добавить следующий код в файл functions.php используемой вами темы WordPress:

function redirect_login_page() {  
    $login_page  = home_url( '/login/' );  
    $page_viewed = basename($_SERVER);  
  
    if( $page_viewed == "wp-login.php" && $_SERVER == 'GET') {  
        wp_redirect($login_page);  
        exit;  
    }  
}  
add_action('init','redirect_login_page');

Не забудьте присвоить переменной $login_page значение адреса вашей страницы для входа.

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

К примеру, введена неверная пара логин-пароль или оставлено пустое поле. Нас снова выбросит на wp-login.php.

Чтобы избежать этого добавляем следующую функцию в файл functions.php:

function login_failed() {  
    $login_page  = home_url( '/login/' );  
    wp_redirect( $login_page . '?login=failed' );  
    exit;  
}  
add_action( 'wp_login_failed', 'login_failed' );  
  
function verify_username_password( $user, $username, $password ) {  
    $login_page  = home_url( '/login/' );  
    if( $username == "" || $password == "" ) {  
        wp_redirect( $login_page . "?login=empty" );  
        exit;  
    }  
}  
add_filter( 'authenticate', 'verify_username_password', 1, 3);

Две эти функции выполняют несколько задач: переадресуют пользователей в случае неудачной попытки входа и дописывают к URL-адресу строки запроса login значение failed или empty:

wp-login.php

function logout_page() {  
    $login_page  = home_url( '/login/' );  
    wp_redirect( $login_page . "?login=false" );  
    exit;  
}  
add_action('wp_logout','logout_page');

Сообщение об ошибке

Мы будем показывать пользователю сообщение, и когда случается ошибка, и когда он выходит с сайта при помощи query string, значение которой мы поместили в URL. Для того чтобы получить значение из строки запроса, мы будем использовать переменную $_GET.

Поместите код, приведенный ниже, в шаблон страницы авторизации:

$login  = (isset($_GET) ) ? $_GET : 0;

Код, приведенный выше, проверяет, содержит ли переменная login что-либо и в противном случае приравнивает ее к значению 0.

Также мы будем отображать сообщения, основанные на значении переменной $error:

if ( $login === "failed" ) {  
    echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';  
} elseif ( $login === "empty" ) {  
    echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';  
} elseif ( $login === "false" ) {  
    echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';  
}

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

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

Переходим к практике. Для начала создадим таблицу хранения данных о пользователях в базе 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, а не.

SurveyMoz

Чтобы создать собственную форму опроса, нажмите «Создать опрос». Выберите один из предустановленных шаблонов или разработайте форму с нуля. Также можно добавить дизайнерские темы. Затем перейдите к добавлению вопросов.

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

JotForm

HTMLJotForm

Простые инструменты: эти инструменты позволяют задать следующие поля:

o Заголовок; o Полное имя; o Адрес электронной почты; o Адрес; o Телефон; o Дата; o Капча.

Инструменты формы: эти инструменты включают в себя следующие поля:

o Текстовое окно; o Текстовая область; o Выпадающий список; o Радио-кнопка; o Чекбокс; o Текст; o Изображение.

Инструменты опросов: их можно добавлять для определения рейтинга или популярности приведенных данных:

o Рейтинг; o Матрица; o Спиннер;

  • Платежные инструменты: использование различных сервисов для получения платежей или пожертвований;
  • Виджеты:

o Контрольный список; o Слайдер изображений; o YouTube.

Поля добавляются путем перетаскивания инструментов в рабочее пространство формы. Если нужно удалить какой-либо инструмент, выберите его и нажмите иконку «Закрыть». Этот конструктор онлайн-форм также позволяет добавлять темы и разрабатывать собственные формы.

Дополнительные функции включают в себя:

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

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

Google Forms

Google ТаблицыGoogle Forms+

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

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

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

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

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

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

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

Особенности

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

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

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

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

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

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

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

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

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

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

Тег 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» , подготовленная редакцией проекта.

Итоги

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

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

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

3.77/5 (24)

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

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

Adblock
detector