{"id":369,"date":"2024-05-21T12:40:44","date_gmt":"2024-05-21T10:40:44","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=369"},"modified":"2024-05-21T12:40:44","modified_gmt":"2024-05-21T10:40:44","slug":"22-elementos-de-formulario","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-practico\/22-elementos-de-formulario\/","title":{"rendered":"22. Elementos de formulario"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Elementos de formulario<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;input&gt;<\/h3>\n\n\n\n<p>Es el elemento m\u00e1s b\u00e1sico de los elementos de formulario. Su etiqueta es &lt;input&gt; y se trata de una etiqueta en linea, que trabajar\u00e1 con el espacio requerido, su valor por defecto es de tipo text, pero existen diferentes tipos de inputs.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><em>&lt;input type=\u00bbtext\u00bb><\/em><\/strong>: son los tipos de inputs que se cargan por defecto.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbcheckbox\u00bb><\/em><\/strong>: permite seleccionar varias opciones.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbradio\u00bb><\/em><\/strong>: permiten responder de s\u00f3lo una opci\u00f3n.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbdate\u00bb><\/em><\/strong>: dibuja un calendario.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbcolor\u00bb><\/em><\/strong>: carga los colores que nativamente tenga el sistema operativo.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbbutton\u00bb><\/em><\/strong>: similar a la etiqueta <strong><em>&lt;button>,<\/em><\/strong> es un bot\u00f3n que por s\u00ed s\u00f3lo no va a funcionar. Para ponerle texto a este tipo de input hay que utilizar el atributo <strong><em>value.<\/em><\/strong><\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbsubmit\u00bb><\/em><\/strong>: dibuja un bot\u00f3n con un texto por defecto, que dependiendo de nuestro sistema operativo puede estar en espa\u00f1ol o en ingl\u00e9s, y que dice &#8216;Enviar&#8217;. Cuando este bot\u00f3n est\u00e1 dentro de un formulario, es el que env\u00eda los datos del formulario.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbreset\u00bb><\/em><\/strong>: si est\u00e1 dentro de un formulario, cuando se haga clic en \u00e9l, va a limpiar todos los valores que se hayan introducido en los elementos del formulario.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbfile\u00bb><\/em><\/strong>: puede aparecer dibujado de distinta forma dependiendo de cada navegador. S\u00f3lo nos permite seleccionar un archivo. Si necesitamos seleccionar m\u00e1s de un archivo incluyendo el atributo <strong><em>multiple <\/em><\/strong>que es un atributo booleano, s\u00f3lo es necesario ponerlo sin valor para que funcione.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbhidden\u00bb><\/em><\/strong>: como su nombre dice, es un tipo de input que visualmente no se va a ver. Sirven para que cuando el formulario se env\u00ede, nosotros como programadores podamos mandar alg\u00fan valor.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbemail\u00bb><\/em><\/strong>: tan s\u00f3lo permite enviar texto que sea un email, de lo contrario dar\u00e1 error y no permitir\u00e1 enviar formulario.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbtel\u00bb><\/em><\/strong>: tan s\u00f3lo permite enviar texto en formato tlfo, de lo contrario no permitir\u00e1n enviar el formulario.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbnumber\u00bb><\/em><\/strong>: permite ingresar n\u00fameros, tanto positivos como negativos.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbpassword\u00bb><\/em><\/strong>: lo que el usuario escribe no se ve.<\/li>\n\n\n\n<li><strong><em>&lt;input type=\u00bbsearch\u00bb><\/em><\/strong>: es especial para hacer b\u00fasquedas en nuestras aplicaciones.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;textarea&gt;<\/h3>\n\n\n\n<p>Es un elemento de formulario que permite ingresar texto, puede ir acompa\u00f1ado de los atributos cols (columnas) que mostrar\u00eda el n\u00famero de columnas que deseamos, y rows (filas) que permite decir cuantas filas deseamos en nuestra &lt;textarea&gt;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">&lt;select&gt;<\/h3>\n\n\n\n<p>Los &lt;select&gt; permiten seleccionar entre varias opciones, internamente necesitan una etiqueta &lt;option&gt;. Veamos un ejm.<\/p>\n\n\n\n<p><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;select name=\"id\" multiple&gt;\n  &lt;option value=\"\"&gt;HTML&lt;\/option&gt;\n  &lt;option value=\"\"&gt;CSS&lt;\/option&gt;\n  &lt;option value=\"\"&gt;Javascript&lt;\/option&gt;\n&lt;\/select&gt;<\/pre>\n\n\n\n<p>Este tipo de listas s\u00f3lo permite elegir una opci\u00f3n, pero igual que al <strong><em>&lt;input<\/em> <em>type=\u00bbfile\u00bb&gt;<\/em><\/strong> le podemos agregar el atributo <strong><em>multiple,<\/em><\/strong> el cual nos permitir\u00e1 agregar m\u00e1s de una opci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Elementos de formulario &lt;input&gt; Es el elemento m\u00e1s b\u00e1sico de los elementos de formulario. Su etiqueta es &lt;input&gt; y se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":89,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-369","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Elementos de formulario &lt;input&gt; Es el elemento m\u00e1s b\u00e1sico de los elementos de formulario. Su etiqueta es &lt;input&gt; y se [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=369"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/369\/revisions"}],"predecessor-version":[{"id":371,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/369\/revisions\/371"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/89"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}