{"id":249,"date":"2024-05-21T10:07:10","date_gmt":"2024-05-21T08:07:10","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=249"},"modified":"2024-05-21T10:07:10","modified_gmt":"2024-05-21T08:07:10","slug":"54-atributos-de-formulario","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/54-atributos-de-formulario\/","title":{"rendered":"54. Atributos de formulario"},"content":{"rendered":"\n

Este cap\u00edtulo describe los diferentes atributos para el elemento HTML <form><\/em><\/strong>.<\/p>\n\n\n\n

El atributo action<\/h2>\n\n\n\n

El atributo action<\/em><\/strong> define la acci\u00f3n que se realizar\u00e1 cuando se env\u00ede el formulario. Por lo general, los datos del formulario se env\u00edan a un archivo en el servidor cuando el usuario hace clic en el bot\u00f3n Enviar. En el siguiente ejemplo, los datos del formulario se env\u00edan a un archivo llamado \u00abaction_page.php\u00bb. Este archivo contiene un script del lado del servidor que maneja los datos del formulario:<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<form action=\"\/action_page.php\">\n  <label for=\"fname\">First name:<\/label><br>\n  <input type=\"text\" id=\"fname\" name=\"fname\" value=\"John\"><br>\n  <label for=\"lname\">Last name:<\/label><br>\n  <input type=\"text\" id=\"lname\" name=\"lname\" value=\"Doe\"><br><br>\n  <input type=\"submit\" value=\"Submit\">\n<\/form><\/pre>\n\n\n\n
\n
Sugerencia<\/strong>: si se omite el atributo action<\/em><\/strong>, la acci\u00f3n se establece en la p\u00e1gina actual.<\/p>\n<\/blockquote>\n\n\n\n
El atributo target<\/h2>\n\n\n\n
El atributo target<\/em> <\/strong>especifica d\u00f3nde mostrar la respuesta que se recibe despu\u00e9s de enviar el formulario. El atributo target<\/em> <\/strong>puede tener uno de los siguientes valores:<\/p>\n\n\n\n
Valor<\/th>Descripci\u00f3n<\/th><\/tr>
_blank<\/td>La respuesta se muestra en una nueva ventana o pesta\u00f1a<\/td><\/tr>
_self<\/td>La respuesta se muestra en la ventana actual.<\/td><\/tr>
_parent<\/td>La respuesta se muestra en el marco principal.<\/td><\/tr>
_top<\/td>La respuesta se muestra en el cuerpo completo de la ventana.<\/td><\/tr>
framename<\/em><\/td>La respuesta se muestra en un iframe con nombre<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
El valor predeterminado es _self<\/em><\/strong>, lo que significa que la respuesta se abrir\u00e1 en la ventana actual.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form action=\"\/action_page.php\" target=\"_blank\"><\/pre>\n\n\n\n
El atributo method<\/h2>\n\n\n\n
El atributo method<\/em><\/strong> especifica el m\u00e9todo HTTP que se utilizar\u00e1 al enviar los datos del formulario. Los datos del formulario se pueden enviar como variables de URL (con method=\u00bbget\u00bb<\/em><\/strong>) o como transacci\u00f3n de publicaci\u00f3n HTTP (con method=\u00bbpost\u00bb<\/em><\/strong>). El m\u00e9todo HTTP predeterminado al enviar datos de formulario es GET.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<form action=\"\/action_page.php\" method=\"get\"><\/pre>\n\n\n\n
Notas sobre GET:<\/p>\n\n\n\n
    \n
  • Agrega los datos del formulario a la URL, en pares de nombre\/valor<\/li>\n\n\n\n
  • \u00a1NUNCA uses GET para enviar datos confidenciales! (\u00a1Los datos del formulario enviado son visibles en la URL!)<\/li>\n\n\n\n
  • La longitud de una URL es limitada (2048 caracteres)<\/li>\n\n\n\n
  • \u00datil para env\u00edos de formularios en los que un usuario desea marcar el resultado<\/li>\n\n\n\n
  • GET es bueno para datos no seguros, como cadenas de consulta en Google<\/li>\n<\/ul>\n\n\n\n
    Notas sobre POST:<\/p>\n\n\n\n
      \n
    • Agrega los datos del formulario dentro del cuerpo de la solicitud HTTP (los datos del formulario enviado no se muestran en la URL)<\/li>\n\n\n\n
    • POST no tiene limitaciones de tama\u00f1o y se puede utilizar para enviar grandes cantidades de datos.<\/li>\n\n\n\n
    • Los env\u00edos de formularios con POST no se pueden marcar<\/li>\n<\/ul>\n\n\n\n
      \n
      Consejo: \u00a1siempre usa POST si los datos del formulario contienen informaci\u00f3n confidencial o personal!<\/p>\n<\/blockquote>\n\n\n\n
      El atributo autocomplete<\/h2>\n\n\n\n
      El atributo autocomplete<\/em> <\/strong>especifica si un formulario debe tener la opci\u00f3n de autocompletar activada o desactivada.<\/p>\n\n\n\n
      Cuando autocomplete<\/em> <\/strong>est\u00e1 activado, el navegador completa autom\u00e1ticamente los valores en funci\u00f3n de los valores que el usuario ha ingresado anteriormente.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <form action=\"\/action_page.php\" autocomplete=\"on\"><\/pre>\n\n\n\n
      El atributo novalidate<\/h2>\n\n\n\n
      El atributo novalidate<\/em> <\/strong>es un atributo booleano. Cuando est\u00e1 presente, especifica que los datos del formulario (entrada) no deben validarse cuando se env\u00edan.<\/p>\n\n\n\n
      Ejm<\/strong><\/p>\n\n\n\n
      <form action=\"\/action_page.php\" novalidate><\/pre>\n\n\n\n
      Listado de todos los atributos form<\/h2>\n\n\n\n
      Atributo<\/th>Descripci\u00f3n<\/th><\/tr>
      accept-charset<\/td>Especifica las codificaciones de caracteres utilizadas para el env\u00edo de formularios.<\/td><\/tr>
      action<\/td>Especifica d\u00f3nde enviar los datos del formulario cuando se env\u00eda un formulario.<\/td><\/tr>
      autocomplete<\/td>Especifica si un formulario debe tener la funci\u00f3n de autocompletar activada o desactivada.<\/td><\/tr>
      enctype<\/td>Especifica c\u00f3mo se deben codificar los datos del formulario al enviarlos al servidor (solo para method=\u00bbpost\u00bb).<\/td><\/tr>
      method<\/td>Especifica el m\u00e9todo HTTP a utilizar al enviar datos de formulario.<\/td><\/tr>
      name<\/td>Especifica el nombre del formulario.<\/td><\/tr>
      novalidate<\/td>Especifica que el formulario no debe validarse cuando se env\u00eda.<\/td><\/tr>
      rel<\/td>Especifica la relaci\u00f3n entre un recurso vinculado y el documento actual.<\/td><\/tr>
      target<\/td>Especifica d\u00f3nde mostrar la respuesta que se recibe despu\u00e9s de enviar el formulario.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
      Este cap\u00edtulo describe los diferentes atributos para el elemento HTML <form>. El atributo action El atributo action define la acci\u00f3n […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":53,"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-249","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":"Este cap\u00edtulo describe los diferentes atributos para el elemento HTML <form>. El atributo action El atributo action define la acci\u00f3n […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/249","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=249"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/249\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/249\/revisions\/251"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}