You are here
HTML5 Tutorial: Forms! Programación 

HTML5 Tutorial: Forms!

HTML5 Tutorial: Forms!

Lo que solía requerir javascript, ahora será construido en HTML. En primer lugar, voy a cubrir nuevos tipos de entrada, y luego pasar a los nuevos atributos. He incluido ejemplo de sintaxis para cada nuevo tipo y atributo, y arrojados en las capturas de pantalla en su caso.

De acuerdo, vamos a empezar.

Nuevos tipos de entrada:

Fecha, mes, y la Semana – 3 HTML 5 introduce nuevos tipos de entrada relacionados con la fecha para uso en formas: fecha, mes, más el recuento semanal.

Estos nuevos tipos crean automáticamente un selector de fecha en su campo. He agrupado fecha, mes, y la Semana en la misma categoría porque lo hacen esencialmente lo mismo.

(Obviamente, la fecha le permite elegir una fecha específica, mientras que el mes / semana le permiten elegir meses y semanas, respectivamente).

Esto es emocionante porque fecha-recolectores como este anteriormente sólo se añadieron con javascript. Ahora mira lo fácil que es y lo bien que se ve. He pegado el sintaxis y una captura de pantalla a continuación:


Código:

<form>
    <label>Date:</label>
    <input type="date" name="Date">
</form>

Tiempo – Como es posible que haya adivinado, esto le permite añadir campos de tiempo a sus formas. Lo bueno de este nuevo tipo de entrada El tiempo es la forma en que se implementa. Se crea automáticamente las flechas para aumentar o disminuir el tiempo.

Una vez más, esto es algo que no se podía hacer con HTML plano en el pasado. He pegado el código y otra captura de pantalla a continuación.

En el código, el “paso” se calcula en cuestión de segundos, por lo que 600 = 10 minutos.

Código:

<form>
    <label>Time:</label>
    <input type="time" step="600" name="Date">

</form>

De fecha y hora y fecha y hora local – de fecha y hora es exactamente lo que su nombre indica: una combinación entre la nueva fecha y hora tipos de entrada.

Te permite crear un campo de entrada y dejar que los usuarios seleccionan un tiempo y una fecha en un campo. Incluye el cuadro selector de fecha y las flechas de tiempo de aumento / disminución. Como es de suponer, la sintaxis es muy simple:

Código:

<form>
    <label>Time:</label>

    <input type="datetime" name="DateTime">
</form>

Rango – Esto le permite agregar un control deslizante de rangos a sus formas como un campo de entrada.No JavaScript o cualquier cosa! Básicamente, se crea una línea con los valores mínimo y máximo y tener un control deslizante que los usuarios pueden moverse en el valor correcto. Esta es otra característica que solía requerir javascript, pero ahora es muy fácil. Ésta es la sintaxis y una captura de pantalla:

Código:

<form>
<label>Range:</label>
<input type="range" name="Range" min="0" max="100" value="50" step="10">

</form>

Buscar – Indica que un campo es un cuadro de búsqueda. Los distintos navegadores añaden diferentes características para buscar las cajas. Por ejemplo, si un campo de entrada se identifica como un cuadro de búsqueda, Safari y Chrome añaden automáticamente una “x” en el lado derecho para borrar el contenido de la caja de búsqueda.

Código:

<form>
<label>Search:</label>
<input type="search" name="Search">

</form>

Color – Permite al usuario elegir un color para un elemento. Esto no es compatible con ningún navegador, sin embargo, por lo que no puede mostrar una captura de pantalla.
Código:

<form>
<label>Color:</label>
<input type="color">

</form>

Email – Especifica que un campo sólo debe contener una dirección válida de correo electrónico. Devuelve un error si el usuario intenta enviar un formulario con un correo electrónico válido.

Código:

<form>
<label>Email:</label>
<input type=”email”>

</form>

Tel – Especifica que un campo sólo debe contener un número de teléfono. Devuelve un error si el usuario intenta enviar un formulario con un número de teléfono válido.
Código:

<form>
<label>Telephone:</label>
<input type=”tel”>

</form>

url – Especifica si un campo es una URL y agrega automáticamente http: // a lo que se teclee.
Código:

<form>
<label>Website</label>

<input type=”url”>
</form>

Número – Indica que un campo debe contener un número, e inserta automáticamente flechas para aumentar / disminuir el valor, similar al campo “tiempo”.
Código:

<form>
<label>Number</label>

<input type="number" name="number" min="1" max="10" step="1" value="1">

</form>

Los nuevos atributos

Requerido – Indica que el usuario tiene que rellenar un valor antes de enviar un formulario. Devolverá un error si no se introduce ningún valor.

Código:

<form>
         <label>Required:</label>

             <input type="text" name="required" required="true">
</form>

El enfoque automático – Permite la página del sitio automáticamente el cursor en un campo de entrada durante la carga de la página. El usuario puede incluso desactivar el enfoque automático si no les gusta.
Código:

<form>
<label>Autofocus:</label>
<input type="text" name="AF" autofocus="true">

</form>

Lista – Se utiliza para identificar un elemento que enumera las opciones predefinidas para el usuario. Una lista debe tener el mismo ID que un elemento de lista de datos en el mismo documento.

Código:

<form>
<label>Search Engines: <input name="SE" type="url" list=Engines></label>

<datalist id=Engines>
 <option value="http://www.google.com/" label="Google">
 <option value="http://www.bing.com/" label="Bing">
 <option value="http://www.yahoo.com/" label="Yahoo">

 <option value="http://www.ask.com/" label="Ask">
</datalist>
</form>

Patrón – Le permite establecer un patrón para la introducción de texto en un campo seleccionado.Devuelve un error si la entrada no coincide con el patrón.

Código:

<form>
         <label> Product number:</label>
         <input pattern="[A-Z][0-9]{5}" name="Product" title="The product number is an uppercase letter followed by 5 digits."/>

</form>

Autocompletar – Ayuda a los usuarios a completar los formularios basados en la entrada del usuario anterior. Por ejemplo, si un usuario ya ha entrado en su dirección una vez en un formulario, autocompletar ofrece una opción para seleccionar la entrada de dirección anterior. Autocompletar se puede activar o desactivar en cualquier campo.
Código:

<form>
<label> City:</label>
<input type="text" name="city" autocomplete="on">

<label>Credit Card: </label>
<input type="text" name="Credit" autocomplete="off">
</form>

Marcador de posición – Coloca una corta pista o instrucciones en un campo de entrada para ayudar al usuario con la entrada de datos.


Código:

<form>
<label>Email:</label>
<input type="email" name="Email" placeholder="Enter your email address">

</form>

Múltiple – Indica si se permite o no al usuario especificar más de un valor. Los valores deben estar separados por una coma.

Código:

<form>
<label>Email Addresses: <input name="email" type="email" list=emails multiple></label>

<datalist id=emails>
<option value="test@test.com">
<option value="test2@test.com">
<option value="test3@test.com">
<option value="test4@test.com">
</datalist>
</form>

Min / Max – Indicar los valores del rango permitido de un elemento.
Código:

<form>
<label>Pick a number from 1-10:</label>
<input type="number" name="number" min=0 max=10>

</form>

Paso – Especifica los valores incrementales en ciertos campos. En el siguiente ejemplo, tenemos un control deslizante de rangos con los valores de 0-100. El paso indica que el usuario puede seleccionar cualquier múltiplo de 10 (10,20,30,40, etc …)
Código:

<form>
<label>Range:</label>
<input type="range" name="Range" min="0" max="100" value="50" step="10">

</form>

Conclusión

HTML5 ofrece una serie de nuevas mejoras con respecto a HTML 4, muchos de los cuales le hará la vida mucho más fácil. Como se puede ver, muchas características sólo están disponibles con javascript ahora se construirán en HTML5. El uso de HTML5, los desarrolladores web pueden desarrollar formas potentes rápidamente, con más opciones disponibles para ellos que nunca.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts