Нашел очень крутой пример валидации 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="https://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.
Комментарии (5) к “Валидация HTML-формы без использования скриптов и php”
DonaldSor
Круто + за пост
JesseLug
не работает
Denis Creative
что именно не работает?
Серж
Весь код не работает. Подскажите пожалуйста куда вставлять email почту чтобы письма отправлялись?
Denis Creative
чтобы почта отправлялась, нужно добавить обработчик mail.php, пример здесь.