Tips útiles a la hora de crear formularios con HTML

Todos en alguna ocasión, nos hemos visto en la necesidad de buscar en Google el cómo hacer algo que en teoría es muy sencillo pero que por despiste, siempre nos olvidamos de apuntar.

Como me ha pasado eso mismo a mi en más de una ocasión, he decidido crear esta entrada con algunos tips para tenerlas a mano cuando cree futuros formularios. Espero que os sean de utilidad y si tenéis alguno vosotros, estaré atenta a vuestros comentarios y los iré añadiendo a la entrada para tenerlos todos juntos.


Tip 1 - Evitar que un botón active un formulario

¿Cuántas veces has querido crear un botón que simplemente cargue unos datos, muestre un pequeño texto o simplemente valide los campos del formulario antes de que el usuario decida enviarlo?

Para ello sólo bastaba con que el método "onclick" del botón en cuestión devolviera un false.

onclick="miMetodo(); return false;"


Tip 2 - Abrir enlaces en una pestaña nueva

Si no quieres que los usuarios al encontrar un enlace en tu página web la abandonen, lo mejor es que la página a la que hace referencia ese link se abra en una pestaña nueva. De esta forma, si al usuario le apetece regresar a la posición en la que estaba leyendo, tu página sigue donde la dejó y la del link en otra pestaña.

Para esto, hay que añadir target = "_blank" al link.

<a href="url" target="_blank"> Link en otra pestaña </a>


Tip 3 - Validar los campos antes de enviar

Hay momentos en los que tendrás que validar la información que ha aportado el usuario antes de procesarla, como puede ser que los campos tengan valor, una estructura concreta o que simplemente quieres poner un tick verde en todos los campos que están bien.

La solución es similar al Tip 1, solo que el "return false" estaría en los casos que no cumplan los requisitos que queremos que cumplan los campos antes del envío y devolvería true en el caso de que todo estuviera bien.

See the Pen Untitled by Eva (@evapikachu) on CodePen.


Tip 4 - Regex

Yo en estos casos, acostumbro a buscar una página que valide los patrones que voy a usar antes de utilizarlos en mi web, de esta forma se puede probar muchos textos diferentes rápido y así te quedas con el patrón correcto.

Os dejo por aquí un par de páginas, aunque si buscáis en Google seguro que os aparecen muchas más.

regex101.com
regexr.com


Comentarios

Publicar un comentario

Entradas populares de este blog

Minterms y Maxterms

Imagen
Minterm:  Producto lógico de todas las variables negadas o sin negar (producto canónico). Maxterm : Suma lógica de todas las variables negadas o sin negar (suma canónica). Tabla: a b c   Minterms   Maxterms 0 0 0   m 0 =a c ·b c ·c c   M 0 =a+b+c 0 0 1   m 1 =a c ·b c ·c   M 1 =a+b+c c 0 1 0   m 2 =a c ·b·c c   M 2 =a+b c +c 0 1 1   m 3 =a c ·b·c   M 3 =a+b c +c c 1 0 0   m 4 =a·b c ·c c   M 4 =a c +b+c 1 0 1   m 5 =a·b c ·c   M 5 =a c +b+c c 1 1 0   m 6 =a·b·c c   M 6 =a c +b c +c 1 1 1   m 7 =a·b·c   M 7 =a c +b c +c c Para pasar de miniterms a Maxterms hay que negar 2 veces la función. Los minterms se utilizan para los mapas de Karnaugh. Mapas de Karnaugh   Los mapas de Karnaugh sirven para simplificar funciones booleanas. Por ejemplo: vamos a simplificar: f(a,b,c,d)=a c b c c c d c +a c bc c d c +a c b c c c d+a c bc c d+abc c d c +abcd c Vamos a crear nuestra tabla de verdad con los datos que
Leer más

Sumador y restador con puertas lógicas

Imagen
Los circuitos están realizados con logic.ly  por si queréis probarlos, es una demo online que se puede abrir en el navegador de Internet de cualquier sistema operativo. Sumador Empecemos con el half-adder y despúes con el Full-adder. (La diferencia entre ellos es que en uno ya puedes sumar llevando) Half-adder Tabla de verdad S es resultado de la suma binaria, y C es el carry (la que te llevas) Circuito Full-adder Tabla de verdad Cin es la que te llevas, en el circuito hay que encencer Cin de forma manual para así poder verlo con más calma. Circuito Restadores Al igual que con la suma existe el half-subtractor y el full-subtractor. Half-Subtractor Tabla Circuito Full-subtractor Tabla Circuito Tanto al sumador como al restador los podemos hacer tan grandes como nosotros consideremos competente, estos ejemplos están realizados con la suma/resta de un bit, pero se puede hacer con los bits que nosotros queramos, tan solo tendríamos qu
Leer más

Teorema de expansión de Shannon

Álgebra de Boole x y z f(x,y,z) 0 0 0 f(0,0,0) 0 0 1 f(0,0,1) 0 1 0 f(0,1,0) 0 1 1 f(0,1,1) 1 0 0 f(1,0,0) 1 0 1 f(1,0,1) 1 1 0 f(1,1,0) 1 1 1 f(1,1,1) Teorema de expansión de Shannon f(x 1 ,x 2 ,...,x n ) x i € {0,1} f: {0,1} n ->{0,1}                                               _ f(x 1 ,x 2 ,...,x n ) = x 1 ·f(1,x 2 ,...x n )+ x 1 · f(0,x 1 ,...,x n ) Por ejemplo, el teorema de expansión de Shannon aplicado a f(x,y,z) sería: f(x,y,z)=xf(1,y,z)+x*f(0,y,z)=xyf(1,1,z) + xy*f(1,0,z) + x*yf(0,1,z) + x*y*f(0,0,z)= =xyzf(1,1,1) + xyz*f(1,1,0) + xy*zf(1,0,1) + xy*z*f(1,0,0) + x*yzf(0,1,1) + x*yz*f(0,1,0) + x*y*zf(0,0,1) + x*y*z*f(0,0,0)
Leer más