creo que la pregunta es muy basica pero, estoy aprendiendo y he encontrado la sintaxis de input y label de las dos maneras
-
1Bienvenido a Stack Overflow en español. Las dos maneras sirven por igual, pero si tienes algún estilo que afecte al label, no afectará a los dos puntos, así que deberías colocarlo dentro de la etiqueta.– Andy Samuelel 21 ago. 2018 a las 22:27
-
muchas gracias... de gran ayuda recién empiezo en esto– Kennyel 21 ago. 2018 a las 22:37
2 respuestas
La primera forma está bien, pero no recomiendo de ningún modo la segunda forma, incluso llegaría a ser de esa forma pero si hay elemento que los envuelve, así:
<div class="input-text-group">
<label for="foo0">Label</label> :
<input type="text"/>
</div>
Porque los dos puntos (:) podrían heredar los estilos por defecto del padre contenedor e incluso podrían omitirse y crearse usando pseudo-elementos, pero no lo veo como una versión óptima, ya que es un uso visual más que de estructuración de datos, que al fin y al cabo para eso es html
.
No hay mucho consenso del tema, lo puedes hacer dependiendo de la necesidad, por ejemplo mis recomendados serían:
Label que envuelve el input
Permite controlar dar estilos al texto del label y al input por separado, aunque el input heredará los estilos del label.
<label for="foo1">
Label:
<input type="test" id="foo1"/>
</label>
Label separado del input
Permite controlar dar estilos al texto del label y al input por separado, pero el input no heredará los estilos del label.
<label for="foo2">
Label:
</label>
<input type="test" id="foo2"/>
Label separado del input y este último anidado
Permite darle estilos al input avanzados, como pseudo-elementos con iconos, así como acomodarlos a una grilla de tamaños. Este es el preferido de los frameworks la mayoría de veces.
<label for="foo3">
Label:
</label>
<div class="input-group">
<input type="test" id="foo3"/>
</div>
Este es el que usa bootstrap por dar otro ejemplo:
<div class="form-group">
<label for="foo4">Name:</label>
<input type="text" class="form-control" id="foo4">
</div>
Y este el de google con material design:
<div class="mdc-text-field">
<input type="text" id="foo6">
<label class="mdc-floating-label" for="foo6">Hint text</label>
<span class="mdc-line-ripple"></span>
</div>
El ultimo añade una línea de estado, que se puede animar vía css con los estados del input, pero yo prescindiría de ella y usaría pseudos para lograr el mismo efecto.
Yo en muchas ocasiones, he decidido mezclarlos en una versión muy similar a los dos, pero con la posibilidad de poder controlar el label mediante estados css del input, así.
<div class="grupo-question">
<input type="text" class="form-control" id="foo7">
<label for="foo7">Name:</label>
</div>
Y acomodo el orden de los elementos usando flexbox
y order
, así:
.grupo-question{
display: flex;
}
.grupo-question .form-label{
order: 1;
}
.grupo-question .form-label::after{
content: ':';
margin-left: -0.2em;
padding-right: .5em;
}
.grupo-question .form-control{
order: 2;
}
.grupo-question .form-control:focus ~ .form-label{
color: blue;
order: 2;
padding-left: 0.5em;
}
.grupo-question .form-control:hover ~ .form-label{
color: red;
}
.grupo-question .form-control:active ~ .form-label{
color: green;
}
<div class="grupo-question">
<input type="text" class="form-control" id="foo7">
<label for="foo7" class="form-label">Label </label>
</div>
Según la W3CUsing label elements...
<label for="nombre">Nombre:</label>
<input id="nombre" name="nombre" type="text" />
Lo fundamental es que for concuerde con id en la practica esto es utilizado por sistemas de asistencia como los lectores de pantalla.
Pero en caso de que necesites omitir label puedes utilizar aria-label para que los lectores de pantalla puedan leer de que trata ese input
<input type="text" name="nombre" aria-label="Nombre">