Php форма логина и регистрации. Форма входа и регистрации с помощью HTML5 и CSS3

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend><a href="/life-hacks-for-smartphones/kak-ubrat-predlozhenie-dlya-poiska-na-aifone-kak-polnostyu-otklyuchit-siri-na-iphone.html">Контактная информация</a></legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный <a href="/life-hacks-for-windows/sozdanie-prostoi-kontaktnoi-formy-s-pomoshchyu-angularjs-i-php-kak-zastavit-rabotat.html">атрибут required</a> , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид <a href="/life-hacks-wi-fi/podvinut-polya-vo-vsem-dokumente-kak-nastroit-tekstovoe-pole-v-microsoft.html">текстового поля</a> при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить <a href="/internet/kak-sdelat-cvetnoi-kruzhok-krugluyu-ramku-vokrug-avatara-v-instagram.html">цветную рамку</a>, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/computers/harakteristiki-materinskoi-platy-asus-maximus-4-extreme-obzor-i-testirovanie.html">Внешний вид</a> формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет <a href="/reviews/avtomaticheskaya-otpravka-kopii-otpravlyaemyh-soobshchenii-ponyatie.html">скрытую копию</a> на ваш адрес электронной почты.</p> <br> Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. <br> В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .<h3> HTML </h3> <div id="container_demo" > <!-- спрятанный якорь, чтобы избежать прыжков http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 --> <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link">Not a member yet ? Join us </p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm <a href="/life-hacks-for-pc/kak-na-elektronnoi-pochte-ustanovit-parol-dopolnyaem-brauzer.html">your password</a> </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link">Already a member ? Go and log in </p> </form> </div> </div> </div> <br> Здесь мы использовали несколько приемов HTML5. Например, элемент <i>type=password </i> автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент <i>type=email </i> позволяет браузеру проверить правильность формата <a href="/ios/odnorazovaya-pochta-s-otpravkoi-sozdaem-odnorazovye-email-adresa.html">email адреса</a>. Кроме того, мы использовали параметр <i>require=required </i>; браузеры, поддерживающие <a href="/ios/planshety-galaksi-tab-a-10-1-tehnologii-mobilnoi-svyazi-i-skorost-peredachi-dannyh.html">данный параметр</a> не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр <i>autocomplete=on </i> будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.<p>Теперь о двух хитрых моментах. Вы наверное заметили две ссылки <a href> в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).</p><p>Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр <i>data-icon=”icon_character” </i> с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes . </p><h2> CSS </h2> Для чистоты кода я пропущу <a href="/computers/razmer-shrifta-v-prilozheniyah-vindovs-10-vosstanovlenie-bazovyh-parametrov.html">базовые параметры</a> (html, body и т.п.), но вы сможете найти их в <a href="/iron/vosstanovit-parametry-windows-10-vozvrat-kompyutera-v-ishodnoe-sostoyanie-bez.html">исходных файлах</a>. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!<h4>Стилизуем формы, используя CSS3</h4> Во-первых, давайте назначим нашим формам базовый стиль.<p> #subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; } </p><p>Здесь мы назначим свойства для шапки:</p><p> /**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); } </p><p>Замечу, что сегодня только браузеры с webkit поддерживают <i>background-clip: text </i>, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр <i>background-clip: text </i> работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр <i>-webkit-text-fill-color: transparent </i> позволяет нам иметь <a href="/life-hacks-for-pc/gimp-lastik-prozrachnyi-fon-kak-sdelat-prozrachnyi-fon.html">прозрачный фон</a>, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.</p><p>Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.</p><p>Теперь давайте позаботимся о полях ввода и придадим им приятный вид.</p><p> /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; } </p><p>Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.</p><p> /* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } </p><p>Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.</p><p>Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут <i>data-icon </i>? Именно в него нужно вставить букву. Я использовал <i>data-icon=’u’ </i> для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face. </p><p> @font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; } </p><p>Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр <i>content: attr(data-icon) </i>, чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.</p><p>Теперь назначим правила для кнопки отправки формы.</p><p> /*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; } </p><p>Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.</p><p>Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:</p><p> /* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; } </p><p>Стилизуем подвал формы, используя множественные <a href="/life-hacks-for-different-systems/krasivyi-fon-gradient-css-lineinyi-gradient-dlya-fona.html">линейные градиенты</a>, чтобы создать полосатый градиент.</p><p>P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; } </p><p>Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!</p><h4>Создаем анимацию</h4> Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:<p> #register{ z-index: 21; opacity: 0; } </p><p>Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.</p><p>Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр <i>display: none </i>. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).</p><p> #toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; } </p><p>Вот, что происходит: когда мы кликаем на кнопку <i>Присоединиться </i>, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием <i>fadeInLeft </i>. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.<br> Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.</p><p>Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } </p><p>Форма, которая “исчезает”, будет иметь анимацию затемнения влево:</p><p> #toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } </p><p>Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.</p><p>Вот и все, друзья. Надеюсь вам понравился этот туториал!</p><p><b>Заметим, что в некоторых браузерах параметр <i>background-clip: text </i> не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет. </b></p><p><b>P.S. </b> Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!</p><p>Теги: Добавить метки</p> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination. <h2>HTML Code for registration form</h2> <p>Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.</p> <p>In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.</p> <p><b>registration.html </b></p><p> <html> <head> <title>registration form</title> </head> <h2 ALIGN="CENTER">Registration form</h2> <form action="Welcome.html" method="post"> <table border="0" align="center"> <tbody> <tr> <td><label for="id">Id: </label></td> <td><input id="id" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="name">Name: </label></td> <td><input id="name" maxlength="50" name="name" type="text" /></td> </tr> <tr> <td><label for="course">Course: </label></td> <td><input id="course" maxlength="50" name="course" type="text" /></td> </tr> <tr> <td><label for="branch">Branch: </label></td> <td><input id="branch" maxlength="50" name="branch" type="text" /></td> </tr> <tr> <td><label for="rolln0">Rollno: </label></td> <td><input id="rollno" maxlength="50" name="rollno" type="text" /></td> </tr> <tr> <td><label for="email">Email_Address:</label></td> <td><input id="email" maxlength="50" name="email" type="text" /></td> </tr> <tr> <td><label for="username">User_Name:</label></td> <td><input id="username" maxlength="50" name="username" type="text" /></td> </tr> <tr> <td><label for="aboutus">About Us:</label></td> <td valign="middle" align="center"><textarea> Password:

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

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

Проще тем, кто использует функциональность CMS, так как данные системы имеют готовые модули для работы с веб-формами. Правда их возможности ограничены. В остальных случаях необходимо изучать языки программирования (такие как PHP, HTML) и разобраться с системой управления базами данных (можно потратить много сил, а главное времени, но так и не добиться результата). Есть еще один вариант – нанять специалиста, который выполнит поставленную задачу. Но работа программистов стоит недешево, а как быть, если средств на оплату работы не хватает?

Совсем недавно появился новый способ создания веб-форм (регистрационной, формы обратной связи, онлайн заказа товаров или услуг и т.д.), не требующий знаний языков программирования (PHP, HTML) и прочих веб-технологий (CSS, MySQL) – это сервис MyTaskHelper.ru – онлайн конструктор форм. Данный сайт имеет интуитивно понятный интерфейс и не требует каких либо знаний в области программирования.

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

1.Во-первых пройти процесс регистрации и активации аккаунта (занимает меньше минуты);

2.Создать проект и форму (для каждого проекта можно создать сколько угодно форм);

3.Добавить на регистрационную форму нужные поля (выбор названий остается за вами, все зависит от назначения формы). В системе вы сможете выбрать тип каждого поля (MyTaskHelper предлагает 20 разных типов, таких как строка текста, многострочный текст, дата, файл, чекбокс, выпадающий список и прочие);

4.При необходимости, настроить функциональность каждого поля (это может быть валидация, авто дополнение, по-умолчанию, размер поля);

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

6.Вот и все, регистрационная форма готова. Скопируйте код для вставки и разместите его на нужной веб-странице.

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

Предлагаю вашему вниманию очень простой и функциональный скрипт регистрации и авторизации на сайте , который состоит из 3-ёх файлах PHP с подключением 2-ух java скриптов, с помощью которых ошибки выводятся в самой форме без перезагрузки страницы.

Скрипт был успешно протестирован на версии PHP 5.3.3 и PHP 5.6.3

Что умеет и имеет скрипт

• Регистрировать новых пользователей;
• Авторизовывать пользователей и записывать куки на определённый срок (нет необходимости каждый раз авторизовываться);
• Показывать и скрывать определённую информацию для авторизованных и не авторизованных соответственно;
• Имеет АДМИН ПАНЕЛЬ , где можно редактировать все данные и удалять пользователей.

Там же DEMO и Админ Панели

1 ШАГ .
Если вы используете скрипт регистрации и авторизации на локалке с помощью DENWER, то изменения в файлах для соединения с базой данных делать не нужно.
В противном случае откройте файлы: stayt.php , classes/Auth.class.php и adminka/connect.php , и в самом верху замените данные для связи с базой данных на свои.

2 ШАГ .
Переходим (если используете DENWER) по адресу: http://localhost/Tools/phpmyadmin/ , если на хостинге, то нажимаете Базы Данных, и создаёте новую базу с именем: registr и сравнение: utf8_general_ci .
Вы можете задать разумеется своё имя, но тогда замените его обязательно в файлах для соединения с базой (см. шаг 1).

3 ШАГ .
Нажмите на созданную базу registr и затем на верхнюю вкладку SQL и в появившееся окно для ввода вставьте этот код и нажмите ОК.

CREATE TABLE IF NOT EXISTS `my_users` (`id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `names` varchar(15) NOT NULL, `password` varchar(255) NOT NULL, `salt` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Всё! Переходите в браузере по своему адресу, пробуйте и экспериментируйте.

Админ Панель

После того, как вы сделали хоть одну регистрацию, можете перейти в АДМИНКУ.
Вход в АДМИН-ПАНЕЛЬ :

Http://Ваш_сайт.ru/adminka/

Не забудьте запоролить эту папку для безопасности и можно так же переименовать её.
При открытие Админ Панели нажмите кнопку ПОИСК и вам отобразятся все зарегистрированные пользователи, где при нажатие на определённый номер ID , вам откроются данные пользователя для редактирования.

Можно так же быстро найти пользователя по его E-mail, для этого достаточно ввести в поле для ПОИСКа известную электронную почту и нажать на кнопку.
Кнопкой ДОБАВИТЬ не советую пользоваться, так как пользователь добавляется в систему без пароля. И не имею понятия зачем её вообще сделали.

На этом всё, что не получается или не понятно, - задавайте вопросы.

Попутно можете попробовать для продажи информации (товаров).