Мобильные HTML5-формы: ошибка ввода

Question

Я создал веб-форму на своем веб-сайте, которая реагирует и работает на моем OnePlus One. Тем не менее, я получаю некоторые сообщения об ошибках, потому что люди (в основном: iPhone, Samsung Galaxy S4 или более ранние версии, все в стандартных веб-браузерах, даже некоторые веб-браузеры на iOS) не могут вводить текст в поля ввода. У меня есть отчет, в котором человек может сосредоточиться на окне ввода (тип: электронная почта), но когда он что-то набирает, он будет отображаться как текст в поле URL-адреса браузера. Все пользователи iPhone просто не могут сфокусироваться или набирать текст в боксах.

Вот мой HTML форма:

<form method='post' name='login-form'> 
    <fieldset> 
     <legend>Login</legend> 
     <div class="controll"> 
      <input type="email" id="email" name="email" placeholder="E-Mail" required /> 
     </div> 
     <div class="controll"> 
      <input type="password" id="password" name="password" placeholder="Password" required /> 
     </div> 
     <div class="controll buttons"> 
      <div class='noacc'>Don't have an account yet? <a href='/register'>Register</a>!</div> 
      <input type='submit' name='submit' value="Sign in" /> 
     </div> 
    </fieldset> 
</form> 

И некоторые C (не все, потому что она распространяется по всей таблице стилей)

input, select { 
    color: rgba(61,60,62,1); 
    font-family: 'robotoregular'; 
    font-size: 1.15em; 
    border: 1px solid rgba(255,107,67,0.75); 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    display: inline-block; 
    padding: 0.6em 0.6em; 
} 

Answer 1

Входного тип электронной почты является довольно новым и не все браузеры поддерживают его. Мобильные устройства особенно опасны для кода, поскольку вы действительно не знаете, какие браузеры (пользователи) используют на своих мобильных устройствах. В большинстве случаев встроенный браузер на устройствах правильно считывает тип ввода электронной почты, но на некоторых старых устройствах html5 не работает правильно, если они не загрузили и не установили браузер, такой как Google Chrome.

Я бы предложил использовать тип ввода «текст» и использовать некоторые javascript или jquery для проверки адреса электронной почты перед отправкой.