Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
<style>
label{
display: inline-block;
width: 120px;
}
</style>
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" /><br><br>
</form>Cuando un label está asociado a un input mediante los atributos for e id respectivamente, al pulsar sobre el label, el cursor se posicionará en el input.
Ejercicio
Para resolver este ejercicio, utilizaremos las siguientes etiquetas:
<textarea></textarea>
<input type="checkbox">
<input type="submit">Fieldset
Dan problemas en el crossbrowsing.
<fieldset>
<legend>Cabecera del fieldset</legend>
Lorem...
</fieldset>Ejercicio
Para realizar este ejercicio, no poner padding a los fieldset, debido a problemas de cross browsing con IE.
fieldset{
…
padding:0px; /*no poner padding a los fieldset por problemas de compatibilidad con IE*/
border: solid black 1px;/*Habrá que especificar explícitamente el borde del fieldset para que haya compatibilidad con IE*/
}Si nuestro navegador no reconoce los nuevos <input> de html5, mostrará un <input type=»text» /> en su lugar.
Nuevos atributos
<form>
El atributo autocomplete almacena los resultados en la caché para el futuro
autocomplete<input type="text" autocomplete="on"/>
<br/><br/>
El atributo autofocus coloca el foco por defecto en el input que lo invoca
<br/>autofocus<input type="text" autofocus />
<br/>
<br/>placeholder<input type="text" placeholder="pista acerca del contenido"/>
<br/>
<br/>pattern<input type="text" title="debes introducir 5 dígitos numéricos" pattern="^[0-9]{5}$"/>
<input type="submit" />
<br/><br/>
El atributo formnovalidate permite enviar los datos del formulario aunque estos no hayan sido validados. Podemos utilizar este atributo junto con el botón de submit o con el tag del formulario(<form>)
<input type="submit" value="envio sin validación" formnovalidate="formnovalidate"/>
</form>Nuevos inputs
search
<input type="search" />number
Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="number" value="-6"/>range
Validación numérica, en plataformas móviles, optimiza el teclado para escribir números. Atributos: min, max, step (admite decimales usando el punto)
<input type="range" max="10" min="0" value="7" step="2" />tel
Optimiza el teclado para escribir teléfonos
<input type="tel"/>url
Validación de url, en plataformas móviles, optimiza el teclado para escribir url’s
<input type="url"/>Validación de mail, en plataformas móviles, optimiza el teclado para escribir mails
<input type="email"/>Color
<input type="color"/>Fechas y horas:
time
Puede ser inicializado, acepta los atributos min, max y step
<input type="time" value="10:20"/>date
Puede ser inicializado, acepta los atributos min, max y step
<input type="date" value="1982-07-24"/>datetime
Es una combinación de date y time. Se diferencia de datetime-local en que muestra la hora local
<input type="datetime" value="2011-12-22T01:30Z"/>datetime-local
<input type="datetime-local" value="2011-12-22T01:30"/>week
<input type="week" value="1982-W17"/>month
<input type="month" value="1982-07"/>datalist
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>required, valid, invalid
<style>
input[required] {
border: solid 4px blue;
}
input:valid{
background:green;
}
input:invalid{
background:red;
}
label{
width:150px;
display:inline-block
}
</style>
<form>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" required="required" /><br><br>
<label for="mail">Email:</label>
<input type="email" id="mail" required="required"/>
</form>Ejercicio
- Campos requeridos deben tener borde negro.
- Los campos válidos deben tener fondo verde.
- Los campos inválidos deben tener fondo rojo.
- La edad mínima debe ser de 0 años y la máxima de 100 años. Para ello usaremos los atributos «min» y «max».
- La página debe cargarse con el foco en el campo nombre.
- El código postal tendrá el siguiente patrón: «^[0-9]{5}$».
Maquetando los placeholder
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
} o si queremos filtrar por class:
.gris::-webkit-input-placeholder { /* Chrome */
color: #CECECE;
}
.gris:-ms-input-placeholder { /* IE 10+ */
color: #CECECE;
}
.gris::-moz-placeholder { /* Firefox 19+ */
color: #CECECE;
opacity: 1;
}
.gris:-moz-placeholder { /* Firefox 4 - 18 */
color: #CECECE;
opacity: 1;
}progress, meter
La etiqueta progress es apropiada para mostrar el grado de completitud de una tarea determinada (un formulario, por ejemplo). Meter es más apropiado para mostrar medidas no relacionadas con una tarea, como espacio en disco o uso de memoria
<progress value="50.0" max="100.0">50%</progress><meter value="30.0" min="0.0" max="100.0" low="20.0" high="80.0" optimum="40.0">300MB megas de un 1GB</meter>output
<script type="text/javascript">
function calculation() {
var o = document.getElementById("result");
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
o.value = parseFloat(num1.value) + parseFloat(num2.value);
}
</script>
<input type="number" id="num1"/>
<input type="number" id="num2" />
<p>Resultado: <output name="result" id="result"></output></p>
<p><button onclick="calculation()">Calcular</button></p>