samedi 28 février 2015

Mobile HTML5 Forms: Input bug

I've made an webform on my website which is responsive, and working on my OnePlus One. However, I am getting some bug reports of it because people (mostly: iPhones, Samsung Galaxy S4 or earlier versions, all on standard web browsers, even some web browsers on iOS) can't enter text in the input fields. I've got a report where the person can focus on an input box (type: email), but when he types something, it will appear as text in the URL Box of the browser. All the iPhone users just can't focus, or type text in the boxes.


Here is my HTML Form:



<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>


And some CSS (Not all, because it is spread all over the stylesheet)



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

Aucun commentaire:

Enregistrer un commentaire