Archivo de la etiqueta: HTML element

Required en radio o checkbox multiple

A veces cuando diseñamos un formulario tenemos que incluir en este elementos radio o checkbox, y queremos que estos sean obligatorios, en el resto de elementos lo podemos tener claro le ponemos el atributo “required” y ya, pero estos elementos sueles dar multiples opciones, entonces que hacemos, lo ponemos en todos el atributo “required”, pues si, esa es una de las soluciones, pero hay otra mas sencilla, que es ponerlo solo en el ultimo.


<input type='checkbox' name='opcion' value='si' required>

<input type='checkbox' name='opcion' value='no' required>


<input type='checkbox' name='opcion' value='si'>

<input type='checkbox' name='opcion' value='no' required>

Ejemplo: http://www.sacredheartprimary.co.uk/macss-js/webforms2/testsuite/021.html

Anuncios

¿Por que el botón reset no vacia los campos hidden? – HTML Tips

Hoy mientras desarrollaba un formulario y comprobaba los datos que enviaba me he dado cuenta de algo que en todos los años que llevo programando no me había dado cuenta, o quizá no me había visto en esa situación. Explico el escenario, tengo un formulario en el cual pongo un rango de fechas y luego en otro campo tengo un autocompletar el cual cuando marco la selección, se queda el nombre en el campo visible y el id en un campo hidden. Al darle a buscar pues me busca los datos relacionados de ese id en ese rango de fechas. Pues bien, a la vez del botón enviar, he puesto un botón reset para limpiar el formulario, y me he dado cuenta que si por ejemplo buscaba solo entre rangos de fechas, sin buscar nada en el autocompletar, me buscaba filtrando por los datos anteriores.

Depurando he visto que si no ponía nada en el campo autocompletar ( el cual al cambiar establecía el valor en el campo hidden) este se mantenía con el valor establecido en la búsqueda anterior.

A esto uno se pregunta ¿el reset no lo borraba todos los datos de un formulario?, pues la respuesta es si y no.

Vamos en la documentación de la w3.org que nos dice acerca del estado hidden en los inputs

“El estado hidden representa un valor el cual no esta permitido que el usuario lo examine o lo manipule”.

Y la definición de reset dice “El estado reset de un button representa un button que cuando se activa restablece el formulario”.

Con estas definiciones, de primeras pensaríamos que no tiene sentido que al pulsar el reset  no se restablezcan los valores de un hidden, pero reflexionemos un momento y hagamosnos una pregunta ¿quien establece el valor del campo hidden? ¿el usuario? ¿o nosotros con una programación? La respuesta es la segunda, el usuario no establece el valor del campo hidden ni lo puede modificar, y la acción del reset la efectúa el usuario, por lo tanto, no puede modificar el valor del hidden.

Para solucionar esto, si estamos usando jQuery podemos hacerlo de una manera muy sencilla

$('button[type=reset]').click(function(){
    $('#idCampoHidden').val('');
});

En este ejemplo estoy usando button, y serviria igual poniendo input[type=reset] y luego en el nombre del campo, donde pone #idCampoHidden, lo sustituiremos por #nuestrocampohidden.
El estado hidden http://www.w3.org/community/webed/wiki/HTML/Elements/input/hidden

El estado reset http://www.w3.org/community/webed/wiki/HTML/Elements/input/reset

El atributo Charset – HTML5 Tips

Uno de los atributos que debemos especificar en toda pagina web es el atributo Charset, este va a definir que tipo de caracteres vamos a utilizar en la web, para que el navegador lo detecte y lo visualice correctamente.

Este atributo, en HTML4 lo definimos de la siguiente manera


<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Con HTML5 definir se ha introducido el atributo charset el y es mas sencillo


<meta class="charset="UTF-8">

Para asegurarnos que todos los navegadores leen la propiedad de codificación de caracteres, la declaración de este debe ser incluida en los primeros 512 caracteres de nuestro documento, es decir, para evitar problemas, debería definirse inmediatamente después de la etiqueta head.

W3schools HTML meta tag

Enhanced by Zemanta