HTML - Problema formulario en tabletas

   
Vista:

Problema formulario en tabletas

Publicado por Pablo (4 intervenciones) el 26/03/2015 09:52:25
He creado un formulario en Html5 y se adapta bien a los diferentes tipos de dispisitivos, pero tengo un problema en los smart phones y las tabletas.
Cuando relleno un campo con el teclado la opción para terminar es IR, y en lugar de pasar al siguiente campo me hace un ENTER y me valida el formulario.
¿Hay alguna opción en el código que evite este problema?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Problema formulario en tabletas

Publicado por xve (1178 intervenciones) el 26/03/2015 12:11:51
Para cambiar entre inputs es con la tecla TAB...por defecto, el Enter siempre envía el formulario.

Como querrás que se envié el formulario, pulsando con el ratón en el botón de enviar?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema formulario en tabletas

Publicado por Pablo (4 intervenciones) el 27/03/2015 09:04:06
Para el envío del formulario he puesto un btn-success extralarge de color verde mas bonito que un potosí.

Pero tu idea del tab me parece correcta, y les enseñaré a hacerlo.

El problema es que mis ''usuarios'' tienden a dejar en blanco todos los campos obligatorios y he tenido que ingeniarmelas mucho para que los rellenen sí o sí (solo tres campos, su nombre, el motivo por el que lo rellenan y la empresa dónde tienen la incidencia).

Les he hecho un formulario en html5 responsive para que no tengan la excusa de que abrir el portátil es un engorro. El móvil lo llevan encendido siempre.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel

Problema formulario en tabletas

Publicado por Angel (101 intervenciones) el 27/03/2015 14:25:37
pues como todo formulario pon un * al lado de nombre y asi sabran que ese texto es obligatorio >_< igual con una Funcion puedes hacer que te valide los datos que vas poniendo o te de error y te diga que te falta rellenar datos obligarios y no se envie el form ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema formulario en tabletas

Publicado por Pablo (4 intervenciones) el 28/03/2015 00:00:07
Gracias Angel por tu aportación.

Un * no impide a mis usuarios dejarse el campo en vlanco, por lo que a través de un validator.js "impido" que se dejen uno de los tres campos vacíos.

Pero el formulario tiene más. Cuando rellenan el último campo obligatorio, pulsando IR, les envía el formulario y todavía queda algún campo "optativo" sin rellenar.

Haciendo caso a Xavi, les aconsejaré que usen el TAB.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel

Problema formulario en tabletas

Publicado por Angel (101 intervenciones) el 28/03/2015 02:19:49
ese * es para que sepan que ese campo es obligatorio, luego ya con PHP o JS puedes hacer la funcion del Requerid ;)

un ejemplo seria este con PHP ;)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";
 
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
  }
 
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
  }
 
  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
  }
 
  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
 
  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
?>

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
 
Name: <input type="text" name="name">
<span class="error">* <?php echo $nameErr;?></span>
<br><br>
E-mail:
<input type="text" name="email">
<span class="error">* <?php echo $emailErr;?></span>
<br><br>
Website:
<input type="text" name="website">
<span class="error"><?php echo $websiteErr;?></span>
<br><br>
<label>Comment: <textarea name="comment" rows="5" cols="40"></textarea>
<br><br>
Gender:
<input type="radio" name="gender" value="female">Female
<input type="radio" name="gender" value="male">Male
<span class="error">* <?php echo $genderErr;?></span>
<br><br>
<input type="submit" name="submit" value="Submit">
 
</form>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar