работает только в Opera 11, и то не полностью - tel что-то никак себя не проявляет…
исходный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 5 form</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style type="text/css">
/** описание формы, используя CSS-3 */
form
{
border: double 1px #c0c0c0;
border-radius: 5;
width: 200px;
line-height: 150%;
margin: 10px;
padding: 10px;
}
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}
meter
{
width: 155px;
}
input[type=submit]
{
width: 160px;
padding: 5px;
margin-top: 3px;
}
</style>
</head>
<body>
<form id="hf" method="post">
<div>Получение хостинг аккаунта:</div>
<div><input type="text" id="login" name="login" placeholder="Введите ваш логин" required pattern="[a-zA-Z0-9]+"
autocomplete="off" maxlength="15" title="Логин может содержать только английские буквы и цифры"></div>
<div><input type="password" id="p1" name="password" placeholder="Введите ваш пароль" required
autocomplete="off" title="Пароль необходимо ввести два раза, чтобы вы не ошиблись"></div>
<div id="passcheck"></div>
<div><input type="password" id="p2" name="password2" placeholder="Подтвердите пароль" required autocomplete="off"
onforminput="setCustomValidity(value != p1.value ? 'Пароли не совпадают!' : '')"
title="Пароль необходимо ввести два раза, чтобы вы не ошиблись"></div>
<div><input type="email" maxlength="30" name="email" placeholder="Введите ваш email" required size="20"
title="Укажите ваш действующий адрес электронной почты, на него будет направлено письмо для проверки"></div>
<div><input type="number" name="gigabytes" min="1" max="10" placeholder="Необходимо места" size="17" required
title="Укажите необходимое количество места на жестком диске сервера в гигабайтах, от 1 до 10"> гб</div>
<div><input type="tel" maxlength="22" name="telephone" placeholder="Контактный телефон"></div>
<div><input type="submit" value="Отправить форму"></div>
</form>
<script type="text/javascript">
/** используем jquery чтобы проверить сложность пароля и запретить множественный submit */
$(function()
{
$('#p1').keyup(function () {
var pstr = passwordStrength($(this).val(), $('#login').val());
$('#passcheck').html('<meter min="0" value="'+pstr+'" max="100">сложность пароля</meter>');
});
$('#hf').submit(function() {
$(':submit', this).attr('disabled', true);
setTimeout(function() { $('#hf :submit').attr('disabled', false) }, 1000);
})
});
/** вспомогательные функции */
function passwordStrength(password, username)
{
score = 0
if (password.length < 4 ) { return password.length }
if (password.toLowerCase()==username.toLowerCase()) return 0
score += password.length * 4
score += ( checkRepetition(1,password).length - password.length ) * 1
score += ( checkRepetition(2,password).length - password.length ) * 1
score += ( checkRepetition(3,password).length - password.length ) * 1
score += ( checkRepetition(4,password).length - password.length ) * 1
if (password.match(/(.*[0-9].*[0-9].*[0-9])/)) score += 5
if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) score += 5
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) score += 10
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) score += 15
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)) score += 15
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)) score += 15
if (password.match(/^\w+$/) || password.match(/^\d+$/) ) score -= 10
if ( score < 0 ) score = 0
if ( score > 100 ) score = 100
return score
}
function checkRepetition(pLen, str)
{
res = ""
for ( i=0; i<str.length ; i++ ) {
repeated=true
for (j=0;j < pLen && (j+i+pLen) < str.length;j++)
repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen))
if (j<pLen) repeated=false
if (repeated) {
i+=pLen-1
repeated=false
}
else {
res+=str.charAt(i)
}
}
return res
}
</script>
</body>
</html>

input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range
{
outline: 1px #0f0 solid;
}
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range
{
outline: 1px #f00 solid;
}