Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Select required en HTML5

HTML - Select required en HTML5

Volver
Nuevo Tema
<<>>
 
Vista:

Select required en HTML5

Publicado por Pablo (8 intervenciones) el 14/05/2019 22:18:00
Buenas noches,
Tengo un formulario con tres inputs y un select.

A los inputs les he puesto required/ y funciona bien, si alguien se deja un campo en blanco, le reclama llenarlo.

Pero tengo un problema con el select:

Como no tengo la posibilidad de ponerle un placeholder con un mensaje entrante de: "Seleccione de esta lista", a pesar de que el value está a "", si termino la etiqueta con required/ admite como válido el Seleccione de esta lista.

He estado buscando en la documentación de Bootstrap y al pareceer lo estoy haciendo bien, pero no me funciona.

¿Se os ocurre algo?.
Gracias de antemano.
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 Kevin
Val: 45
Ha aumentado su posición en 3 puestos en HTML (en relación al último mes)
Gráfica de HTML

Select required en HTML5

Publicado por Kevin (11 intervenciones) el 14/05/2019 22:34:41
Saludos, Pablo.

Puedes evitarlo poniendo los option dentro de un optgroup.

Ejemplo:

1
2
3
4
5
6
7
8
<select>
<optgroup label='Titulo'>
   <option>Algo</option>
   <option>Algo2</option>
   <option>Algo3</option>
   <option>Algo4</option>
</optgroup>
</select>

Sería algo como eso, ya nos comentarás.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar

Select required en HTML5

Publicado por Pablo (8 intervenciones) el 15/05/2019 11:08:00
Gracias Kevin.

Tu propuesta me cambia el estilo porque muestras el select vacío hasta que pulsas en él y aparece la etiqueta.

Eso no sería un problema si la aplicación fuera para mi uso personal, pero es para ponerla en un kiosko de información y los marketeers me odian cuando les cambio el estilo.

Por otro lado, cargo el select de forma dinámica desde una tabla de BD, lo mismo es parte del problema.

Así es que como necesito un placeholder que me muestre cierta información, recurro a un <option value="" selected> que me lo muestre a modo de placeholder.

Mi código el el siguiente:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
include ('js/common.inc.php');
?>
 
<!DOCTYPE html>
<html lang="es">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Hello World, bootstrap4</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
	<div class="container">
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">Email address</label>
    			<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required/>
    			<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
			</div>

			<div class="form-group">

    			<label for="exampleInputPassword1">Password</label>

    			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required/>

  			</div>

  			<div class="form-group">

  				<select class="form-control" required/>

  					<optgroup>

  						<option value="" selected>Select a Department</option>

  			<?php 

				$resultado = $conexion->query('SELECT id, name FROM department ORDER BY name ASC');
				foreach($resultado as $row)

				{

				echo '<option value="'.$row['id'].'">'.utf8_encode($row['name']).'</option>';
				}
				 ?>
  					</optgroup>
  				</select>
  			</div>
 
  			<div class="form-group form-check">
    			<input type="checkbox" class="form-check-input" id="exampleCheck1">
    			<label class="form-check-label" for="exampleCheck1">Check me out</label>
  			</div>
  				<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>
</body>
</html>

Creo que tendré que recurrir a javascrip para leer el <select> antes de enviar los datos al siguiente paso.

Gracias por tu tiempo.
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 José Manuel
Val: 61
Ha aumentado 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Select required en HTML5

Publicado por José Manuel (18 intervenciones) el 20/05/2019 11:08:37
Hola. Solamente por si sirve de complemento a la respuesta de Kevin y te ayuda adicionalmente. Hace tiempo publiqué un artículo sobre este tema precisamente en mi blog: https://obelearningservices.com/html-5-required-select/. No hay problema en borrar este mensaje si consideráis que es spam.

Quizás quieras probar antes de usar JavaScript. Un saludo,
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