ФорумСообществоФлейм → html 5 формма

html 5 формма

  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 21 января 2011 г. 10:40

    пример можно посмотреть тут: http://xmast.net/html5form.html
    работает только в 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>
    Спустя 249 сек.
    заметил интересную вещь - title добавляется к ошибке от pattern
    Спустя 63 сек.
    алсо эта красная оболочка на css сделана

    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;
    }
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 21 января 2011 г. 10:56, спустя 16 минут 2 секунды

    вопрос был вот в чём - http://html5.validator.nu/?doc=http%3A%2F%2Fxmast.net%2Fhtml5form.html
    выдаёт что форма не валидная) хуй знает почему
  • md5

    Сообщения: 11958 Репутация: N Группа: в ухо

    Spritz 21 января 2011 г. 22:05, спустя 11 часов 9 минут 24 секунды

    как это хуй знает почему?
    там же написано, почему
    все умрут, а я изумруд
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 22 января 2011 г. 4:53, спустя 6 часов 48 минут 25 секунд


    как это хуй знает почему?
    там же написано, почему


    Error: Attribute placeholder not allowed on element input at this point.
    с хуя?

    ниже написано:
    Attributes for element input:
    Global attributes
    accept
    alt
    autocomplete
    autofocus
    checked
    dirname
    disabled
    form
    formaction
    formenctype
    formmethod
    formnovalidate
    formtarget
    height
    list
    max
    maxlength
    min
    multiple
    name
    pattern
    placeholder
    readonly
    required
    size
    src
    step

    след. ошибка в таком же духе
    type
    value
    width
  • vasa_c

    Сообщения: 3131 Репутация: N Группа: в ухо

    Spritz 22 января 2011 г. 5:35, спустя 41 минуту 21 секунду

    там не только not allowed, но и at this point.
  • fgets

    Сообщения: 1099 Репутация: N Группа: Кто попало

    Spritz 22 января 2011 г. 12:23, спустя 6 часов 48 минут 44 секунды


    там не только not allowed, но и at this point.


    и куда же его тогда?)

Пожалуйста, авторизуйтесь, чтобы написать комментарий!