Con tel, HTML5 proporciona un tipo de campo diseñado para su uso en relación con números de teléfono.
Su número de teléfono: <input type="tel" name="telefon">.
En smartphones y tablets, al hacer clic en el campo se abre el teclado numérico para introducir el número de teléfono.
Campos para direcciones de internet con url
Los campos de tipo url sirven para introducir direcciones de Internet.
<input type="url" />
Los campos URL se validan automáticamente. Los navegadores deben comprobar si se ha introducido realmente una URL sintácticamente correcta para dichos campos.
Campo con salida
El campo de salida puede utilizarse para emitir contenido. Esto es interesante, por ejemplo, en relación con JavaScript. Este campo puede utilizarse para mostrar variables. Sin embargo, el campo también puede utilizarse para mostrar valores calculados. El campo está destinado exclusivamente a la salida de datos. Por lo tanto, no es posible la introducción de datos por parte del usuario.
He aquí un ejemplo:
<script> /* <![CDATA[ */ function output(){ palabra1="Hola", palabra2="¡Mundo!" document.forms[0][0].value=palabra1+palabra2 } /* ]]> */ </script>En este ejemplo se han declarado dos variables. El contenido de estas variables debe mostrarse en el campo de salida.
<body onload="output()"> <form action="evaluacion.php" method="get" name="form"> <output name="campo" /> </form> </body>
Navegadores como Opera muestran el valor deseado. Los navegadores que no pueden hacer nada con output, en cambio, no muestran nada.output reconoce tres atributos.
- form - El formulario en el que está contenido el elemento output.
- for - Establece la referencia a los campos o valores a los que se refiere el campo de salida. Los valores y campos deben estar separados por espacios.
- name - Si se especifica un nombre, el contenido del campo también se transfiere cuando se envía el formulario.
- value - Especifica el valor del campo.output es, por supuesto, también adecuado para cálculos matemáticos. Por ejemplo, puede utilizar los campos prompt para consultar valores y luego multiplicarlos entre sí.
<!DOCTYPE html> <html> <head> <title>resultado</title> <script> /* <![CDATA[ */ function multi(){ a=parseInt(prompt("Dígito 1.",0)); b=parseInt(prompt("Dígito 2.",0)); document.forms["form"]["result"].value=a*b; } /* ]]> */ </script> </head> <body onload="multi()"> <form action="#" method="get" name="form"> <label>El resultado de la multiplicación:</label> <output name="resultado" /> </output> </form> </body> </html>Al abrir la página, se abre una ventana de consulta y se solicita el primer valor.
Si confirma la entrada con Aceptar, se abre una segunda ventana. (Si se pulsa Cancelar en una de las dos ventanas, el resultado será NaN, es decir, Not a Number ).
Si la segunda ventana también se confirma con OK, el script transfiere el resultado de la multiplicación como valor al campo de salida.
Indicadores de progreso con avance
Se puede realizar una visualización de progreso utilizando el elemento progreso. Esto es interesante, por ejemplo, en relación con la descarga de archivos..gif "HTML y CSS para principiantes (parte 16): Formularios (4)")
Google ya interpreta este elemento. Otros navegadores que no reconocen el elemento muestran su contenido.
Un ejemplo:
La descarga se está ejecutando... <progress value="250" max="1000"> <span id="downloadProgress">25</span>% </progress>
El elemento progress tiene dos atributos:
- max - Especifica cuántos pasos se requieren en total.
- value - Se utiliza para especificar cuántos pasos se han completado ya.
El elemento progress sólo se vuelve realmente interesante cuando JavaScript entra en juego. La mejor manera de mostrar cómo se puede utilizar una combinación de progreso y JavaScript es con un ejemplo.
Este ejemplo se basa en un formulario que debe completarse en varios pasos. La siguiente información se solicita una tras otra:
- Nombre
- Apellidos
- Calle y número
- CÓDIGO POSTAL
- Ciudad
Por supuesto, estos pocos valores podrían consultarse en una sola página. Pero, ¿y si hay que obtener mucha información del usuario? Entonces los formularios extensos tienden a ser un elemento disuasorio. Por eso es mejor dividir los formularios en varias páginas.
Supongamos que accede al formulario.
Aquí se le pide su nombre de pila. La barra de estado debajo del campo se ha realizado utilizando un elemento de progreso.
<fieldset id="step1" style="display: none;"> <p>Primer nombre: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Paso 1 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(2)"></p> </fieldset>
Varias cosas son cruciales en esta sintaxis. En primer lugar, los elementos individuales fieldset se establecen en invisible. Aunque no lo parezca a primera vista, el formulario en realidad sólo consta de una página. Los campos individuales se han insertado cada uno en sus propios elementos fieldset. Y estos elementos fieldset (incluido su contenido) no son visibles.
Se utiliza una función de conmutación de JavaScript para que los elementos que están ocultos se vuelvan visibles después de hacer clic en los respectivos botones Siguiente. Más adelante veremos cómo funciona esto.
Pero primero volvamos al formulario. Al hacer clic en los botonesSiguiente, usted es guiado a través del formulario. Los elementos de progreso muestran cuánto ha avanzado.
Por cierto, no es un gran problema si un navegador no interpreta el elemento de progreso. Estos navegadores simplemente muestran el contenido de este elemento.
<progress max="5" value="1">paso 1 / 5</progress>
En lugar del indicador de progreso, se muestra un texto según el esquema paso 2 / 5.
El formulario tiene el siguiente aspecto:
<form method="post" action="#"> <fieldset id="step1" style="display: none;"> <p>Nombre: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Paso 1 / 5</progress></p> <pp><input type="button" value="Next" onclick="nextStep(2)"></p> </fieldset> <fieldset id="step2" style="display: none;"> <p>Apellido: <input type="text" name="apellido" size="30"></p> <p><progress max="5" value="2">Paso 2 / 5</progress></p> <pp><input type="button" value="Next" onclick="nextStep(3)"></p> </fieldset> <fieldset id="step3" style="display: none;"> <p>Calle: <input type="text" name="calle" size="30"></p> <p><progress max="5" value="3">Paso 3 / 5</progress></p> <pp><input type="button" value="Next" onclick="nextStep(4)"></p> </fieldset> <fieldset id="step4" style="display: none;"> <p>PLZ: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Paso 4 / 5</progress></p> <pp><input type="button" value="Next" onclick="nextStep(5)"></p> </fieldset> <fieldset id="step5" style="display: none;"> <p>Localización: <input type="text" name="location" size="30"></p> <p><progress max="5" value="5">Paso 5 / 5</progress></p> <input type="submit" value="Fin"> </fieldset> </form>
Tres cosas son importantes aquí:
- A cada elemento fieldset se le asigna un ID.
- Todos los elementos fieldset están configurados como display: none.
- La función nextStep (s) se asigna a los botones.
La función nextStep (n ) tiene el siguiente aspecto:
<script> /* <![CDATA[ */ function naechsterSchritt(n) { switch(n) { case 1: document.getElementById('schritt1').style.display = "block"; break; case 2: document.getElementById('schritt1').style.display = "none"; document.getElementById('step2').style.display = "block"; break; case 3: document.getElementById('step2').style.display = "none"; document.getElementById('step3').style.display = "block"; break; case 4: document.getElementById('step3').style.display = "none"; document.getElementById('step4').style.display = "block"; break; case 5: document.getElementById('step4').style.display = "none"; document.getElementById('step5').style.display = "block"; break por defecto: break; } } } nextStep(1); /* ]]> */ </script>
Esta función muestra el elemento fieldset actual y oculta los demás elementos fieldset. Asegúrese de colocar la función después de la definición de los campos. Por lo tanto, es mejor colocarla después del cierre </form>.
