Валидация HTML-формы без использования скриптов и php
Нашел очень крутой пример валидации HTML-форм без Javascript и без PHP, оригинальная статья выложена здесь.
Если нужна валидация формы с помощью JS, тогда поможет эта статья — Валидация формы обратной связи с помощью Javascript.
Пример валидации без javascript можно посмотреть здесь:
See the Pen Form with a bunch of HTML5 Validation and CSS3 Help by Chris Coyier (@chriscoyier) on CodePen.0
Код немного упрощенный можно увидеть здесь:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ display: block; margin: 40px auto; max-width: 960px; } input{ padding: 2px 5px; margin-bottom: 5px; } form{ max-width: 450px; } form div{ position: relative; } form div label{ opacity: 0.3; position: absolute; top: 2px; left: 10px; } div input:focus + label{ opacity: 0; } div input:valid{ background-image: url(check.png); background-size: 20px; padding-left: 23px; background-repeat: no-repeat; background-position: 0 0; } div input:valid + label{ opacity:0; } input:invalid:not(:focus):not(:placeholder-shown){ background: pink; } input:invalid:not(:focus):not(:placeholder-shown) + label{ opacity: 0; } input:invalid:focus:not(:placeholder-shown) ~ .requirements{ max-height: 200px; padding: 5px 10px; } .requirements{ padding: 0 10px; color: #999; max-height: 0; transition: 0.28s; overflow: hidden; color: red; font-style: italic; } </style> </head> <body> <div class="container"> <form> <div> <input type="text" id="name" name="Name" placeholder=" " required> <label for="name">Name</label> </div> <div> <input type="email" id="email" name="E-mail" placeholder=" " required> <label for="email">Email</label> <div class="requirements">Введите правильный Email</div> </div> <div> <input type="text" id="phone" name="Phone" placeholder=" " required> <label for="phone">Phone</label> </div> <button>Send</button> </form> </div> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="common.js"></script> </body> </html>
Все стили нужно настраивать под себя. Форма без обработчика, только HTML и CSS. Форму с обработчиком можно взять здесь — Универсальный скрипт формы обратной связи.
Вот пример формы немного сложнее и красивее:
See the Pen Validate contact form on CSS and HTML by Denis (@deniscreative) on CodePen.0
И вот такой получается полностью рабочий код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validate contact form on CSS and HTML</title> <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700,900" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style> h1 { margin-bottom: 30px; font-family: "Titillium Web", sans-serif; font-weight: bold; text-align: center; } .contact-form input { border: 0 none; border-bottom: 1px solid #b9b9b8; width: 100%; font-family: "Lato", sans-serif; font-size: 16px; line-height: 32px; padding: 5px; margin-bottom: 45px; outline: none; background: #fff; } .contact-form .captcha-wrap { margin-bottom: 45px; } .contact-form .btn { font-size: 24px; line-height: 54px; border: none; width: 100%; padding: 10px; font-weight: 700; text-align: center; outline: none; border-radius: 4px; } .contact-form .btn:hover { background-color: #e6a700; } .contact-form label { color: #7f7f7e; position: absolute; top: 8px; left: 20px; transition: 0.28s; } .contact-form input:focus + label { top: -20px; font-size: 12px; } .contact-form input:invalid { box-shadow: none; } .contact-form input:valid { border-bottom: 1px solid #161613; } .contact-form input:valid + label { top: -20px; font-size: 12px; } .contact-form input:invalid:not(:focus):not(:placeholder-shown) { border-bottom: 1px solid #d3362a; } .contact-form input:invalid:not(:focus):not(:placeholder-shown) + label { top: -20px; font-size: 12px; } .contact-form input:invalid:focus:not(:placeholder-shown) ~ .requirements { max-height: 20px; } .contact-form .requirements { position: absolute; bottom: 20px; padding: 0 5px; max-height: 0; transition: 0.28s; overflow: hidden; font-size: 14px; line-height: 20px; color: #d3362a; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <h1>Contact Form</h1> <form class="contact-form" autocomplete="off"> <div class="row"> <div class="col-md-6"> <input type="text" id="name" name="Name" placeholder=" " required> <label for="name">Your name *</label> </div> <div class="col-md-6"> <input type="email" id="email" name="E-mail" placeholder=" " required> <label for="email">Email *</label> <div class="requirements">Error text</div> </div> </div> <div class="row"> <div class="col-md-12"> <input type="text" id="message" name="Message" placeholder=" " required> <label for="message">Message *</label> </div> </div> <div class="row"> <div class="col-md-6 captcha-wrap"> <img src="http://denis-creative.com/wp-content/uploads/2017/06/captcha.jpg" alt=""> </div> <div class="col-md-6"> <button type="submit" class="btn">Send message</button> </div> </div> </form> </div> </div> </div> </body> </html>
Обратите внимание, что в примере я подключаю гугловские шрифты и bootstrap.min.css.
[vc_message color=»alert-success»]Если вам нужна всплывающая форма обратной связи для WordPress, тогда читайте эту статью: Как…
Как известно, 15 мая указом президента Украины Петра Порошенко были введены санкции против России. Помимо…
Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте…
Очень простой и крутой плагин Fotorama, но он совсем не адаптивный. Например нужно сделать, чтобы…
5 комментариев
Ответить
Круто + за пост
не работает
что именно не работает?
Весь код не работает. Подскажите пожалуйста куда вставлять email почту чтобы письма отправлялись?
чтобы почта отправлялась, нужно добавить обработчик mail.php, пример здесь.