{"id":806,"date":"2016-09-02T10:49:35","date_gmt":"2016-09-02T15:49:35","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=806"},"modified":"2017-11-16T12:13:44","modified_gmt":"2017-11-16T18:13:44","slug":"elementos-de-formularios-en-html5","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/elementos-de-formularios-en-html5\/","title":{"rendered":"Elementos de Formularios en HTML5"},"content":{"rendered":"

Los formularios son el medio para enviar datos a una aplicaci\u00f3n web. Analizaremos algunos de los elementos de formularios m\u00e1s importantes en HTML5.<\/span><\/p>\n

\"formulario\"<\/a>

Aprende m\u00e1s sobre formularios html5<\/p><\/div>\n

<\/p>\n

Estructura del formulario<\/span><\/h2>\n

Etiqueta <form><\/span><\/h2>\n

Contiene todo el formulario. Todos los elementos de formularios se escriben dentro de las etiquetas <form> y <\/form>. Entre sus atributos se cuentan: ACTION para indicar el programa que procesar\u00e1 los datos, \u00a0y METHOD para especificar el m\u00e9todo de env\u00edo de datos, donde METHOD = \u201cGET\u201d env\u00eda los datos utilizando la URL y METHOD = \u201cPOST\u201d utiliza el formulario.<\/span><\/p>\n

Etiqueta <fieldset><\/span><\/h2>\n

Agrupa visualmente los elementos del formulario. No es imprescindible, solo dibuja una linea agrupando los elementos que quedaron entre las etiquetas <fieldset> <\/fieldset><\/span><\/p>\n

Etiqueta <label><\/span><\/h2>\n

Se utiliza para escribir un texto asociado a alg\u00fan campo. Utilizando su atributo FOR podemos especificar el id de un elemento de formulario asociado al texto.<\/span><\/p>\n

Campo de texto<\/span><\/h2>\n

Etiqueta <input><\/span><\/h2>\n

Para crear un campo de texto utilizamos la etiqueta <input> con su atributo TYPE=\u201dTEXT\u201d. Se le puede asignar un id con el atributo ID, que permitir\u00e1 referenciar ese campo en alg\u00fan script de JavaScript o en una hoja de estilos CSS.<\/span><\/p>\n

Su atributo NAME permite asignarle un nombre que ser\u00e1 utilizado por el programa que procese los datos.<\/span><\/p>\n

Su atributo VALUE se utiliza para especificar un valor inicial al campo.<\/span><\/p>\n

\u00c1rea de texto<\/span><\/h2>\n

Se emplea la etiqueta <textarea> <\/textarea> para crear un campo de texto largo. Se puede especificar el n\u00famero de l\u00edneas y columnas que deseamos asignarle al campo con los atributos ROWS y COLS.<\/span><\/p>\n

Campo de contrase\u00f1a<\/span><\/h2>\n

La etiqueta <input type = \u00abpassword\u00bb> permite crear un campo de contrase\u00f1a para ocultar visualmente los caracteres pulsados en un campo de texto.<\/span><\/p>\n

Cabe aclarar que este campo no encripta la informaci\u00f3n sino que solo la enmascara en la interfaz gr\u00e1fica.<\/span><\/p>\n

Lista de selecci\u00f3n \u00a0(combobox)<\/span><\/h2>\n

Nos permite crear un combobox o lista de selecci\u00f3n con una serie de valores de los cuales el usuario elegir\u00e1 o seleccionar\u00e1 uno.<\/span><\/p>\n

 <\/p>\n

<select name=\u201dnombre\u201d>\r\n\r\n<option> Opcion 1 <\/option>\r\n\r\n<option> Opcion 2 <\/option>\r\n\r\n<\/select>\r\n\r\n<\/pre>\n
 <\/p>\n
Si a\u00f1adimos el atributo SIZE podemos mostrar m\u00e1s de una opci\u00f3n a la vez.<\/span><\/p>\n
<select name=\u201dnombre\u201d size=\u201d2\u201d> deja ver en pantalla dos opciones del listado.<\/pre>\n
Si utilizamos el atributo MULTIPLE el usuario puede seleccionar m\u00e1s de una opci\u00f3n a la vez.<\/span><\/p>\n
Lista de botones radio (radio button)<\/span><\/h2>\n
Este tipo de control permite al usuario elegir solo una opcion de entre varias.<\/span><\/p>\n
<input type=\u201dradio\u201d name =\u201d sexo\u201d value=\u201d1\u201d> <label> Masculino <\/label>\r\n\r\n<input type=\u201dradio\u201d name =\u201d sexo\u201d value=\u201d2\u201d> <label> Femenino<\/label>\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
Lista de cajas de selecci\u00f3n (checkbox)<\/span><\/h2>\n
Permiten una respuesta de Positivo (activado) o Negativo (desactivado). Puede existir una sola caja de selecci\u00f3n o varias. Pueden no estar activadas ninguna o todas.<\/span><\/p>\n
<input type=\u201dcheckbox\u201d name =\u201dacepto\u201d value=\u201d1\u201d> <label> Acepto recibir m\u00e1s informaci\u00f3n<\/label>\r\n\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
Boton para enviar informaci\u00f3n<\/span><\/h2>\n
Un <input type=\u201dsubmit\u201d> crea un boton que al pulsarlo, env\u00eda los datos recibidos por todos los campos del formulario a la direcci\u00f3n utilizada en el atributo ACTION de la etiqueta FORM.<\/span><\/p>\n
Su atributo VALUE permite escribir una leyenda o texto sobre el bot\u00f3n.<\/span><\/p>\n
Bot\u00f3n para borrar informaci\u00f3n del formulario<\/span><\/h2>\n
Si se desea borrar lo escrito en un formulario de una forma r\u00e1pida y sencilla, el desarrollador puede dejar un boton <input type=\u201dreset\u201d> para resetear o borrar el formulario. Tambi\u00e9n se utiliza su atributo VALUE.<\/span><\/p>\n
Bot\u00f3n simple<\/span><\/h2>\n
Es posible crear un bot\u00f3n dentro de un formulario que tenga un comportamiento espec\u00edfico definido por c\u00f3digo Javascript. Es posible hacerlo de dos formas:<\/span><\/p>\n
    \n
  1. Con input<\/span><\/li>\n<\/ol>\n
    <input type=\u201dbutton\u201d id=\u201dboton\u201d value=\u201dOk\u201d><\/pre>\n
     <\/p>\n
      \n
    1. Con button<\/span><\/li>\n<\/ol>\n
      <button type=\u201dbutton\u201d id=\u201dboton\u201d> Boton <\/button><\/pre>\n
       <\/p>\n
      La segunda opci\u00f3n es m\u00e1s intuitiva, pues un bot\u00f3n realmente no es un \u201cinput\u201d en el sentido de que no es un campo que reciba alg\u00fan dato.<\/span><\/p>\n
      Campo oculto<\/span><\/h2>\n
      Existe un elemento de formulario <input type=\u201dhidden\u201d> que se utiliza para enviar datos sin que el usuario se de cuenta. Esto es necesario en ocasiones para procesar alg\u00fan dato adicional que sea complementario a los datos enviados en el formulario.<\/span><\/p>\n
      Ejemplo: <\/span><\/p>\n
      <input type=\u201dhidden\u201d id=\u201doculto\u201d name=\u201did_empleado\u201d><\/pre>\n
       <\/p>\n
      Nuevos elementos en HTML5<\/span><\/h2>\n
      Todos los elementos anteriormente descritos ya funcionaban en la versi\u00f3n anterior de HTML. Con la llegada de HTML5 aparecieron nuevos elementos que tienen gran utilidad. Veamos a continuaci\u00f3n algunos cambios en el elemento INPUT.<\/span><\/p>\n
      email<\/span><\/h2>\n
      Presenta un campo de texto est\u00e1ndar sobre el que se va a introducir una direcci\u00f3n de email. Al momento de enviar el formulario el navegador comprobar\u00e1 si es una direcci\u00f3n v\u00e1lida (si est\u00e1 escrita como direcci\u00f3n de email).<\/span><\/p>\n
      <input type=\u201demail\u201d><\/pre>\n
       <\/p>\n
      number<\/span><\/h2>\n
      Crea un campo para introducir n\u00fameros. En Chrome aparecen dos flechas para incrementar o decrementar la cantidad. Es posible especificar el valor m\u00e1ximo, el valor m\u00ednimo, el incremento y el valor inicial del campo.<\/span><\/p>\n
      <input type=\u201dnumber\u201d min=\u201d1\u201d max=\u201d100\u201d step=\u201d1\u201d value=\u201d70\u201d><\/pre>\n
       <\/p>\n
      search<\/span><\/h2>\n
      Es un campo para b\u00fasquedas. Chrome le incluye una X para borrar el contenido del campo.<\/span><\/p>\n
      <input type=\u201dsearch\u201d><\/pre>\n
       <\/p>\n
      tel<\/span><\/h2>\n
      Campo para introducir n\u00fameros telef\u00f3nicos. Si se estuiese ejecutando la p\u00e1gina desde un dispositivo m\u00f3vil, se invocar\u00eda el teclado num\u00e9rico para facilitar el ingreso del tel\u00e9fono.<\/span><\/p>\n
      url<\/span><\/h2>\n
      Permite introducir un campo de tipo url, es decir donde el usuario introduce una direcci\u00f3n web. El navegador realiza una validaci\u00f3n para ver si est\u00e1 correctamente escrito.<\/span><\/p>\n
      Nuevos atributos en HTML5<\/span><\/h2>\n
      autofocus<\/span><\/h2>\n
      Especifica qu\u00e9 campo obtendr\u00e1 primero el foco donde se introducir\u00e1n datos. Se le a\u00f1ade este atributo solo a uno de los campos de la p\u00e1gina.<\/span><\/p>\n
      <input type =\u201dtext\u201d name=\u201dcontrol\u201d autofocus=\u201dautofocus\u201d><\/pre>\n
       <\/p>\n
      pattern<\/span><\/h2>\n
      Este atributo se utiliza para especificar un patr\u00f3n de validaci\u00f3n que deber\u00e1 cumplir el dato introducido en un campo. <\/span><\/p>\n
      <input type=\u201dtext\u201d name=\u201dnombre\u201d pattern=\u201d[Aa-Zz]{4-16}<\/pre>\n
       <\/p>\n
      placeholder<\/span><\/h2>\n
      Especifica un texto que se mostrar\u00e1 en un campo mientras este est\u00e9 vac\u00edo.Cuando el usuario empieza a escribir sobre el campo, el texto del placeholder desaparecer\u00e1.<\/span><\/p>\n
      <input type=\u201dtext\u201d placeholder=\u201dEscriba su nombre completo\u201d><\/pre>\n
       <\/p>\n
      Referencias<\/span><\/h3>\n
        \n
      1. Herrera (2012). Arrancar con HTML5.<\/strong>\u00a0 Alfaomega Grupo Editor. M\u00e9xico.<\/span><\/li>\n
      2. Gauchat(2012). El gran libro de HTML5<\/a>. Marcombo. Barcelona.<\/li>\n<\/ol>\n
         <\/p>\n","protected":false},"excerpt":{"rendered":"
        Los formularios son el medio para enviar datos a una aplicaci\u00f3n web. Analizaremos algunos de los elementos de formularios m\u00e1s importantes en HTML5.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[176,175],"class_list":["post-806","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-formularios","tag-html5"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":7,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/806\/revisions"}],"predecessor-version":[{"id":814,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/806\/revisions\/814"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}