Валидация 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.
Код немного упрощенный можно увидеть здесь:
<!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.
И вот такой получается полностью рабочий код:
<!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, пример здесь.