Dreamweaver CC 2017 esencial

Campos HTML5 dentro de Dreamweaver CC 2017

¡Prueba gratis durante 10 días

nuestros 1222 cursos !

Prueba gratis Mostrar modalidades de suscripción
Tipos especiales de campos son los campos HTML5, que se parecen a los campos de texto pero que sirven para que, en el dispositivo donde se visualicen, usen las características de teclado propias del dispositivo y el tipo de campo.

Transcripción

En este video vamos a ver algunos campos muy simples de manejar, pero muy potentes. Son los campos HTML5. Hay muchos tipos de "inputs". Aquí tengo dos que ya he añadido previamente, que son "input", y son todos de tipo texto. Pero igual que tengo este tipo texto, en realidad tengo muchos otros tipos: botones, "checkboxes", color, "date", "file", "number", un montón de ellos. Y cada uno va a tener ciertas características que en los navegadores modernos les van a hacer muy interesantes para usarlos. Voy a ir añadiendo algunos de ellos y vamos a ir viendoles. Por ejemplo, "Correo electrónico". Este correo electrónico en realidad es un campo completamente normal. ¿En qué se diferencia? Bien, pues básicamente en que la forma de verificarlo, la forma de validar el formulario va a ser distinta que con estos textos. Aquí debería de poner email en el "placeholder". Mantengo ese email. Le voy a pedir que sea requerido. Y como digo, lo que va a tener de bueno o de interesante, es que si yo el formulario no lo relleno correctamente, aquí va a entender que tengo que poner una arroba y que tengo que poner un dominio dentro de un correo electrónico. Así que la validación va a ser automática. Otro campo muy típico es el campo de contraseña. Voy a añadirlo después. Estas contraseñas sirven para que cuando el usuario escriba, aparezcan pequeños bolardos: no aparezca el texto que se está escribiendo, sino esos pequeños simbolitos. Para el resto, pues es un poco más o menos parecido. Con "require", etcétera. Otros que también se utilizan mucho, pues para añadir URL, si entonces tendría un campo URL. Tendría campos también de teléfono. Cada uno de ellos, si los selecciono y me voy a la vista de código, pues vemos que en realidad simplemente lo que tienen es un tipo distinto, "type", "type=url", "type=tel", etcétera. Y vamos a tener pues unos cuantos más. Algunos de ellos son interesantes, por ejemplo, pensando en dispositivos móviles. Un campo "Buscar". Y lo que va a hacer va a ser que cuando ese formulario se vea en un dispositivo móvil, en un teléfono, cuando se escriba dentro del input, y aparezca el teclado del teléfono, por ejemplo, en vez de mostrar el botón de "intro", lo que me va a mostrar es el simbolito de búsqueda, indicando que va a hacer una búsqueda cuando haga clic en él. Igual que pasa con él, por ejemplo, cuando esté añadiendo uno de correo electrónico, lo que ocurrirá será que aparecerán las teclas habituales, pero además también, me añadirá dentro de ese teclado, teclas necesarias para añadir correos electrónicos, como por ejemplo la arroba. En el caso del número, en el caso del teléfono, pues también, me pondrá un teclado específico para poder hacer más fácilmente los teléfonos. Así que es bueno utilizar todos estos tipos de campo HTML 5, sobre todo para facilitar la tarea de rellenar formularios en el caso de dispositivos móviles. Me queda por decir simplemente el de "número" que es, pues evidentemente, para añadir números. Aunque éste en concreto tiene alguna característica específica. Vaya, lo he añadido donde no era. Estoy pinchando y arrastrando, y en realidad, es más cómodo hacer una selección sobre una etiqueta a hacer clic y colocarlo después. En el caso del número, como decía, primero, en muchos navegadores me va a añadir las dos flechas para hacer que suba y que baje ese número. Pero además voy a tener las características de valor mínimo, por ejemplo, cero y, valor máximo, por ejemplo, diez. Y el "Step", que sirve para que cuando se hace clic sobre las flechas, vaya de uno en uno, de dos en dos o de tres en tres, por ejemplo, si aquí pongo un dos, pues iría de dos en dos, si aquí pusiese un uno, iría de uno en uno.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.