<form action="#" class="form">
	<div class="form__field">
		<input type="text" name="name" placeholder="Имя*" required />
	</div>
	<div class="form__field">
		<input type="email" name="name" placeholder="E-Mail" />
		<span class="form__error">Это поле должно содержать E-Mail в формате example@site.com</span>
	</div>
	<div class="form__field">
		<input type="tel" name="name" placeholder="Телефон" pattern="[\+]\d{1}\s[\(]\d{3}[\)]\s\d{3}[\-]\d{2}[\-]\d{2}" minlength="18" maxlength="18" />
		<span class="form__error">Это поле должно содержать телефон в формате +7 (123) 456-78-90</span>
	</div>
	<div class="form__field">
		<input type="url" name="name" placeholder="Ваш сайт" />
		<span class="form__error">Это поле должно содержать URL в формате http://mysite.ru</span>
	</div>
	<div class="form__field">
		<input type="number" name="name" placeholder="Ваш рост (см)" min="100" max="250" />
		<span class="form__error">Ваш рост должен быть не меньше 100 и не больше 250 см</span>
	</div>
	<button type="submit">Отправить</button>
</form>
body {
	text-align: center;
	padding: 10px;
}

.form {
	display: inline-block;
	padding: 25px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 500px;
}

.form__field {
	margin-bottom: 10px;
}

.form__error {
	color: red;
	text-align: left;
	font-size: 12px;
	display: block;
	margin-top: 3px;
	display: none;
}

.form input {
	outline: none;
	display: block;
	width: 100%;
	border-radius: 2px;
	border: 1px solid #ccc;
	padding: 10px;
	box-sizing: border-box;
}

.form button {
	width: 100%;
	padding: 10px;
	border-radius: 2px;
	border: 0;
	background-color: #ccc;
	color: #fff;
}

input:valid:not(:placeholder-shown) {
	border-color: green;
}

input:invalid:not(:placeholder-shown) {
	border-color: red;
}
input:invalid:not(:placeholder-shown) + .form__error {
	display: block;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.