Dreamweaver CC 2017 esencial

Campos de texto en Dreamweaver CC 2017 y opciones básicas

¡Prueba gratis durante 10 días

nuestros 1198 cursos !

Prueba gratis Mostrar modalidades de suscripción
Los elementos más típicos de los formularios son los campos de texto, que sirven para que los usuarios puedan escribir dentro de ellos. Veremos cómo crearlos y las opciones de que disponen en el panel Propiedades.

Transcripción

Vamos a empezar a añadir campos a nuestro formulario. El elemento más fácil de añadir, el control más simple son los "inputs", los campos de texto. En realidad hay varios tipos diferentes que son todos muy parecidos. Como podría ser URL o TEL, o 'buscar' por ejemplo. Pero el de texto es el más típico el más habitual y por tanto voy a empezar con él. Para añadir elementos, desde el panel "insertar", simplemente necesito hacer clic en cualquier parte y hacer clic sobre la etiqueta en concreto que quiero añadir, pero también puedo hacerlo de otro modo, puedo pinchar y arrastrar. Cuando añada un campo de estos me encuentro con que realmente me ha añadido dos cosas, me ha añadido por un lado un texto y me ha añadido por otro lado lo que es efectivamente ese campo. Voy a eliminar el texto que me había añadido por defecto. Es bueno de todas formas irse a la vista de código y asegurarse que estoy eliminando el texto correcto, porque a veces puede ocurrir que hagas selecciones que envuelvan más elementos de los que yo esperaba. Y ya que estoy en la vista de código pues me voy a parar a mirar que realmente me ha añadido dos etiquetas no una sola. Me ha añadido la etiqueta "input". Esta etiqueta "input" es, efectivamente entrada, osea la forma que tenemos en el navegador para hacer que el usuario pueda introducir datos. Pero además me ha añadido una etiqueta "label". Esa etiqueta "label" hace referencia al texto que está relacionado con el campo. Osea al texto que indica que es lo que va a llevar ese campo. Es la ayuda visual para que el usuario sepa que es lo que tiene que poner dentro de "Campo", la edad, nacionalidad o su nombre. Es interesante añadir siempre "labels" para que siempre haya una referencia visual, aunque no es la única forma de hacer que se sepa que es lo que tiene que llevar un campo dentro. Vamos a ver diferentes posibilidades que tenemos para trabajar con los campos y con estos "labels". Pero, antes de nada, voy a explicar también otra cosa que es muy importante en cualquier campo, no solamente en estos "inputs". Y es el que todos los campos deberían de tener un atributo "name" que va a servir para asociar este campo a la variable que se va a enviar. Y por otro lado los "labels", tienen un atributo "for" que hace referencia al nombre del campo. Aquí podemos ver "text field", la idea es precisamente esa hacer que estén relacionados. En el caso de los inputs no se nota tanto pero hay otros tipos de controles donde veremos que es imprescindible hacerlo así. Bien, pues si vuelvo otra vez a la vista de diseño, aquí veo ese texto y ese campo. Si me voy a la vista "en vivo" pues además puedo probar rellenar ese campo. Veo que efectivamente puedo escribir sobre él. En el panel de propiedades, en este campo, tengo muchas distintas propiedades relacionadas con él. De hecho es interesante ver que lo que aparece en el panel de propiedades tanto "en vivo", como en la vista de diseño, no es solamente el nombre, que por cierto, aparece aquí este nombre, y que yo puedo cambiar puedo poner aquí "nombre". No me está poniendo identificador y atributo 'name', me está poniendo solamente "name", si me vuelvo al código, sin embargo veo que yo cuando lo cambio en el panel de propiedades en realidad me lo está cambiando en los dos a la vez. Así que es una buena forma de trabajar. Por otro lado, estos campos de texto sirven precisamente para añadir texto y permiten elegir, por un lado, el tamaño de el campo de texto. Por ejemplo, que tenga un ancho, del equivalente de 40 caracteres. En realidad esto no es una buena idea hacerlo desde aquí, es mucho mejor hacerlo desde "CSS". Pero sin embargo si que es interesante el "max lenght", osea controlar el número máximo de caracteres que se puede añadir para, por ejemplo, este nombre. En el caso del nombre en concreto igual no es tan importante, pero si yo quiero poner números de teléfono pues sí que tiene más sentido. El "value" sirve para elegir cuál es el texto inicial que debería tener. Generalmente los formularios aparecen vacíos, pero supongamos que yo tengo un formulario de modificación de datos, aquí aparecen mis datos de usuario. Entonces debería aparecer aquí realmente escrito mi nombre y de hecho ahí lo veo. Por otro lado, el "title", esto sirve para que cuando pase por encima me muestre un pequeño, aquí lo vemos, pequeño "tooltip" en el que me pone ese texto que he añadido. El "placeholder", esto es muy interesante sobre todo cuando estamos trabajando pensando en desarrollo para móviles. Sirve para que aparezca un texto dentro de este campo indicándome qué es lo que tengo que poner. Por ejemplo, puedo poner nombre. Ese texto aparece en un color, aquí lo vemos, más claro, y cuando hago clic y escribo desaparece ya para mantener el texto que yo haya escrito. Si selecciono y quito ese texto, pues aquí veríamos otra vez ese "placeholder". Y luego tenemos más opciones, que también son propias de todos los campos, tenemos la posibilidad de desactivarlo. Si hago clic sobre él, lo desactivo y aparece en gris y además ya no se puede hacer clic sobre él. Esto sirve para hacer que en algunos campos solamente se pueda escribir sobre ellos cuando se haya rellenado otros y así conseguir que el usuario pueda rellenar un formulario complejo de una manera secuencial. Uno que se necesita generalmente es el "require" que sirve para hacer que ese campo sea necesario. En caso de que yo intente enviar este formulario y ese campo no haya sido rellenado, pues que me avise de alguna manera, o que me lo ponga en rojo o algo parecido. "Autocomplete" para permitir que se vaya rellenando sólo. "De sólo lectura" para que no se pueda modificar, y el "autofocus" sirve para que cuando se carga la página, en concreto, este sea el primer campo que ya aparezca seleccionado. Y así puedo ayudar un poquito más aún a los usuarios a que rellenen, porque no tienen ni que empezar seleccionando, es más, esto también es interesante porque si un formulario está bien construido debería de tener un "autofocus" en el primero, debería permitirme escribir en él y cuando pulsase la tecla de tabulador enviarme al siguiente campo. Y aquí me paso entonces, a la parte de la derecha, el "tab index". Este es el número de tabulación donde debería seleccionarse ese campo, si tengo varios campos, pues poniendo diferentes "tab index" conseguiré que, según se va haciendo clic sobre la tecla de tabulador, se vaya pasando de uno a otro, a otro y a otro. Estas son las opciones más habituales, dentro de lo que es el formulario las más normales. Me queda poner dentro del "label" ese nombre... y el siguiente paso tiene que ser ir añadiendo nuevos tipos de campos de texto, podría añadir un segundo campo de texto debajo, en el que voy a poner, como etiqueta, osea como "label": "apellidos", seleccionaría ese campo... le pondría apellidos, haría que fuese requerido, y seguiría trabajando uno tras otro con todos los diferentes campos.

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.