Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<html> <head> <meta charset="utf-8"> <title>Kontrola formulára</title> </head> <body> <form name="formCheckName" onSubmit="return checkForm();"> <div class=inputs> <label> <span>Meno:</span> <input name="name" type="text"> <span class=error>x</span> </label> <label> <span>Heslo:</span> <input name="pass" type="password"> <span class=error>x</span> </label> <label> <span>Heslo2:</span> <input name="cpass" type="password"> <span class=error>x</span> </label> </div> <div class=submit> <input type="submit" value="Odošli"> </div> </form> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
form { margin:auto; max-width:300px; background:gray; padding:10px; font-family:sans-serif; } form:after { content:""; display:block; clear:both; } form label { display:block; text-align:right; margin:10px 0; } form label > span { padding:5px; } form > .inputs { width:80%; float:left; } form > .submit { width:20%; float:left; text-align:center; margin:10px 0; } .inputs input { border:1px solid transparent; } .inputs .error-border { border-color:red; } .error { color:red; font-weight:700; visibility:hidden; }
CSS
Autoformát
CSS reset
Až na konci
function checkForm() { var isValid = true; var form = document.formCheckName; var name = form.name; var cont = form.pass; var contr = form.cpass; if (!name.value.length) { isValid = false; name.className = "error-border"; name.parentNode.querySelector('.error').style.visibility = 'visible'; } else { alert("Gratulujeme"); } if (cont.value.length && cont.value === contr.value) { alert("su rovnake"); } else { isValid = false; cont.className = "error-border"; contr.className = "error-border"; cont.parentNode.querySelector('.error').style.visibility = 'visible'; contr.parentNode.querySelector('.error').style.visibility = 'visible'; } return isValid; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>