diff options
Diffstat (limited to 'files/es/web/html/element/input')
| -rw-r--r-- | files/es/web/html/element/input/button/index.html | 254 | ||||
| -rw-r--r-- | files/es/web/html/element/input/checkbox/index.html | 130 | ||||
| -rw-r--r-- | files/es/web/html/element/input/color/index.html | 308 | ||||
| -rw-r--r-- | files/es/web/html/element/input/date/index.html | 567 | ||||
| -rw-r--r-- | files/es/web/html/element/input/datetime/index.html | 147 | ||||
| -rw-r--r-- | files/es/web/html/element/input/email/index.html | 423 | ||||
| -rw-r--r-- | files/es/web/html/element/input/hidden/index.html | 201 | ||||
| -rw-r--r-- | files/es/web/html/element/input/index.html | 1529 | ||||
| -rw-r--r-- | files/es/web/html/element/input/number/index.html | 450 | ||||
| -rw-r--r-- | files/es/web/html/element/input/password/index.html | 132 | ||||
| -rw-r--r-- | files/es/web/html/element/input/range/index.html | 416 | ||||
| -rw-r--r-- | files/es/web/html/element/input/text/index.html | 472 |
12 files changed, 5029 insertions, 0 deletions
diff --git a/files/es/web/html/element/input/button/index.html b/files/es/web/html/element/input/button/index.html new file mode 100644 index 0000000000..7fbe354405 --- /dev/null +++ b/files/es/web/html/element/input/button/index.html @@ -0,0 +1,254 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Elemento/input/Botón +tags: + - Elemento + - Elemento Input + - HTML + - Referencia +translation_of: Web/HTML/Element/input/button +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary">El elemento HTML <code><strong><input type="button"></strong></code> es una versión específica del elemento <strong><code><input></code></strong><code>,</code> que se usa para crear un botón en el que se puede hacer click sin ningún valor por defecto, es decir, <strong>no tiene un comportamiento predeterminado</strong> como por ejemplo <span class="seoSummary"><code><strong><input type="reset"></strong></code></span> <span class="seoSummary">. En HTML5 ha sido sustituido por el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong>.</span></span></p> + +<p>Los navegadores generan un controlador para un botón clickable sin valor por defecto. El botón puede contener cualquier texto. El controlador puede varíar de un navegador a otro.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categorías de contenido</a></th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contenido de flujo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">contenido de fraseo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">contenido interactivo</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listado</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">etiquetable</a>, y elementos <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">entregables</a> con <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">contenido asociado a los formularios</a>, contenido evidente.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Ninguna, las etiquetas de inicio y cierre son obligatorias.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">contenido de fraseo</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> + </tr> + <tr> + <th scope="row">Tipo de elemento</th> + <td>Inline</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento puede tener cualquiera de los <a href="/en-US/docs/HTML/Global_attributes">atributos globales</a> además de los siguientes:</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo booleano indica que el usuario no puede interactuar con el botón. Si este atributo no está especificado, el botón hereda su configuración del elemento contenedor, por ejemplo, {{HTMLElement("fieldset")}}; si no hay elemento contenedor con el atributo <code><strong>disabled</strong></code> establecido, el botón estará habilitado. El valor de control desactivado no es enviado con el formulario y el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será enviado</a> en los controles desactivados.</p> + </dd> + <dd> + <p>Firefox, al contrario que otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Use el atributo {{htmlattrxref("autocomplete","button")}} para controlar esta característica.</p> + </dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>Este atributo booleano le permite especificar que el botón deba tener el foco cuando la página se cargue, a no ser que el usuario lo anule, por ejemplo, escribiendo en otro cuadro de texto. Únicamente un elemento asociado con los formularios en un documento puede tener este atributo especificado.</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>El uso de este atributo en un {{HTMLElement("button")}} es algo fuera de lo común, y específico de Firefox. Firefox, por defecto y al contrario de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">mantiene por defecto el estado de desactivación dinámico</a> de un {{HTMLElement("button")}} a lo largo de las cargas de la página. Establecer el valor de este atributo a <code>off</code> (<code>autocomplete="off"</code>) desactiva esta característica.</dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>El elemento del formulario con el que el botón está asociado (es <em>dueño del formulario</em>). El valor del atributo debe ser el atributo <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si este atributo no está especificado, el elemento <code><button> </code>debe ser hijo de un elemento "formulario". Este atributo le permite colocar elementos <code><button></code> en cualquier lugar de un documento, y no únicamento como hijos del elemento {{HTMLElement("form")}}.</dd> + <dt>{{htmlattrdef("formenctype")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formenctype</strong></code> especifica el tipo de contenido que se usa para enviar el formulario al servidor. Los valores posibles son: + <ul> + <li><code>application/x-www-form-urlencoded</code>: Valor por defecto si el atributo no se especifica.</li> + <li><code>multipart/form-data</code>: Este valor se usa si un elemento {{HTMLElement("input")}} es usado con el atributo {{htmlattrxref("type","input")}} fijado a <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Si este atributo se especifica, ignora el atributo {{htmlattrxref("enctype","form")}} del formulario dueño del botón.</p> + </dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>La URI de la aplicación que procesa la información enviada por le botón. Si se especifica se anula el atributo {{htmlattrxref("action","form")}} del formulario dueño del botón.</dd> + <dt>{{htmlattrdef("formmethod")}}</dt> + <dd>Debido a que el elemento input es un botón de envío, el atributo <code><strong>formmethod</strong></code> especifica el método HTTP que el navegador utilizará para enviar el formulario. Los valores posibles son: + <ul> + <li><code>post</code>: Los datos del formulario son incluidos en su cuerpo y son enviados al servidor.</li> + <li><code>get</code>: Los datos del formulario son agregados a la URI del formulario, utilizando un símbolo '?' como separador, la URI resultante es enviada al servidor. Use este método cuando el formulario no tenga efectos secundarios y contenga solo caracteres ASCII.</li> + </ul> + + <p>Si se especifica, este atributo anula el atributo {{htmlattrxref("method","form")}} del formulario dueño del elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formnovalidate </strong></code> especifica que el formulario no debe ser validado cuando sea enviado. Si este atributo es especificado, se anula el atributo {{htmlattrxref("novalidate","form")}} del formulario dueño del elemento. Este atributo es Booleano.</dd> + <dt>{{htmlattrdef("formtarget")}}</dt> + <dd>Debido a que el elemento de input es un botón de envío, el atributo <code><strong>formtarget</strong></code> es un nombre o palabra clave que indica donde mostrar la respuesta recibida después de enviar el formulario. Este es un nombre de, o palabra clave para, un <em>contexto navegable</em> (por ejemplo, pestaña, ventana, o inline frame). Si este atributo es especificado, se sobreescribirá el atributo {{htmlattrxref("target", "form")}} del formulario dueño del elemento. Las siguientes palabras claves tienen significados especiales: + <ul> + <li>_<code>self</code>: Carga la respuesta en el mismo contexto navegable<em> </em>que el actual. Este valor es el predeterminado si el atributo no es especificado.</li> + <li><code>_blank</code>: Carga la respuesta en un nuevo contexto navegable sin nombre.</li> + <li><code>_parent</code>: Carga la respuesta en el contexto navegable padre del actual. Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li> + <li><code>_top</code>: Carga la respuesta en el contexto navegable superior (es el contexto navegable que es un ancestro del actual y no tiene padre). Si no hay padre, esta opción se comporta igual que <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>El nombre del botón que será enviado con los datos del formulario.</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>El tipo dle botón. Los valores posibles son: + <ul> + <li><code>submit</code>: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo, o si el atributo es cambiado dinámicamente a un valor inválido o vacío.</li> + <li><code>reset</code>: El botón reinicia todos los controles a sus valores iniciales.</li> + <li><code>button</code>: El botón no tiene comportamiento predeterminado. Puede haber scripts de la parte del cliente asociados a los eventos del elemento, que serán lanzados cuando el evento ocurra.</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial del botón.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Se crea un nuevo input tipo botón con el valor 'Click me'. </p> + +<pre class="brush: html"><input type="button" value="Click me"></pre> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table" style="height: 137px; width: 1065px;"> + <tbody> + <tr> + <td>Especificación</td> + <td>Status</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.6</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>autofocus</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>formenctype</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formmethod</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>formaction</code> attribute</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<p> </p> + +<ul> + <li>El elemento genérico {{HTMLElement("input")}} y la interface usada para manipularlo, {{domxref("HTMLInputElement")}}</li> + <li>El reemplazo en HTML5 para <strong><input type="button"></strong>, el elemento <strong><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button"><button></a></strong>.</li> +</ul> diff --git a/files/es/web/html/element/input/checkbox/index.html b/files/es/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..1798198434 --- /dev/null +++ b/files/es/web/html/element/input/checkbox/index.html @@ -0,0 +1,130 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Elemento/input/checkbox +translation_of: Web/HTML/Element/input/checkbox +--- +<p><span class="seoSummary">El elemento HTML <strong><code><input type="checkbox"></code></strong> es un elemento de entrada que te permite insertar un vector o array de valores. El atributo <strong>value</strong> es usado para definr el valor enviado por el <strong>checkbox</strong>. El atributo <strong>checked</strong> se usa para indicar que el elemento está seleccionado. El atributo <strong>indeterminate</strong> se usa para indicar que el <strong>checkbox</strong> esta en un estado indeterminado (en la mayoria de las plataformas, esto dibuja una linea horizontal que atraviesa el <strong>checkbox</strong>).</span></p> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento posee los "<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributos globales</a>".</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <strong><code>checkbox</code></strong>, la presencia de este atributo booleano indica que el control se selecciona de forma predeterminada; de lo contrario, se ignora.</p> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial de control. Si se omite la propiedad <strong>value</strong>, el resultado<strong> </strong>devuelto al leer esta propiedad será la cadena <strong>on.</strong></dd> + <dd>Tenga en cuenta que al volver a cargar la pagina, Gecko y IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el código HTML</a>, si el valor se cambió antes de la recarga.</dd> + <dt>{{htmlattrdef("indeterminate")}}</dt> + <dd>Indica que la casilla de verificación está en un estado indeterminado (en la mayoría de las plataformas, dibuja una línea horizontal a través del checkbox).</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: html"><label><input type="checkbox" id="cbox1" value="first_checkbox"> Este es mi primer checkbox</label><br> + +<input type="checkbox" id="cbox2" value="second_checkbox"> <label for="cbox2">Este es mi segundo checkbox</label> +</pre> + +<p>Esto crea dos casillas de verificación, que se ven así:</p> + +<p>{{EmbedLiveSample("Ejemplo")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Especificación</td> + <td>Estatus</td> + </tr> + <tr> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<checkbox>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#checkbox', '<checkbox>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop">Caracteristicas +<table class="compat-table"> + <tbody> + <tr> + <th> </th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td> + <td>2 or earlier</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7 or earlier")}}<br> + {{CompatGeckoDesktop("1.9.2")}} for <code>indeterminate</code> value</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas </th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="See_also"> </p> diff --git a/files/es/web/html/element/input/color/index.html b/files/es/web/html/element/input/color/index.html new file mode 100644 index 0000000000..09773888f0 --- /dev/null +++ b/files/es/web/html/element/input/color/index.html @@ -0,0 +1,308 @@ +--- +title: <input type="color"> +slug: Web/HTML/Elemento/input/color +tags: + - Elemento + - Entrada + - Formulários HTML + - HTML + - Referencia + - Selector de colores + - color + - formulários +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} del tipo «<code><strong>color</strong></code>» proporciona un elemento de interfaz de usuario que permite a los usuarios especificar un color, bien mediante una interfaz visual de selección, bien a través de un cuadro de texto donde ingresar un valor hexadecimal en el formato «<code>#rrggbb</code>».</span> Solo se permiten colores simples (sin canal alfa). Los valores son compatibles con CSS.</p> + +<p>La presentación del elemento puede variar considerablamente entre navegadores y plataformas: podría ser un campo de entrada sencillo que valida automáticamente que la entrada esté en el formato adecuado, o podría lanzar un selector de colores estándar de la plataforma, o incluso podría abrir una ventana de colores personalizada.</p> + +<div id="summary_example1"> +<pre class="brush: html"><input type="color"></pre> +</div> + +<p>{{EmbedLiveSample("summary_example1", 700, 30)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Una {{domxref("DOMString")}} de siete caracteres que especifica un {{cssxref("<color>")}} en notación hexadecimal en minúsculas</td> + </tr> + <tr> + <td><strong>Sucesos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}} y {{htmlattrxref("list", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code> y <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>El {{htmlattrxref("value", "input")}} de un elemento {{HTMLElement("input")}} del tipo «<code>color</code>» es siempre una {{domxref("DOMString")}} que contiene una cadena de siete caracteres en la que se especifica un color RGB de manera hexadecimal. Aunque es posible introducir el color tanto en mayúsculas como en minúsculas, este se almacena en minúsculas. El valor nunca presenta otra forma y nunca está vacío.</p> + +<div class="note"> +<p><strong>Nota</strong>: definir el valor a cualquier cosa que no sea un color válido, totalmente opaco y contenido dentro del espacio RGB <em>en notación hexadecimal</em> causará que el valor se establezca a «<code>#000000</code>». En particular, no es posible utilizar los nombres de colores estandarizados de CSS ni cualquier sintaxis de función CSS para definir el valor. Esto tiene sentido si se tiene en cuenta que HTML y CSS son lenguajes y especificaciones independientes. Por otra parte, no se admiten los colores que incluyan un canal alfa; definir un color en la notación hexadecimal de nueve caracteres (p. ej., <code>#009900aa</code>) también provocará que el valor se establezca a «<code>#000000</code>».</p> +</div> + +<h2 id="Uso_de_las_entradas_de_color">Uso de las entradas de color</h2> + +<p>Las entradas del tipo «<code>color</code>» son sencillas debido al número limitado de atributos que admiten.</p> + +<h3 id="Proporcionar_un_color_predeterminado">Proporcionar un color predeterminado</h3> + +<p>Puede actualizar el ejemplo simple anterior para definir un valor predeterminado, de manera que el botón muestrario de colores tenga precargado ese color y el selector de colores (si lo hay) se abra con ese color preseleccionado también:</p> + +<pre class="brush: html"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> + +<p>Si no especifica un valor, se utilizará «<code>#000000</code>», negro, de manera predeterminada. El valor debe especificarse en la notación hexadecimal de siete caracteres; esto es, el carácter «#» seguido de dos dígitos para representar el rojo, el verde y el azul: «<code>#rrggbb</code>». Si utiliza colores especificados en cualquier otro formato (como los nombres de colores CSS o las funciones cromáticas de CSS como <code>rgb()</code> o <code>rgba()</code>), deberá convertirlos en valores hexadecimales antes de definir <code>value</code>.</p> + +<h3 id="Llevar_un_seguimiento_de_los_cambios_de_color">Llevar un seguimiento de los cambios de color</h3> + +<p>Como sucede con otros tipos de {{HTMLElement("input")}}, existen dos sucesos que pueden emplearse para detectar cambios en el valor de color: {{event("input")}} y {{event("change")}}. El suceso <code>input</code> se desencadena en el elemento <code><input></code> siempre que cambia el color. El suceso <code>change</code> se desencadena cuando el usuario cierra el selector de colores. En ambos casos, puede determinar el valor nuevo del elemento al examinar su {{domxref("HTMLInputElement.value", "value")}}.</p> + +<p>Este ejemplo vigila los cambios del valor de color en el tiempo:</p> + +<pre class="brush: js">colorPicker.addEventListener("input", actualizarPrimero, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Seleccionar_el_valor">Seleccionar el valor</h3> + +<p>Si la implementación del elemento {{HTMLElement("input")}} del tipo «<code>color</code>» en el navegador del usuario no admite un botón muestrario, y es en cambio un campo de texto para escribir directamente la cadena de color, podrá utilizar el método {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el texto actualmente presente en el campo editable. Si el navegador utiliza en su lugar un botón muestrario, <code>select()</code> no hace nada. Debe tener presente este comportamiento para que su código pueda responder adecuadamente en cada caso.</p> + +<pre class="brush: js">muestrario.select();</pre> + +<h3 id="Variaciones_de_apariencia">Variaciones de apariencia</h3> + +<p>Como se mencionó anteriormente, cuando un navegador no admite una interfaz de selección de colores, su implementación de las entradas de color viene en forma de un cuadro de texto que valida su contenido automáticamente para garantizar que el valor esté en el formato adecuado. Por ejemplo, en Safari 10.1 verá algo como esto:</p> + +<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>El mismo contenido luce así en Firefox 55:</p> + +<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>En este caso, al pulsar en el muestrario de colores aparecerá el selector de la plataforma desde el cual elegir un color (en el ejemplo, el selector de macOS):</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validación">Validación</h2> + +<p>El valor de una entrada de colores se considera no válido si el {{Glossary("user agent")}} no es capaz de convertir la entrada del usuario en la notación hexadecimal de siete caracteres minúsculos. Cuando se da esta situación, se aplica la pseudoclase {{cssxref(":invalid")}} al elemento.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Creemos un ejemplo que realice algo más con la entrada de color a través de la monitorización de los sucesos {{event("change")}} y {{event("input")}} para tomar el color nuevo y aplicarlo a cada uno de los elementos {{HTMLElement("p")}} del documento.</p> + +<h3 id="HTML">HTML</h3> + +<p>El código HTML es bastante sencillo: un par de párrafos de material descriptivo con un {{HTMLElement("input")}} del tipo «<code>color</code>» con el identificador «<code>muestrario</code>», el cual utilizaremos para modificar el color del texto de los párrafos.</p> + +<pre class="brush: html"><p>Este ejemplo demuestra la utilización del control <code>&lt;input type="color"&gt;</code>.</p> + +<label for="muestrario">Color:</label> +<input type="color" value="#ff0000" id="muestrario"> + +<p>Observe cómo el color de los párrafos cambia cuando manipula el selector de colores. + A medida que realiza cambios en el selector, el color del primer párrafo cambia, + a manera de previsualización (esto usa el suceso <code>input</code>). + Cuando cierra el selector, se desencadena el suceso <code>change</code> + y podemos detectarlo para cambiar todos los párrafos al color elegido.</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Primero hay que realizar un poco de configuración. Aquí estableceremos algunas variables, una de las cuales contendrá el color que definiremos en el botón muestrario durante la primera carga y, a continuación, configurará un manejador para {{event("load")}} para realizar el trabajo de inicialización cuando termine de cargarse la página.</p> + +<pre class="brush: js">var muestrario; +var colorPredeterminado = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Inicialización">Inicialización</h4> + +<p>Una vez que se haya cargado la página, se realizará una llamada a nuestro manejador del suceso <code>load</code>, <code>startup()</code>:</p> + +<pre class="brush: js">function startup() { + muestrario = document.querySelector("#muestrario"); + muestrario.value = colorPredeterminado; + muestrario.addEventListener("input", actualizarPrimero, false); + muestrario.addEventListener("change", actualizarTodo, false); + muestrario.select(); +} +</pre> + +<p>Esto obtiene una referencia al elemento de color <code><input></code> en una variable denominada <code>muestrario</code> y, acto seguido, define el valor de la entrada de color al valor de <code>colorPredeterminado</code>. Después, el suceso {{event("input")}} de la entrada de color se configura para llamar a nuestra función <code>actualizarPrimero()</code> y el suceso {{event("change")}} se configura para llamar <code>actualizarTodo()</code>. Ambos pueden apreciarse a continuación.</p> + +<p>Por último, llamamos {{domxref("HTMLInputElement.select", "select()")}} para seleccionar el contenido de texto de la entrada de color input en caso de que el control se haya implementado como un cuadro de texto (lo cual no producirá ningún efecto si se ha brindado una interfaz de selección de colores en su lugar).</p> + +<h4 id="Reaccionar_a_cambios_de_color">Reaccionar a cambios de color</h4> + +<p>Proveemos dos funciones que se ocupan de los cambios de color. La función <code>actualizarPrimero()</code> se llama en respuesta al suceso <code>input</code>. Esta modifica el color del primer elemento de párrafo del documento para que corresponda con el nuevo valor de la entrada de color. Como los sucesos <code>input</code> se desencadenan cada vez que se realiza un ajuste al valor (por ejemplo, si se aumenta el brillo del color), estos se producirán repetidamente mientras se manipule el selector de colores.</p> + +<pre class="brush: js">function actualizarPrimero(event) { + var p = document.querySelector("p"); + + if (p) { + p.style.color = event.target.value; + } +}</pre> + +<p>Cuando se cierre el selector de colores, señalando que el valor dejará de cambiar (a menos que el usuario vuelva a abrir el selector), se envía el suceso <code>change</code> al elemento. Manejamos ese suceso a través de la función <code>actualizarTodo()</code>, sirviéndonos de {{domxref("HTMLInputElement.value", "Event.target.value")}} para obtener el color final seleccionado:</p> + +<pre class="brush: js">function actualizarTodo(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<p>Esto define el color de cada uno de los bloques {{HTMLElement("p")}} de manera que sus atributos {{cssxref("color")}} coincidan con el valor actual de la entrada de color, a la cual se hace referencia con {{domxref("Event.target", "event.target")}}.</p> + +<h3 id="Resultado">Resultado</h3> + +<p>El resultado final es el siguiente:</p> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>20.0</td> + <td>38</td> + <td>{{CompatGeckoDesktop(29)}} <sup><a href="#footnote_1">[1]</a></sup></td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>10</td> + </tr> + <tr> + <td>{{htmlattrxref("list", "input")}}</td> + <td>20.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + <td>20.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Función</th> + <th>Android</th> + <th>Firefox móvil (Gecko)</th> + <th>IE móvil</th> + <th>Opera móvil</th> + <th>Safari móvil</th> + </tr> + <tr> + <td>Compatibilidad básica</td> + <td>4.4</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{htmlattrxref("list", "input")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="footnote_1">[1] Firefox no admite aún las entradas del tipo «<code>color</code>» en Windows Touch.</p> + +<p>[2] Consulte {{bug(960984)}} para conocer el estado de compatibilidad del atributo <code>list</code> en Firefox.</p> + +<p>[3] Consulte {{bug(960989)}} para conocer el estado de compatibilidad del atributo <code>autocomplete</code> en Firefox. Puede modificar y obtener el valor del atributo, pero este no surte ningún efecto.</p> diff --git a/files/es/web/html/element/input/date/index.html b/files/es/web/html/element/input/date/index.html new file mode 100644 index 0000000000..a1c36c5530 --- /dev/null +++ b/files/es/web/html/element/input/date/index.html @@ -0,0 +1,567 @@ +--- +title: <input type="date"> +slug: Web/HTML/Elemento/input/date +tags: + - Elemento + - Fecha + - Formulários HTML + - Inputs en formularios + - tipo Input +translation_of: Web/HTML/Element/input/date +--- +<p>{{HTMLRef}}</p> + +<p>Los elementos de <span class="seoSummary">{{htmlelement("input")}} del tipo <strong><code>date</code></strong> crean campos de entrada que permiten a los usuarios proporcionar una fecha, bien a través de un cuadro de texto que valida automáticamente el contenido, o bien mediante una interfaz especial de selección de fechas.</span> El valor resultante incluye el año, el mes y el día, pero no la hora. Los tipos de entrada <a href="/en-US/docs/Web/HTML/Element/input/time">time</a> y <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> admiten entradas de hora y de hora y fecha.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>La IU del control varía en función del navegador. Por el momento, la compatibilidad es dispersa; consulte {{anch("Compatibilidad entre navegadores")}} para obtener más detalles. En los navegadores no compatibles, el control se degrada sin problemas a un sencillo <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text">.</a></code></p> + +<pre><input id="date" type="date"></pre> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<p>Entre los navegadores que admiten una interfaz personalizada para seleccionar fechas se encuentran Chrome y Opera, cuyo control luce así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png"></p> + +<p>El control de fecha de Edge luce así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png"></p> + +<p>El control de Firefox luce así:</p> + +<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valor")}}</strong></td> + <td>Una {{domxref("DOMString")}} que representa una fecha en el formato AAAA-MM-DD, o nada</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} y {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Una {{domxref("DOMString")}} que representa el valor de la fecha proporcionada en la entrada. Es posible establecer un valor predeterminado para la entrada al incluir una fecha en el atributo {{htmlattrxref("value", "input")}}, de esta manera:</p> + +<pre><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<p>Cabe destacar que el formato de fecha mostrado difiere del <code>value</code> en sí: el formato de fecha mostrado se escogerá en función de la configuración regional del navegador del usuario, aunque el <code>value</code> de fecha siempre se formatee como <code>aaaa-mm-dd</code>.</p> + +<p>Es posible asimismo recuperar y establecer el valor de fecha en JavaScript mediante la propiedad {{domxref("HTMLInputElement.value", "value")}} del elemento de entrada; por ejemplo:</p> + +<pre>var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<p>Este código localiza el primer elemento {{HTMLElement("input")}} cuyo <code>type</code> sea <code>date</code> y define su valor a la fecha 2017-06-01 (1 de junio de 2017).</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Tenemos atributos adicionales tales como:</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>La fecha máxima aceptada.</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>La fecha minima aceptada.</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>El intervalo a usar, como cuando das click en las flechas, de cuanto en cuanto va avanzar o retroceder.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<p>La ultima fecha a aceptar. Si el{{htmlattrxref("value", "input")}} ingresado en el elemento esta después de esta fecha, el elemento cae <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor del <code>max</code> no es un valor valido, sigue el formato <code>yyyy-MM-dd</code>, donde el elemento no tiene máximo valor.</p> + +<p>Este valor debe ser especificado mayor o igual especificado por <code>min</code> attribute.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<p>La minima fecha aceptada; Una fecha menor que esta caera <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Si el valor es <code>min</code> el atributo no es valido y esa el formato <code>yyyy-MM-dd</code>, entonces el elemento no tiene valor minimo.</p> + +<p>Este valor debe especificarse como menor o igual<code>max</code> attribute.</p> + + + + + + + + + + + + + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p>Para <code>date</code> input, el valor de <code>step</code> se da en dias, con una escala en factor de 86,400,000 (desde el valor numerico en millisegundos). El valor por defecto es <code>step</code> 1, indicando de un día a día.</p> + +<div class="blockIndicator note"> +<p>Specifying <code>any</code> as a value for the <code>step</code> attribute makes the same effect as it were equal to <code>1</code> for <code>date</code> inputs.</p> +</div> + +<h2 id="Uso_de_las_entradas_de_fecha">Uso de las entradas de fecha</h2> + +<p>Las entradas de fecha suenan prácticas en un primer vistazo, ya que proveen una IU fácil de usar para seleccionar fechas y normalizan el formato de datos que se envía al servidor, sin importar la configuración regional del usuario. Sin embargo, existen problemas con <code><input type="date"></code> a causa de la compatibilidad limitada entre navegadores.</p> + +<p>Estudiaremos usos básicos y complejos de <code><input type="date"></code> y, posteriormente, brindaremos consejos para mitigar el problema de compatibilidad entre navegadores (consulte {{anch("Manejo de compatibilidad entre navegadores")}}). Evidentemente, con el tiempo es esperable que la compatibilidad entre navegadores se amplíe, lo que hará desaparecer este problema.</p> + +<h3 id="Usos_básicos_de_date">Usos básicos de <code>date</code></h3> + +<p>El uso más sencillo de <code><input type="date"></code> supone una combinación de un <code><input></code> básico y el elemento {{htmlelement("label")}}, como se indica a continuación:</p> + +<pre><form> + <div> + <label for="bday">Escriba su cumpleaños:</label> + <input type="date" id="bday" name="bday"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> + +<h3 id="Definir_los_límites_superior_e_inferior_de_la_fecha">Definir los límites superior e inferior de la fecha</h3> + +<p>Puede utilizar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas que el usuario puede seleccionar. En el ejemplo siguiente, definiremos como la fecha mínima <code>2017-04-01</code> y <code>2017-04-30</code> como la fecha máxima:</p> + +<pre><form> + <div> + <label for="party">Elija la fecha de festejo que prefiera:</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> + +<p>Como resultado, solo es posible seleccionar los días del mes de abril de 2017; solo la parte de los días del valor de texto es modificable, y no se puede desplazar a ninguna fecha que caiga fuera de abril en la interfaz de selección de fechas.</p> + +<p><strong>Nota</strong>: debería ser capaz de utilizar el atributo {{htmlattrxref("step", "input")}} para variar el número de días que se recorren con cada incremento de fecha (p. ej., puede que desee que solo se puedan seleccionar los sábados). No obstante, esto no parece funcionar en ninguna implementación en el momento en que se redactó esta página.</p> + +<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3> + +<p><code><input type="date"></code> no admite los atributos de dimensionamiento de formularios como {{htmlattrxref("size", "input")}}. Deberá recurrir al <a href="/en-US/docs/Web/CSS">CSS</a> para satisfacer sus necesidades de dimensionamiento.</p> + +<h2 id="Validación">Validación</h2> + +<p>De manera predeterminada, <code><input type="date"></code> no aplica a ninguna validación a los valores introducidos. Las implementaciones de IU generalmente no le permiten escribir algo que no sea una fecha (lo cual es útil) pero aun así podrá dejar el campo vacío o incluso (en los navegadores que recurren al tipo <code>text</code>) escribir una fecha no válida (p. ej., el 32 de abril).</p> + +<p>Si utiliza {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir las fechas disponibles (consulte {{anch("Definir los límites superior e inferior de la fecha")}}), los navegadores compatibles mostrarán un error si intenta enviar una fecha que se salga de los límites impuestos. No obstante, tendrá que comprobar los resultados para cerciorarse de que el valor esté dentro de los límites, ya que esta condición solo se hace cumplir si el dispositivo del usuario incluye compatibilidad completa con el selector de fecha.</p> + +<p>Además, puede emplear el atributo {{htmlattrxref("required", "input")}} para que proporcionar la fecha sea obligatorio: de nuevo, se mostrará un error si intenta enviar un campo de fecha vacío. Esto, cuando menos, debería funcionar en la mayoría de los navegadores.</p> + +<p>Estudie este ejemplo. Aquí hemos establecido las fechas mínima y máxima y convertimos el campo en obligatorio:</p> + +<pre><form> + <div> + <label for="party">Elija la fecha de festejo que prefiera (obligatorio, del 1.º al 20 de abril):</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>Si intenta enviar el formulario sin una fecha (o con una fecha fuera de los límites definidos), el navegador muestra un error. Pruebe a manipular el ejemplo:</p> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>Esta captura de pantalla ayudará a aquellos que no utilicen un navegador compatible:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png"></p> + +<p>Aqui un codigo CSS usado en el siguiente ejemplo. Donde se hace uso de {{cssxref(":valid")}} e {{cssxref(":invalid")}} Las propiedades en el estilo del "input" según el valor actual es o no valido. Se ponen iconos sobre el {{htmlelement("span")}} al costado del input, no en el mismo cuadro del input, porque en Chrome el contenido generado se remplaza dentro del formulario de control, y este no puede ser personalizado o no se mostraria efectivamente.</p> + +<pre>div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="blockIndicator warning"> +<p><strong>Importante</strong>: El formulario de validación en HTML no es un sustituto para los scripts que se aseguran que los datos esten ingresados en la forma correcta. Esto es demasiado facil para alguien que realiza ajustes en HTML que le permite pasar la validación, o quitarla de lleno. Es tambien posible para alguien simplificar el proceso de paso del formulario HTML enteramente y pasar la fecha directamente al servidor. Pero si en el lado de tu servidor fallase la validación al recibir la fecha, podria ocurrir un desastre cuando se envien los datos en el formato incorrecto (que la fecha sea muy larga, del tipo incorrecto, entre otras cosas más).</p> +</div> + +<h2 id="Manejo_de_compatibilidad_entre_navegadores">Manejo de compatibilidad entre navegadores</h2> + +<p>Como ya se menciono, el mayor problema al usar el "input" tipo date, es al momento de usar un <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Browser_compatibility">navegador compatible</a>. Ejemplo, el date picker en Firefox para Android luciria de la siguiente manera:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png"></p> + +<p>Pero los navegadores que no soportan lo remplazarian como un input del tipo texto, esto crea problemas en terminos de consistencia en relacion a la interfaz del usuario (El presente control seria diferente), y el manejo de datos también.</p> + +<p>El segundo problema es más serio; como ya se menciono, con un input tipo date, el valor actual siempre se normaliza en el siguiente formato <code>yyyy-mm-dd</code>. Con un input tipo texto, por default el navegador no reconoce el formato en el que deberia estar, y hay muchisimas formas en las que las personas escriben el formato de fecha, Por ejemplo:</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd yyyy</code></li> +</ul> + +<p>Una forma de evitar esto es usar un {{htmlattrxref("pattern", "input")}}, atributo que se pone en un input tipo date. A pesar de que la entrada tipo date no se usa, el input tipo text si lo hará, gracias a este {{htmlattrxref("pattern", "input")}}.Mira el siguiente ejemplo en un navegador que no soporta entradas de tipo date:</p> + +<pre><form> + <div> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p>Si Ud. trata de enviar la fecha, verá que el navegador no despliega un mensaje de error (y considera el valor del input como valido) Si tu entrada en el input no concuerda con el patron establecido <code>nnnn-nn-nn</code>, donde <code>n</code> es un numero del 0 al 9. De seguro, que esto no frenara a las personas de ingresar valores incorrectos de tipo fecha, o formatos incorrectos, como <code>yyyy-dd-mm</code> (mientras que nosotros necesitamos: <code>yyyy-mm-dd</code>). por lo que aún seria un problema...</p> + +<pre>div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> + +<p>La mejor forma de lidiar con fechas en formularios en un navegador cruzado, es pedir al usuario que ingrese el mes, el año y el dia en inputs separados o en formatos de control separados, ({{htmlelement("select")}} elementos que se han hecho populares; Mira abajo para ver la implementación), o usa una libreria de JavaScript como <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En este ejemplo creamos dos sets de elementos tipo UI para elegir fechas: uno nativo <code><input type="date"></code> y otro en un conjunto de tres {{htmlelement("select")}} elementos para elegir la fecha en navegadores antiguos que no soportan un input nativo.</p> + +<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>El codigo HTML se ve como:</p> + +<pre><form> + <div class="nativeDatePicker"> + <label for="bday">Enter your birthday:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Enter your birthday:</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Day:</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Month:</label> + <select id="month" name="month"> + <option selected>January</option> + <option>February</option> + <option>March</option> + <option>April</option> + <option>May</option> + <option>June</option> + <option>July</option> + <option>August</option> + <option>September</option> + <option>October</option> + <option>November</option> + <option>December</option> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form></pre> + +<p>Los meses son codificados (como son siempre), mientras que el dia y el año son generados dinamicamente dependiendo del mes y el año seleccionado, y el presente año (mira el codigo comentado para ver los detalles de la explicacion y como este funciona.)</p> + +<pre>input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>La otra parte del codigo que podria ser interesante es una caracteristica de detección de codigo— para detectar si el navegador soporta o no <code><input type="date"></code>, creamos un nuevo {{htmlelement("input")}}, seteado de <code>type</code> a <code>date</code>, inmediatamente verifica a que tipo corresponde— para navegadores que no soportan retornara un tipo <code>text</code>, porque el tipo <code>date</code> se volveria en tipo <code>text</code>. Si <code><input type="date"></code> no es soportado, escondemos el control nativo (datepicker nativo) y mostramos el selector tipo UI ({{htmlelement("select")}}) en vez de este.</p> + +<pre class="brush: js">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); +test.type = 'date'; + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the days and years dynamically + // (the months are always the same, therefore hardcoded) + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // Create variable to hold new number of days to inject + var dayNum; + + // 31 or 30 days? + if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { + dayNum = 31; + } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { + dayNum = 30; + } else { + // If month is February, calculate whether it is a leap year or not + var year = yearSelect.value; + (year - 2016) % 4 === 0 ? dayNum = 29 : dayNum = 28; + } + + // inject the right number of new <option> elements into the day <select> + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // if previous day has already been set, set daySelect's value + // to that day, to avoid the day jumping back to 1 when you + // change the year + if(previousDay) { + daySelect.value = previousDay; + + // If the previous day was set to a high number, say 31, and then + // you chose a month with less total days in it (e.g. February), + // this part of the code ensures that the highest day available + // is selected, rather than showing a blank daySelect + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // get this year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// when the month or year <select> values are changed, rerun populateDays() +// in case the change affected the number of available days +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//preserve day selection +var previousDay; + +// update what day has been set to previously +// see end of populateDays() for usage +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Recuerda que algunos años tienen 53 semanas (año bisiesto) (Mira <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Semanas por año</a>)! Tendras que tener esto en consideración cuando desarrolles apps o funciones.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>20</td> + <td>12</td> + <td>{{CompatGeckoDesktop(57)}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(57)}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5</td> + </tr> + </tbody> +</table> + +<p>[1] Reconoce pero no tiene UI.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> +</ul> diff --git a/files/es/web/html/element/input/datetime/index.html b/files/es/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..f1f4aeac25 --- /dev/null +++ b/files/es/web/html/element/input/datetime/index.html @@ -0,0 +1,147 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Elemento/input/datetime +tags: + - Elemento + - HTML + - Referencia +translation_of: Web/HTML/Element/input/datetime +--- +<p><span class="seoSummary"><dfn>El HTML</dfn><code> <input type="datetime"> </code>es un control para ingresar tiempo y fecha (hora, minuto, segundo y fracción de segundo) basado en la zona horaria UTC . <dfn> </dfn></span></p> + +<ul> + <li><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a> : Contenido dinámico , listed , submittable , resettable , contenido asociado a un formulario , contenido estático o de texto . Si <code>type</code> no tiene el valor <code>hidden </code>, elemenento labelable , contenido palpable .</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno , es un elemento vacío.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Debe de tener una etiqueta de inicio y no debe de tener una etiqueta final .</td> + </tr> + <tr> + <th scope="row">Elementos padres permitidos</th> + <td>Cualquier elemento que acepte contenido estático o de texto .</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement" title="The HTMLInputElement interface provides special properties and methods (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of input elements."><code>HTMLInputElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>El siguiente elemento tiene los siguientes<a href="/es/docs/Web/HTML/Atributos_Globales"> atributos globales</a> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div class="geckoVersionNote"> +<p><code><span class="highELE">input</span> <span class="highATT">type=</span><span class="highVAL">"datetime"</span> <span class="highATT">name=</span><span class="highVAL">"new_year"</span><span class="highGT"> </span></code></p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#date-and-time-state-(type=datetime)", "<input type=\"datetime\">")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "semantics.html#date-and-time-state-(type=datetime)", "<input type=\"datetime\">")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] El tipo <code>daytime</code> es reconocido, pero no hay una IU para este.</p> + +<p>[2] Actualmente Gecko no implementa el tipo <code>datetime.</code>Ver {{bug("825294")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El elemento {{HTMLElement("input")}}</li> +</ul> diff --git a/files/es/web/html/element/input/email/index.html b/files/es/web/html/element/input/email/index.html new file mode 100644 index 0000000000..f07953bb29 --- /dev/null +++ b/files/es/web/html/element/input/email/index.html @@ -0,0 +1,423 @@ +--- +title: <input type="email"> +slug: Web/HTML/Elemento/input/email +tags: + - Email + - Forms + - Formulários HTML + - HTML + - Input Type + - Referencia + - correoᵉ + - formulários +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("email")}} se utilizan para permitir que el usuario ingrese y edite una dirección de correoᵉ o, si se especifica el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, una lista de direcciones de correoᵉ.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<p>El valor de {{HTMLElement("input")}} se valida automáticamente para garantizar que esté vacío o sea una dirección de correoᵉ con el formato adecuado (o una lista de direcciones) antes de que se pueda enviar el formulario. Las pseudoclases {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} de CSS se aplican automáticamente según corresponda para indicar visualmente si el valor actual del campo es una dirección de correoᵉ válida o no.</p> + +<p>En los navegadores que no admiten entradas de tipo <code>email</code>, una entrada de <code>email</code> vuelve a ser un {{HTMLElement("input")}} {{HTMLElement("input/text", "text")}} estándar.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{DOMxRef("DOMString")}} que representa una dirección de correo electrónico o vacío</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{DOMxRef("HTMLElement/change_event", "change")}} y {{DOMxRef("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{HTMLAttrxRef("autocomplete", "input")}}, {{HTMLAttrxRef("list", "input")}}, {{HTMLAttrxRef("maxlength", "input")}}, {{HTMLAttrxRef("minlength", "input")}}, {{HTMLAttrxRef("multiple", "input")}}, {{HTMLAttrxRef("name", "input")}}, {{HTMLAttrxRef("pattern", "input")}}, {{HTMLAttrxRef("placeholder", "input")}}, {{HTMLAttrxRef("readonly", "input")}}, {{HTMLAttrxRef("required", "input")}}, {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("type", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>list</code> y <code>value</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value"><code>Value</code></h2> + +<p>El atributo {{HTMLAttrxRef("value", "input")}} del elemento {{HTMLElement("input")}} contiene un {{DOMxRef("DOMString")}} que se valida automáticamente conforme a la sintaxis del correoᵉ. Específicamente, hay tres posibles formatos de valor que pasarán la validación:</p> + +<ol> + <li>Una cadena vacía ("") — indica que el usuario no ingresó un valor o que el valor fue eliminado.</li> + <li>Una única dirección de correoᵉ debidamente formada. Esto no necesariamente significa que exista la dirección de correo electrónico, pero al menos tiene el formato correcto. En términos simples, esto significa <code>nombreusuario@dominio</code> o <code>nombreusuario@dominio.tld</code>. Hay más que eso, por supuesto; consulta {{anch("Validación")}} para obtener una {{Glossary("expresión regular")}} que coincida con el algoritmo de validación de la dirección de correoᵉ.</li> + <li>Si y solo se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correoᵉ correctamente formadas separadas por comas. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</li> +</ol> + +<p>Consulta {{anch("Validación")}} para obtener detalles sobre cómo se validan las direcciones de correoᵉ para asegurarte de que tengan el formato correcto.</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de <code> email </code> admiten los siguientes atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>El número máximo de caracteres que debe aceptar la entrada</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>Si se permite o no la introducción de varias direcciones de correoᵉ separadas por comas.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/es/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3> + +<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrxRef("maxlength", "input")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrxRef("email", "input")}} no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3> + +<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrxRef("email", "input")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrxRef("minlength", "input")}} o se especifica un valor no válido, la entrada de {{HTMLAttrDef("email")}} no tiene una longitud mínima.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefmultiple">{{HTMLAttrDef("multiple")}}</h3> + +<p>Un atributo booleano que, si está presente, indica que el usuario puede ingresar una lista de múltiples direcciones de correoᵉ, separadas por comas y, opcionalmente, espacios en blanco. Consulta {{anch("Permitir varias direcciones de correoᵉ")}} para ver un ejemplo, o {{web.link("/es/docs/Web/HTML/Attributes/multiple", "HTML el atributo: multiple")}} para más detalles.</p> + +<div class="note"> +<p><strong>Nota</strong>: Normalmente, si especificas el atributo {{HTMLAttrxRef("required", "input")}}, el usuario debe ingresar una dirección de correoᵉ válida para que el campo se considere válido. Sin embargo, si agregas el atributo {{HTMLAttrDef("multiple")}}, una lista de cero direcciones de correo electrónico (una cadena vacía o una que sea completamente en blanco) es un valor válido. En otras palabras, el usuario no tiene que ingresar ni siquiera una dirección de correo electrónico cuando se especifica {{HTMLAttrDef("multiple")}}, independientemente del valor de {{HTMLAttrDef("required")}}.</p> +</div> + +<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Consulta la sección {{anch("Patrón de validación")}} para obtener detalles y ver un ejemplo.</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/es/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Usar_inputs_de_tipo_email">Usar <code>input</code>s de tipo <code>email</code></h2> + +<p>Las direcciones de correoᵉ se encuentran entre los formularios de datos textuales que se ingresan con mayor frecuencia en la web; se utilizan al iniciar sesión en sitios web, al solicitar información, para permitir la confirmación de pedidos, para correo web, etc. Por lo tanto, el tipo de entrada {{HTMLAttrDef("email")}} puede hacer que tu trabajo como desarrollador web sea mucho más fácil, ya que puede ayudar a simplificar la tarea al crear la interfaz de usuario y la lógica para las direcciones de correoᵉ. Cuando creas una entrada de correoᵉ con el valor de {{HTMLAttrDef("type")}} adecuado, {{HTMLAttrDef("email")}}, obtienes validación automática de que el texto ingresado esté por lo menos en la forma correcta para potencialmente ser una dirección de correoᵉ legítima. Esto puede ayudar a evitar casos en los que el usuario escribe mal su dirección o proporciona una dirección no válida.</p> + +<p>Sin embargo, es importante tener en cuenta que esto no es suficiente para garantizar que el texto especificado sea una dirección de correoᵉ que realmente exista, que corresponda al usuario del sitio o que sea aceptable de cualquier otra manera. Simplemente garantiza que el valor del campo tenga el formato adecuado para ser una dirección de correoᵉ.</p> + +<div class="note"> +<p><strong>Nota</strong>: También es crucial recordar que un usuario puede jugar con tu HTML detrás de la escena, por lo que tu sitio <em>no debe</em> utilizar esta validación por motivos de seguridad. <em>Debes</em> verificar la dirección de correoᵉ en el lado del servidor de cualquier transacción en la que el texto proporcionado pueda tener implicaciones de seguridad de cualquier tipo.</p> +</div> + +<h3 id="Una_sencilla_entrada_de_correoᵉ">Una sencilla entrada de correoᵉ</h3> + +<p>Actualmente, todos los navegadores que admiten este elemento lo implementan como un campo de entrada de texto estándar con características básicas de validación. Sin embargo, la especificación permite a los navegadores cierta libertad en esto. Por ejemplo, el elemento se podría integrar con la libreta de direcciones incorporada del dispositivo del usuario para permitir seleccionar direcciones de correoᵉ de esa lista. En su forma más básica, una entrada de tipo {{HTMLAttrDef("email")}} se puede implementar así:</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email"></pre> + +<p>{{ EmbedLiveSample('Una_sencilla_entrada_de_correoᵉ', 600, 40) }}</p> + +<p>Ten en cuenta que se considera válido cuando está vacío y cuando se ingresa una única dirección de correoᵉ con formato válido, pero por lo demás no se considera válido. Al agregar el atributo {{HTMLAttrxRef("required", "input")}}, solo se permiten direcciones de correoᵉ con formato válido; la entrada ya no se considera válida cuando está vacía.</p> + +<h3 id="Permitir_varias_direcciones_de_correoᵉ">Permitir varias direcciones de correoᵉ</h3> + +<p>Al agregar el atributo booleano {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, la entrada se puede configurar para aceptar varias direcciones de correoᵉ.</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email" multiple></pre> + +<p>{{ EmbedLiveSample('permitir_varias_direcciones_de_correoᵉ', 600, 40) }}</p> + +<p>La entrada ahora se considera válida cuando se ingresa una sola dirección de correoᵉ, o cuando cualquier número de direcciones de correo electrónico separadas por comas y, opcionalmente, algún número de espacios en blanco están presentes.</p> + +<div class="note"> +<p><strong>Nota</strong>: Cuando se utiliza {{HTMLAttrDef("multiple")}}, el valor <em>puede</em> estar vacío.</p> +</div> + +<p>Algunos ejemplos de cadenas válidas cuando se especifica {{HTMLAttrDef("multiple")}}:</p> + +<ul> + <li><code>""</code></li> + <li><code>"yo@ejemplo"</code></li> + <li><code>"yo@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org,tu@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org, tu@ejemplo.org"</code></li> + <li><code>"yo@ejemplo.org,tu@example.org, su@ejemplo.org"</code></li> +</ul> + +<p>Algunos ejemplos de cadenas no válidas:</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Marcadores_de_posición">Marcadores de posición</h3> + +<p>A veces es útil ofrecer una pista en contexto sobre qué forma deben tomar los datos de entrada. Esto puede ser importante especialmente si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Aquí es donde entran los marcadores de posición ({{HTMLAttrDef("placeholder")}}s). Un marcador de posición es un valor que demuestra la forma que debe tomar el {{HTMLAttrDef("value")}} al presentar un ejemplo de un valor válido, que se muestra dentro del cuadro de edición cuando el valor del elemento es "". Una vez que se ingresan datos en el cuadro, el marcador de posición desaparece; si se vacía la caja, vuelve a aparecer el marcador de posición.</p> + +<p>Aquí, tenemos una entrada de {{HTMLAttrDef("email")}} con el marcador de posición <code>chofy@ejemplo.com</code>. Observa cómo el marcador de posición desaparece y reaparece a medida que manipulas el contenido del campo de edición.</p> + +<pre class="brush: html notranslate"><input type="email" placeholder="chofy@ejemplo.com"></pre> + +<p>{{ EmbedLiveSample('Marcadores_de_posición', 600, 40) }}</p> + +<h3 id="Controlar_el_tamaño_del_valor_ingresado">Controlar el tamaño del valor ingresado</h3> + +<p>Puedes controlar no solo la longitud física del cuadro de entrada, sino también las longitudes mínima y máxima permitidas para el texto de entrada en sí mismo.</p> + +<h4 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h4> + +<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que el cuadro de entrada puede mostrar a la vez. En este ejemplo, el cuadro de edición {{HTMLAttrDef("email")}} tiene 15 caracteres de ancho:</p> + +<pre class="brush: html notranslate"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 40) }}</p> + +<h4 id="Longitud_del_valor_del_elemento">Longitud del valor del elemento</h4> + +<p>El {{HTMLAttrDef("size")}} es independiente de la limitación de longitud de la dirección de correoᵉ ingresada, por lo que puedes hacer que los campos quepan en un espacio pequeño y, al mismo tiempo, permitir que se ingresen cadenas de direcciones de correoᵉ más largas. Puedes especificar una longitud mínima, en caracteres, para la dirección de correoᵉ ingresada usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima de la dirección de correoᵉ ingresada.</p> + +<p>El siguiente ejemplo crea un cuadro de entrada de dirección de correoᵉ de 32 caracteres de ancho, que requiere que el contenido tenga no menos de 3 caracteres y no más de 64 caracteres.</p> + +<pre class="brush: html notranslate"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Longitud_del_valor_del_elemento", 600, 40) }}</p> + +<h3 id="Proporcionar_opciones_predeterminadas">Proporcionar opciones predeterminadas</h3> + +<p>Como siempre, puedes proporcionar un valor predeterminado para un cuadro de entrada de tipo <code>email</code> configurando su atributo {{HTMLAttrxRef("value", "input")}}:</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input type="email" value="usuario@ejemplo.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Ofreciendo_valores_sugeridos">Ofreciendo valores sugeridos</h4> + +<p>Yendo un paso más allá, puedes proporcionar una lista de opciones predeterminadas entre las que el usuario puede seleccionar especificando el atributo {{HTMLAttrxRef("list", "input")}}. Esto no limita al usuario a esas opciones, pero le permite seleccionar rápidamente las direcciones de correoᵉ de uso común. Esto también ofrece sugerencias para {{HTMLAttrxRef("autocomplete", "input")}}. El atributo {{HTMLAttrDef("list")}} especifica el ID de un {{HTMLElement("datalist")}}, que a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido; El valor de cada opción es el valor sugerido correspondiente para el cuadro de entrada de correoᵉ.</p> + +<pre class="brush: html notranslate"><input type="email" size="40" list="defaultEmails"> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample("Ofreciendo_valores_sugeridos", 600, 40)}}</p> + +<p>Con el elemento {{HTMLElement("datalist")}} y sus {{HTMLElement("option")}}es en su lugar, el navegador ofrecerá los valores especificados como valores potenciales para la dirección de correoᵉ; normalmente se presenta como un menú emergente o desplegable que contiene las sugerencias. Si bien la experiencia del usuario específico puede variar de un navegador a otro, normalmente al hacer clic en el cuadro de edición se muestra un menú desplegable con las direcciones de correoᵉ sugeridas. Luego, a medida que el usuario escribe, la lista se filtra para mostrar solo los valores coincidentes. Cada carácter escrito reduce la lista hasta que el usuario realiza una selección o escribe un valor personalizado.</p> + +<p><img alt="Animación: usa la entrada del teclado para filtrar la lista de direcciones de correo electrónico sugeridas" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validación">Validación</h2> + +<p>Hay dos niveles de validación de contenido disponibles para las entradas de {{HTMLAttrDef("email")}}. Primero, está el nivel de validación estándar que se ofrece a todos los {{HTMLElement("input")}}s, que automáticamente asegura que el contenido cumple con los requisitos para ser una dirección de correoᵉ válida. Pero también existe la opción de agregar filtros adicionales para garantizar que se satisfagan tus propias necesidades especializadas, si las tienes.</p> + +<div class="warning"> +<p><strong>Importante</strong>: La validación del formulario HTML <em>no</em> sustituye a los scripts que garantizan que los datos ingresados tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p> +</div> + +<h3 id="Validación_básica">Validación básica</h3> + +<p>Los navegadores que admiten el tipo de entrada {{HTMLAttrDef("email")}} automáticamente proporcionan una validación para garantizar que solo se introduzca en el cuadro de entrada el texto que coincida con el formato estándar para las direcciones de correoᵉ de Internet. Los navegadores que implementan la especificación deben utilizar un algoritmo equivalente a la siguiente expresión regular:</p> + +<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} + [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ +</pre> + +<p>Para obtener más información sobre cómo funciona la validación de formularios y cómo aprovechar las propiedades de CSS {{CSSxRef(":valid")}} e {{CSSxRef(":invalid")}} para estilizar la entrada en función de si el el valor actual es válido, consulta {{web.link("/es/docs/Learn/HTML/Forms/Form_validation", "Validación de datos de formulario")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Existen problemas de especificación conocidos relacionados con los nombres de dominio internacionales y la validación de direcciones de correo electrónico en HTML. Consulta el <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">error 15489 en W3C</a> para obtener más detalles.</p> +</div> + +<h3 id="Patrón_de_validación">Patrón de validación</h3> + +<p>Si necesitas restringir la dirección de correo electrónico ingresada más allá de "cualquier cadena que parezca una dirección de correo electrónico", puedes usar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una {{Glossary("expresión regular")}} con la cual el valor debe coincidir para que sea válido. Si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, cada elemento individual en la lista de valores delimitados por comas debe coincidir con la {{Glossary("expresión regular")}}.</p> + +<p>Por ejemplo, supón que estás creando una página para los empleados de "Best Startup Ever, Inc". lo que les permitirá ponerse en contacto con su departamento de TI para obtener ayuda. En nuestro formulario simplificado, el usuario debe ingresar su dirección de correoᵉ y un mensaje que describa el problema con el que necesita ayuda. Queremos asegurarnos de que el usuario no solo proporcione una dirección de correoᵉ válida, sino que, por motivos de seguridad, requerimos que la dirección sea una dirección de correo electrónico corporativa interna.</p> + +<p>Dado que las entradas de tipo {{HTMLAttrDef("email")}} se comprueban con la validación de la dirección de correoᵉ estándar <em>y</em> el {{HTMLAttrxRef("pattern", "input")}} especificado, se puede implementar así de fácil. Observa cómo:</p> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +[parcial]label : + [parcial]line-height: 1.5; +} + +label::after { + content: ":"; +}</pre> +</div> + +<pre class="brush: html notranslate"><form> + <div class="emailBox"> + <label for="emailAddress">Tu dirección de correoᵉ</label><br> + <input id="emailAddress" type="email" size="64" maxLength="64" required + placeholder="nombreusuario@beststartupever.com" pattern=".+@beststartupever.com" + title="Por favor, solo proporciona una dirección de correoᵉ corporativa que te haya proporcionado Best Startup Ever"> + </div> + + <div class="messageBox"> + <label for="message">Solicitud</label><br> + <textarea id="message" cols="80" rows="8" required + placeholder="Mis zapatos están demasiado apretados y he olvidado cómo bailar."></textarea> + </div> + <input type="submit" value="Envía solicitud"> +</form> +</pre> + +<p>{{EmbedLiveSample("Patrón_de_validación", 700, 275)}}</p> + +<p>El {{HTMLElement("form")}} contiene un {{HTMLElement("input")}} de tipo {{HTMLAttrxRef("email", "input")}} para la dirección de correoᵉ del usuario, un {{HTMLElement("textarea")}} para ingresar su mensaje y un {{HTMLElement("input")}} de tipo {{web.link("/es/docs/Web/HTML/Element/input/submit", "submit")}}, que crea un botón para enviar el formulario. Cada cuadro de entrada de texto tiene una {{HTMLElement("label")}} asociada para que el usuario sepa lo que se espera de ellos.</p> + +<p>Échale un vistazo más de cerca al cuadro de entrada de la dirección de correoᵉ. Sus atributos {{HTMLAttrxRef("size", "input")}} y {{HTMLAttrxRef("maxlength", "input")}} se establecen en 64 para mostrar espacio para 64 caracteres en direcciones de correoᵉ y limitar la cantidad de caracteres ingresados realmente a un máximo de 64. Se especifica el atributo {{HTMLAttrxRef("required", "input")}}, lo cual hace obligatorio que se proporcione una dirección de correoᵉ válida.</p> + +<p>Se proporciona un {{HTMLAttrxRef("placeholder", "input")}} apropiado, <code>nombreusuario@beststartupever.com</code>, para demostrar lo que constituye una entrada válida. Esta cadena demuestra que se debe ingresar una dirección de correoᵉ y sugiere que debe ser una cuenta corporativa de "beststartupever.com". Esto se suma al hecho de que el uso del tipo {{HTMLAttrDef("email")}} validará el texto para garantizar que tenga el formato de una dirección de correoᵉ. Si el texto en el cuadro de entrada no es una dirección de correoᵉ, recibirá un mensaje de error similar a este:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> + +<p>Si dejas las cosas así, al menos estarías validando direcciones de correoᵉ legítimas. Pero quieres ir un paso más allá: quieres asegurarte de que la dirección de correoᵉ tenga el formato "<em>nombreusuario</em>@beststartupever.com". Aquí es donde usarás el {{HTMLAttrxRef("pattern", "input")}}. Establece el {{HTMLAttrDef("pattern")}} en <code>.+@beststartupever.com</code>. Esta simple expresión regular solicita una cadena que consta de al menos un carácter de cualquier tipo, luego una "@" seguida por el nombre de dominio "beststartupever.com".</p> + +<p>Ten en cuenta que esto ni siquiera se acerca a un filtro adecuado para direcciones de correo electrónico válidas; permitiría cosas como "@ beststartupever.com" (tenga en cuenta el espacio inicial) o "@@ beststartupever.com", ninguna de las cuales es válida. Sin embargo, el navegador ejecuta tanto el filtro de dirección de correoᵉ estándar <em>como</em> nuestro patrón personalizado contra el texto especificado. Como resultado, terminamos con una validación que dice "asegúrate de que se asemeje a una dirección de correoᵉ válida, y si lo es, asegúrate de que también sea una dirección beststartupever.com".</p> + +<p>Es recomendable utilizar el atributo {{HTMLAttrxRef("title")}} junto con {{HTMLAttrDef("pattern")}}. Si lo haces, el {{HTMLAttrDef("title")}} <em>debe</em> describir el patrón. Es decir, debe explicar qué formato deben adoptar los datos, en lugar de cualquier otra información. Esto se debe a que el {{HTMLAttrDef("title")}} se puede mostrar o pronunciar como parte de un mensaje de error de validación. Por ejemplo, el navegador puede presentar el mensaje "El texto ingresado no coincide con el patrón requerido". seguido de su {{HTMLAttrDef("title")}} especificado. Si tu {{HTMLAttrDef("title")}} es algo así como "Dirección de correoᵉ", el resultado sería el mensaje "El texto ingresado no coincide con el patrón requerido. Dirección de correoᵉ", no es muy buena.</p> + +<p>Es por eso que, en cambio, especificamos la cadena "Por favor, proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever", Al hacerlo, el mensaje de error completo resultante podría ser algo como "El texto ingresado no coincide con el patrón requerido. Proporciona solo una dirección de correoᵉ corporativo de Best Startup Ever."</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si tienes problemas al escribir tus expresiones regulares de validación y no funcionan correctamente, consulta la consola de tu navegador; posiblemente haya útiles mensajes de error que te ayudarán a resolver el problema.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Aquí tenemos una entrada de correoᵉ con el ID <code>emailAddress</code> que puede tener un máximo de 256 caracteres. El cuadro de entrada en sí mismo, físicamente tiene 64 caracteres de ancho y muestra el texto <code>usuario@ejemplo.gov</code> como marcador de posición cada vez que el campo está vacío. Además, al utilizar el atributo {{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}, el cuadro se configura para permitir al usuario ingresar cero o más direcciones de correoᵉ, separadas por comas, como se describe en {{anch("Permitir varias direcciones de correoᵉ")}}. Como toque final, el atributo {{web.link("/es/docs/Web/HTML/Attributes/list", "list")}} contiene el ID de un {{HTMLElement("datalist")}} cuyas {{HTMLElement("option")}}es especifican un conjunto de valores sugeridos que el usuario puede elegir.</p> + +<p>Como toque adicional, el elemento {{HTMLElement("label")}} se utiliza para establecer una etiqueta para el cuadro de entrada de Correoᵉ, con su atributo {{HTMLAttrxRef("for", "label")}} que hace referencia al ID <code>emailAddress</code> del elemento {{HTMLElement("input")}}. Al asociar los dos elementos de esta manera, entonces al hacer clic en la etiqueta se enfocará el elemento de entrada.</p> + +<pre class="brush: html notranslate"><label for="emailAddress">Correoᵉ</label><br/> +<input id="emailAddress" type="email" placeholder="usuario@ejemplo.gov" + list="defaultEmails" size="64" maxlength="256" multiple> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample('Ejemplos', 600, 50)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '<input type="email">')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Forms", "Guía de formularios HTML")}}</li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/es/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/es/docs/Web/HTML/Element/input/url"><input type="url"></a></code></li> + <li>Atributos: + <ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/list", "list")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/minlength", "minlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/multiple", "multiple")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/placeholder", "placeholder")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/readonly", "readonly")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li> + </ul> + </li> + <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li> +</ul> diff --git a/files/es/web/html/element/input/hidden/index.html b/files/es/web/html/element/input/hidden/index.html new file mode 100644 index 0000000000..b7c1c42126 --- /dev/null +++ b/files/es/web/html/element/input/hidden/index.html @@ -0,0 +1,201 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Elemento/input/hidden +tags: + - Element + - Forms + - HTML + - HTML Form + - Input + - Tipos de Input + - formulários + - hidden +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} elements of type <code><strong>"hidden"</strong></code> let web developers include data that cannot be seen or modified by users when a form is submitted. For example, the ID of the content that is currently being ordered or edited, or a unique security token. Hidden inputs are completely invisible in the rendered page, and there is no way to make it visible in the page's content.</span></p> + +<div class="note"> +<p><strong>Note</strong>: Hay un ejemplo en vivo debajo de las siguientes líneas de código — si esta funcionando correctamente no debería ver algo.</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>{{domxref("DOMString")}} representando el valor de un campo oculto que se espetra pasar al servidor.</td> + </tr> + <tr> + <td><strong>Events</strong></td> + <td>Ninguno.</td> + </tr> + <tr> + <td><strong>Supported Common Attributes</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Methods</strong></td> + <td>Ninguno.</td> + </tr> + </tbody> +</table> + +<h2 id="Valor_(Value)">Valor (Value)</h2> + +<p>El atributo {{htmlattrxref("value", "input")}} del elemento {{HTMLElement("input")}} tiene un {{domxref("DOMString")}} que contiene la información oculta que se desea incluir en el formulario cuando sea remitido al servidor. Específicamente no puede ser editado por el usuario o mostrado a éste por medio la interfaz de usuario, aunque puede ser editado por medio de las herramientas para desarrolladores del navegador.</p> + +<div class="warning"> +<p>Mientras que el valor no es desplegado al usuario en el contenido de la página, si es visible —y puede ser modificado—usando las herramientas para desarrolladores de cualquier navegador o la funcionalidad "Ver código fuente" (View Source). No confíe en <code>hidden</code> inputs como una forma de seguridad.</p> +</div> + +<h2 id="Utilizando_hidden_inputs">Utilizando hidden inputs</h2> + +<p>Como se menciono anteriormente, las hidden inputs pueden ser utilizadas donde sea que se quiera incluir información del formulario que el usuario no pueda ver o modificar cuando sea enviado al servidor. Se mostrarán algunos ejemplos que ilustran su uso.</p> + +<h3 id="Seguimiento_de_contenido_editado">Seguimiento de contenido editado</h3> + +<p>Uno de los usos más comunes para los hidden inputs es mantener un seguimiento de que registros de la base de datos necesitan actualizarse cuando un formulario de actualización es remitido. Un flujo de trabajo tipico se ve como:</p> + +<ol> + <li>El usuario decide editar algún contenido sobre el cual tiene control, como una entrada de blog o la entrada de un producto. Comienza cuando se presiona el botón de editar.</li> + <li>El contenido ha ser editado es tomado de la base de datos y cargados en un formulario HTML para permitir al usuario hacer cambios.</li> + <li>Después de editar, el usuario remite el formulario y la información actualizada es envíada de vuelta al servidor para ser actualizada en el servidor.</li> +</ol> + +<p>La idea es que durante el paso 2, el ID del registro que se actualiza se mantenga en un hidden input. Cuando se envía el formulario en el paso 3, el ID se envía automáticamente al servidor con el contenido del registro. El ID permite que el componente de servidor del sitio sepa exactamente qué registro necesita ser actualizado con los datos enviados.</p> + +<p>Puede ver un ejemplo completo de como podría ser en la sección {{anch("Examples")}} de abajo.</p> + +<h3 id="Mejorando_la_seguridad_del_sitio_web">Mejorando la seguridad del sitio web</h3> + +<p>Hidden inputs también son usados para almacenar y enviar token de seguirdad o secretos (<em>secrets)</em>, con el propósito de mejorar la seguridad del sitio web. La idea básica es que si un usuario esta rellenando un formulario con información sensible, como un formulario en un sitio web bancario para transferir dinero a otra cuenta, el secreto que proporciona demostraría que son quienes dicen ser y que estan usando el formulario correcto para enviar la solicitud de transferencia.</p> + +<p>Esto evitaría que un usuario malicioso creara un formulario falso, fingiendo ser un banco y enviando el formulario por correo electrónico a usuarios desprevenidos para engañarlos y que transfieran dinero al lugar equivocado. Este tipo de ataque es llamado como <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security#Cross_Site_Request_Forgery_(CSRF)">Cross Site Request Forgery (CSRF)</a>; prácticamente cualquier marco de trabajo que goce de buena reputación utiliza secretos ocultos para evitar tales ataques.</p> + +<div class="note"> +<p>Como se menciono anteriormenre, colocando el secreto en un hidden input no lo hace inherentemente seguro. La composición y codificación de la llave haría eso. El valor del hidden input es que mantiene el secreto asociado con la información y automáticamente lo incluye cuando el formulario es enviado al servidor. Se necesita usar secretos bien diseñados para realmente mantener seguro el sitio web.</p> +</div> + +<h2 id="Validación">Validación</h2> + +<p>Hidden inputs no participan en la validación de restricciones; no son un valor real que deba ser restringido.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En el código de abajo se muestra como se puede implementar una versión simple de un formulario de actualización descrito anteriomente (ver {{anch("Tracking edited content")}}), utilizando un hidden input para recordar el ID del registro ha ser editado.</p> + +<p>El formulario HTML puede verse un como como este:</p> + +<pre class="brush: html"><form> + <div> + <label for="title">Título del artículo:</label> + <input type="text" id="titulo" name="titulo" value="Mi excelente artículo del blog"> + </div> + <div> + <label for="content">Contenido del artículo:</label> + <textarea id="contenido" name="contenido" cols="60" rows="5"> +Este es el contenido de mi excelente actículo del blog. ¡Espero lo disfrutes! + </textarea> + </div> + <div> + <button type="submit">Actualizar artículo</button> + </div> + <input type="hidden" id="acticuloId" name="articuloId" value="34657"> +</form></pre> + +<p>Añadiendo también unas líneas simples de CSS:</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<p>El servidor establecerá el valor del hidden input con el ID <code>"articuloID"</code> al ID del artículo en la base de datos antes de enviar el formulario al navegador del usuario, y se usará esa información cuando el formulario sea devuelto para saber que registro de la base de datos actualizar con la información modificada. No se necesitan scripts en el contenido para manejar esto.</p> + +<p>La salida se vería como:</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Nota:</strong> Puede encontrar el ejemplo en GitHub (vea el <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">código fuente</a>, y también <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">veálo corriendo en vivo</a>).</p> +</div> + +<p>Cuando se envían, los datos del formulario enviados al servidor tendrán un aspecto parecido a este:</p> + +<p><code>title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657</code></p> + +<p>A pesar de que los hiden input no se pueden ver en absoluto, sus datos se siguen enviando.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + + + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms guide</a></li> + <li>{{HTMLElement("input")}} y la interfaz {{domxref("HTMLInputElement")}} en la que se basa</li> +</ul> diff --git a/files/es/web/html/element/input/index.html b/files/es/web/html/element/input/index.html new file mode 100644 index 0000000000..7af5101141 --- /dev/null +++ b/files/es/web/html/element/input/index.html @@ -0,0 +1,1529 @@ +--- +title: input +slug: Web/HTML/Elemento/input +tags: + - Elemento + - Etiqueta HTML input + - Formularios(2) + - HTML + - Referencia + - Web + - formularios html(2) +translation_of: Web/HTML/Element/input +--- +<h2 id="Resumen">Resumen</h2> + +<p>El elemento HTML <code><input></code> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario.<span class="tlid-translation translation" lang="es"><span title="">Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (<a href="/en-US/docs/Glossary/user_agent">user agent</a>).El elemento </span></span><code><input></code><span class="tlid-translation translation" lang="es"><span title=""> es uno de los más potentes y complejos en todo HTML debido a la gran cantidad de combinaciones de tipos y atributos de entrada.</span></span></p> + +<p> </p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> + <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_dinámico">Contenido dinámico</a>, enlistado, presentable, reajustable, elemento asociado a formulario, <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>. Si su atributo {{htmlattrxref("type", "input")}} no es <code>hidden</code>, entonces contenido etiquetable, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, pues es un {{Glossary("empty element", "elemento vacío")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiqueta</th> + <td>Debe tener una etiqueta de apertura y no debe tener etiqueta de cierre.</td> + </tr> + <tr> + <th scope="row">Elementos padre permitidos</th> + <td>Cualquier elemento que acepte <a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Contenido_textual_o_estático">contenido textual</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales" rel="internal" title="en/HTML/Global attributes">atributos globales</a>, y los indicados a continuación.</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>El tipo de control a mostrar. Su valor predeterminado es <code>text</code>, si no se especifica este atributo. Los posibles valores son: + <ul> + <li><code>button</code>: Botón sin un comportamiento específico.</li> + <li><code>checkbox</code>: Casilla de selección. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado. También se puede usar el atributo <strong>indeterminate</strong> (el cual solo se puede establecer programaticamente) para indicar que la casilla está en un estado indeterminado (en la mayoría de las plataformas, se dibuja una línea horizontal a través de la casilla).</li> + <li><code>color</code>: {{HTMLVersionInline("5")}} Control para espicificar un color. Una interfaz de selección de color no requiere más funcionalidad que la de aceptar colores simples como texto (<a href="http://www.w3.org/TR/html5/forms.html#color-state-(type=color)">más información</a>).</li> + <li><code>date</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha (año, mes y día, sin tiempo).</li> + <li><code>datetime</code>: {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} Control para introducir una fecha y hora (horas, minutos, segundos y fracción de segundo), basado en la zona horaria UTC. <strong>Esta característica ha sido <a href="https://github.com/whatwg/html/issues/336">removida de WHATWG HTML.</a></strong></li> + <li><code>datetime-local</code>: {{HTMLVersionInline("5")}} Control para introducir fecha y hora, sin zona horaria específica.</li> + <li><code>email</code>: {{HTMLVersionInline("5")}} Campo para introducir una dirección de correo electrónico. El valor introducido se valida para que contenga una cadena vacía o una dirección de correo válida antes de enviarse. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>file</code>: Control que permite al usuario seleccionar un archivo. Se puede usar el atributo <strong>accept</strong> para definir los tipos de archivo que el control podrá seleccionar.</li> + <li><code>hidden</code>: Control que no es mostrado en pantalla, pero cuyo valor es enviado al servidor.</li> + <li><code>image</code>: Botón de envío de formulario con gráfico. Se debe usar el atributo <strong>src</strong> para definir el origen de la imagen y el atributo <strong>alt</strong> para definir un texto alternativo. Se puede usar los atributos <strong>height</strong> y <strong>width</strong> para definir el tamaño de la imagen en píxeles.</li> + <li><code>month</code>: {{HTMLVersionInline("5")}} Control para introducir un mes y año, sin zona horaria específica.</li> + <li><code>number</code>: {{HTMLVersionInline("5")}} Control para introducir un número de punto flotante.</li> + <li><code>password</code>: Control de línea simple cuyo valor permanece oculto. Se puede usar el atributo <strong>maxlength</strong> para especificar la longitud máxima del valor que se puede introducir.</li> + <li><code>radio</code>: Botón radio. Se debe usar el atributo <strong>value</strong> para definir el valor que se enviará por este elemento. Se usa el atributo <strong>checked</strong> para indicar si el elemento está seleccionado de forma predeterminada. Los botones radio que tengan el mismo valor para su atributo <strong>name</strong> están dentro del mismo "grupo de botones radio". Solo un botón radio dentro de un grupo puede ser seleccionado a la vez.</li> + <li><code>range</code>: {{HTMLVersionInline("5")}} Control para introducir un número cuyo valor exacto no es importante. Este control usa los siguientes valores predeterminados si no se especifica cada atributo: + <ul> + <li><code>min</code>: 0</li> + <li><code>max</code>: 100</li> + <li><code>value</code>: <code>min</code> + (<code>max -</code> <code>min</code>) / 2, o <code>min</code> si <code>max</code> es menor que <code>min</code></li> + <li><code>step</code>: 1</li> + </ul> + </li> + <li><code>reset</code>: Botón que restaura los contenidos de un formulario a sus valores predeterminados.</li> + <li><code>search</code>: {{HTMLVersionInline("5")}} Cuadro de texto de línea simple para introducir textos de búsqueda. Los saltos de línea son eliminados automáticamente del valor introducido.</li> + <li><code>submit</code>: Botón que envía el formulario.</li> + <li><code>tel</code>: {{HTMLVersionInline("5")}} Control para introducir un número telefónico. Los saltos de línea son eliminados automáticamente del valor introducido, pero no hay otra sintaxis forzada. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en este control. Las pseudo-clases CSS {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>text</code>: Campo de texto de línea simple. Los saltos de línea son eliminados automáticamente del valor introducido.</li> + <li><code>time</code>: {{HTMLVersionInline("5")}} Control para introducir un valor de tiempo sin zona horaria específica.</li> + <li><code>url</code>: {{HTMLVersionInline("5")}} Campo para editar una URL. El valor introducido se valida para que contenga una cadena vacía o una ruta URL absoluta antes de enviarse. Los saltos de línea y espacios en blanco al principio o al final del valor son eliminados automáticamente. Se pueden usar atributos como <strong>pattern</strong> y <strong>maxlength</strong> para restringir los valores introducidos en el control. Las pseudo-clases {{cssxref(":valid")}} y {{cssxref(":invalid")}} son aplicadas segun corresponda.</li> + <li><code>week</code>: {{HTMLVersionInline("5")}} Control para introducir una fecha que consiste en número de semana del año y número de semana sin zona horaria específica.</li> + </ul> + </dd> + <dt>{{htmlattrdef("accept")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>file</code>, este atributo indica los tipos de archivo que el servidor acepta, de otra manera será ignorado. El valor debe ser una lista de tipos de contenido únicos, separados por coma: + <ul> + <li>Una extensión de archivo, comenzando por el caracter STOP (U+002E). (Ejemplos: ".jpg,.png,.doc")</li> + <li>Un tipo MIME válido sin extensiones</li> + <li><code>audio/*</code>, que representa archivos de audio {{HTMLVersionInline("5")}}</li> + <li><code>video/*</code>, que representa archivos de vídeo {{HTMLVersionInline("5")}}</li> + <li><code>image/*</code>, que representa archivos de imagen {{HTMLVersionInline("5")}}</li> + </ul> + </dd> + <dt>{{htmlattrdef("accesskey")}} sólo {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>Un caracter que el usuario puede presionar para establecer el cursor en el control. Este atributo es global en HTML5.</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>Especifica una "pista de acción" usada para determinar cómo etiquetar la tecla "enter" en dispositivos móviles con teclados virtuales. Los valores soportados son <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, y <code>send</code>. Esto queda automáticamente mapeado al texto apropiado y no son sensibles al uso de mayúsculas.</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>Atributo no estándar usado por <a href="https://developers.google.com/web/updates/2015/04/autocapitalize">Chrome</a> e iOS Safari Mobile, el cual controla si se deben cambiar los textos a mayúsculas automáticamente mientras son introducidos/editados por el usuario, y la forma en que esto se hará. Los valores no obsoletos están disponibles en iOS5 y superior. Los valores posibles son: + <ul> + <li><code>none</code>: Deshabilita completamente las mayúsculas automáticas.</li> + <li><code>sentences</code>: Cambia automáticamente a mayúscula la primera letra de la sentencia.</li> + <li><code>words</code>: Cambia automáticamente a mayúscula la primera letra de cada palabra.</li> + <li><code>characters</code>: Cambia automáticamente a mayúscula todos los caracteres.</li> + <li><code>on</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li> + <li><code>off</code>: {{deprecated_inline}} Obsoleto desde iOS 5.</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize">Documentation sobre <code>autocapitalize</code> en la Referencia HTML de Safari</a></dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica si el valor del control puede ser completado automáticamente por el navegador.</dd> + <dd>Los valores posibles son: + <ul> + <li><code>off</code>: El usuario debe explícitamente introducir un valor en este campo para cualquier uso, o el documento provee su propio método de auto-completado. El navegador no completa automáticamente lo introducido.</li> + <li><code>on</code>: Se permite al navegador completar automáticamente el valor basado en los valores que se han introducido previamente. Sin embargo, <code>on</code> no provee mayor información sobre qué clase de datos podría esperar el usuario introducir.</li> + <li><code>name</code>: Nombre completo.</li> + <li><code>honorific-prefix</code>: Prefixo o título (Ejemplos: "Sr.", "Sra.", "Dr.", "Srita.").</li> + <li><code>given-name</code>: Nombre de pila.</li> + <li><code>additional-name</code>: Segundo nombre.</li> + <li><code>family-name</code>: Apellido.</li> + <li><code>honorific-suffix</code>: Sufijo (Ejemplos: "Hijo", "Señor", "II").</li> + <li><code>nickname</code>: Apodo.</li> + <li><code>email</code>: Correo electrónico.</li> + <li><code>username</code>: Nombre de usuario.</li> + <li><code>new-password</code>: Nueva contraseña (por ejemplo, al crear una cuenta o cambiar la contraseña).</li> + <li><code>current-password</code>: Contraseña actual.</li> + <li><code>organization-title</code>: Título de organización (Ejemplos: "Ingeniero de Software", "Vicepresidente", "Director General Adjunto").</li> + <li><code>organization</code>: Organización.</li> + <li><code>street-address</code>: Calle (en dirección).</li> + <li><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code>, <code>address-level4</code>, <code>address-level3</code>, <code>address-level2</code>, <code>address-level1</code>: Valores para dirección.</li> + <li><code>country</code>: País.</li> + <li><code>country-name</code>: Nombre del país.</li> + <li><code>postal-code</code>: Código postal.</li> + <li><code>cc-name</code>: Nombre completo en un instrumento de pago.</li> + <li><code>cc-given-name</code>: Nombre de pila en un instrumento de pago.</li> + <li><code>cc-additional-name</code>: Segundo nombre en un instrumento de pago.</li> + <li><code>cc-family-name</code>: Apellido en un instrumento de pago.</li> + <li><code>cc-number</code>: Código de identificación de un instrumento de pago(por ejemplo, el número de tarjeta de crédito).</li> + <li><code>cc-exp:</code> Fecha de expiración de un instrumento de pago.</li> + <li><code>cc-exp-month</code>: Mes de expiración en un instrumento de pago.</li> + <li><code>cc-exp-year</code>: Año de expiración en un instrumento de pago.</li> + <li><code>cc-csc</code>: Código de seguridad en un instrumento de pago.</li> + <li><code>cc-type</code>: Tipo de instrumento de pago (por ejemplo, Visa).</li> + <li><code>transaction-currency</code>: Tipo de moneda de la transacción.</li> + <li><code>transaction-amount</code>: Monto de la transacción.</li> + <li><code>language</code>: Idioma preferido, etiqueta BCP 47 válida.</li> + <li><code>bday</code>: Fecha de cumpleaños.</li> + <li><code>bday-day</code>: Día de cumpleaños.</li> + <li><code>bday-month</code>: Mes de cumpleaños.</li> + <li><code>bday-year</code>: Año de cumpleaños.</li> + <li><code>sex</code>: Sexo (ejemplos, Femenino, Female, Fa'afafine), texto libre, sin líneas nuevas.</li> + <li><code>tel</code>: Teléfono.</li> + <li><code>url</code>: Dirección web correspondiente a la compañía, persona, dirección o información de contacto en los demás campos asociados a éste.</li> + <li><code>photo</code>: Fotografía, ícono u otra imagen correspondiente a la compañía, persona, dirección o información de contacto en los otros campos asociados a éste.</li> + </ul> + + <p>Véase el <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">Estándar WHATWG</a> para információn más detallada.</p> + + <p>Si el atributo <strong>autocomplete</strong> no está especificado en un elemento input, el navegador usa el atributo <strong>autocomplete</strong> del formulario al que pertenece el elemento <code><input></code>, es decir, el elemento <code>form</code> del cual es descendiente el elemento <code><input></code>, o aquél cuyo <strong>id</strong> está especificado en el atributo <strong>form</strong> del elemento input. Para mayor información, véase el atributo {{htmlattrxref("autocomplete", "form")}} en {{HTMLElement("form")}}.</p> + + <p>El atributo <strong>autocomplete</strong> también controla si Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persistirá el estado deshabilitado dinámico, y (si aplica) la selección dinámica</a> de un <code><input></code> a través de las cargas de la página. La característica de persistencia está habilitada de forma predeterminada. Estableciendo el valor de <strong>autocomplete</strong> como <code>off</code> se deshabilita esta característica. Esto funciona aún cuando el atributo <strong>autocomplete</strong> no se aplicaría normalmente al <code><input></code> en virtud de su atributo <strong>type</strong>. Véase {{bug(654072)}}.</p> + + <p>Para navegadores más modernos (incluyendo Firefox 38+, Google Chrome 34+, IE 11+), establecer el atributo <strong>autocomplete</strong> <em>no</em> previene que el administrador de contraseñas del navegador le pregunte al usuario si desea guardar la información de inicio de sesión (usuario y contraseña), ni tampoco, de permitirlo el usuario, que se autocompleten estos campos la próxima vez que el usuario visite la página. Véase <a href="/es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">El atributo autocomplete y campos de inicio de sesión</a>.</p> + </dd> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>Es un atributo no estándar, soportado por Safari, que es usado para controlar si la autocorrección debe estar habilitada cuando el usuario está introduciendo/editando el texto de un <code><input></code>. Los valores posibles de este atributo son: + <ul> + <li><code>on</code>: Habilita la autocorrección</li> + <li><code>off</code>: Deshabilita la autocorrección</li> + </ul> + <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect">Documentación de <code>autocorrect</code> en la Referencia HTML de Safari</a></dd> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano permite especificar que un control de formulario tenga el cursor cuando la página se carga, a menos que el usuario lo reemplace, por ejemplo, escribiendo en un control diferente. Solo un elemento de formulario en un mismo documento puede tener el atributo <strong>autofocus</strong>, el cual es Booleano. No puede ser aplicado si el atributo <strong>type</strong> tiene valor <code>hidden</code> (es decir, no se puede establecer automáticamente el cursor en un control oculto). Nótese que el cursor se podría establecer en el control antes de disparar el evento <a href="/es/docs/Web/Events/DOMContentLoaded"><code>DOMContentLoaded</code>.</a></dd> + <dt>{{htmlattrdef("capture")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <code>file</code>, la presencia de este atributo Booleano indica que se le dará preferencia a la captura del medio directamente del ambiente del dispositivo, usando algún <a href="https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism">mecanismo de captura de medios</a>.</p> + </dd> + <dt>{{htmlattrdef("checked")}}</dt> + <dd> + <p>Cuando el valor del atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>, la presencia de este atributo Booleano indica que el control está seleccionado de forma predeterminada. De lo contrario, será ignorado.</p> + + <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code><input></code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p> + </dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo Booleano indica que el control no está disponible para interacción. En particular, el evento <code>click</code> <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">no será invocado</a> en controles deshabilitados. De igual forma, el valor de un control deshabilitado no es enviado con el formulario.</p> + + <p>En Firefox, a diferencia de otros navegadores, de forma predeterminada, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">se persiste el estado de selección dinámico</a> en un <code><input></code> a través de las cargas de la página. Para controlar esta característica se usa el atributo {{htmlattrxref("autocomplete","input")}}.</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline("5")}}</dt> + <dd>El elemento form al que está asociado el elemento (su <em>formulario propietario</em>). El valor del atributo debe ser el <strong>id</strong> de un elemento {{HTMLElement("form")}} en el mismo documento. Si el atributo no es especificado, este elemento <code><input></code> deberá ser descendiente de un elemento {{HTMLElement("form")}}. Este atributo permite poner elementos <code><input></code> en cualquier parte dentro de un documento, no solamente como descendientes de su formulario. Un input puede ser asociado sólo con un formulario.</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>El URI de un programa que procesa la información enviada por el elemento input, cuando es un botón de tipo <code>submit</code> o <code>image</code>. Si se especifica, reemplaza al atributo {{htmlattrxref("action","form")}} del formulario al que pertenece el elemento.</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento es de tipo <code>submit</code> o <code>image</code>, este atributo especifica el tipo de contenido que es usado para enviar el formulario al servidor. Los valores posibles son: + <ul> + <li><code>application/x-www-form-urlencoded</code>: El valor predeterminado si el atributo no es especificado.</li> + <li><code>multipart/form-data</code>: Se usa este valor cuando se tiene un elemento <code><input></code> con atributo {{htmlattrxref("type","input")}} de valor <code>file</code>.</li> + <li><code>text/plain</code></li> + </ul> + + <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("enctype","form")}} del formulario al que pertenece el elemento.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es un botón de tipo <code>submit</code> o <code>image</code>, este atributo especifica el método HTTP que el navegador usará para enviar el formulario. Los valores posibles son: + <ul> + <li><code>post</code>: Los datos del formulario son incluidos en el cuerpo del formulario, y enviados al servidor.</li> + <li><code>get</code>: Los datos del formulario son añadidos al URI del <strong>form</strong> con un símbolo '?' como separador, y el URI resultante es enviado al servidor. Se usa este método cuando el formulario no tiene efectos secundarios y contiene solamente caracteres ASCII.</li> + </ul> + + <p>Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("method","form")}} del formulario al que pertenece el elemento.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo Booleano especifica que el formulario no será validado cuando se envíe. Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("novalidate","form")}} del formulario al que pertenece el elemento.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el elemento input es de tipo <code>submit</code> o <code>image</code>, este atributo es el nombre o palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario. Este es el nombre, o palabra clave, de un <em>contexto de navegación</em> (por ejemplo, pestaña, ventana o frame incrustado). Si este atributo está especificado, reemplaza al atributo {{htmlattrxref("target", "form")}} del formulario al que pertenece el elemento. Las siguientes palabras clave tienen significado especial: + <ul> + <li>_<code>self</code>: Carga la respuesta en el mismo contexto de navegación actual. Este valor es el predeterminado cuando no se especifica el atributo.</li> + <li><code>_blank</code>: Carga la respuesta en un contexto de navegación nuevo.</li> + <li><code>_parent</code>: Carga la respuesta en el contexto de navegación padre del actual. Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li> + <li><code>_top</code>: Carga la respuesta en el contexto de navegación principal (es decir, el contexto que es ancestro del actual y que no tenga padre). Si no hay contexto padre, se comporta de la misma forma que <code>_self</code>.</li> + </ul> + </dd> + <dt>{{htmlattrdef("height")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la altura de la imagen mostrada para el botón.</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>Es un atributo no estándar, soportado por WebKit (Safari) y Blink (Chrome), que solo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Si el atributo está presente, sin importar su valor, el <code><input></code> dispara eventos <a href="/en-US/docs/Web/Events/search"><code>search</code></a> conforme el usuario edita el valor. El evento solo es disparado después de que un tiempo definido en implementación haya pasado desde la última vez que se presionó una tecla. Si el atributo está ausente, el evento <a href="/en-US/docs/Web/Events/search"><code>search</code></a> solo se disparará cuando el usuario explícitamente inicie una búsqueda (por ejemplo, presionando la tecla Enter dentro del control). <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental"> Documentación de <code>incremental en la Referencia HTML de Safari</code></a></dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una pista para el navegador sobre qué teclado mostrar. Este atributo aplica cuando el valor del atributo <strong>type</strong> es text, password, email, o url. Los valores posibles son: + <ul> + <li><code>verbatim</code>: Alfanumérico, sin contenido con significado, como nombres de usuario o contraseñas.</li> + <li><code>latin</code>: Escritura en caracteres de latín, en el lenguaje de elección del usuario, con ayuda de escritura, como predicción de texto. Para comunicación humano-computadora, como en cuadros de búsqueda.</li> + <li><code>latin-name</code>: Como <em>latin</em>, pero con nombres de personas.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, pero con ayuda de escritura más agresiva. Para comunicación humano-humano, como mensajería instantánea o correo electrónico.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para idiomas secundarios del usuario.</li> + <li><code>kana</code>: Escritura en kana o romaji, típicamente escritura en hiragana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li> + <li><code>katakana</code>: Escritura en katakana, usando caracteres de anchura completa, con soporte para conversión a kanji. Usado para escritura en japonés.</li> + <li><code>numeric</code>: Escritura en caracteres numéricos, incluyendo teclas para los dígitos de 0 a 9, el separador de miles segun las preferencias del usuario, y el caracter para indicar números negativos. Destinado a códigos numéricos, por ejemplo, números de tarjeta de crédito. Para valores numéricos reales, es preferible usar <input type="number"> en lugar de este atributo.</li> + <li><code>tel</code>: Escritura de teléfonos, incluído las teclas de asterisco y gato. Es preferible el uso de <input type="tel"> en lugar de este atributo.</li> + <li><code>email</code>: Escritura de correo electrónico. Es preferible el uso de <input type="email"> en lugar de este atributo.</li> + <li><code>url</code>: Escritura de URL. Es preferible el uso de <input type="url"> en lugar de este atributo.</li> + </ul> + </dd> + <dt>{{htmlattrdef("list")}} {{HTMLVersionInline("5")}}</dt> + <dd>Identifica una lista de opciones predefinidas como sugerencias al usuario. El valor debe ser el <strong>id</strong> de un elemento {{HTMLElement("datalist")}} en el mismo documento. El navegador muestra solamente las opciones que son válidas para el elemento. Este atributo es ignorado cuando el atributo <strong>type</strong> tiene valor <code>hidden</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o algun tipo de botón.</dd> + <dt>{{htmlattrdef("max")}} {{HTMLVersionInline("5")}}</dt> + <dd>El valor máximo (numérico o fecha-hora) para este elemento, el cual no debe ser menor que su valor mínimo (atributo <strong>min</strong>).</dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd> + <p>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica el número máximo de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado. Puede exceder el valor del atributo <strong>size</strong>. Si no se especifica, el usuario puede introducir una cantidad ilimitada de caracteres. Especificar un número negativo resulta en el comportamiento predeterminado (es decir, el usuario puede introducir una cantidad ilimitada de caracteres). La restricción es evaluada sólo cuando el valor del atributo ha sido modificado.</p> + </dd> + <dt>{{htmlattrdef("min")}} {{HTMLVersionInline("5")}}</dt> + <dd>El valor mínimo (numérico o fecha-hora) para este elemento, el cual no debe ser mayor a su valor máximo (atributo <strong>max</strong>).</dd> + <dt>{{htmlattrdef("minlength")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>text</code>, <code>email</code>, <code>search</code>, <code>password</code>, <code>tel</code>, o <code>url</code>, este atributo especifica la longitud mínima de caracteres (en puntos de código Unicode) que el usuario puede introducir. Para los otros tipos de control, es ignorado.</dd> + <dt>{{htmlattrdef("multiple")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano indica si el usuario puede introducir más de un valor. Este atributo aplica cuando el atributo <strong>type</strong> es <code>email</code> o <code>file</code>, y en caso contrario es ignorado.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>El nombre del control, el cual es enviado con los datos del formulario.</dd> + <dt>{{htmlattrdef("pattern")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una expresión regular contra la que el valor es evaluado. El patrón debe coincidir con el valor completo, no solo una parte. Se puede usar el atributo <strong>title</strong> para describir el patrón como ayuda al usuario. Este atributo aplica cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, y en caso contrario es ignorado. El lenguaje de expresión regular es el mismo que el algoritmo {{jsxref("RegExp")}} de JavaScript, con el parámetro <code>'u'</code> que permite tratar al patrón como una secuencia de código Unicode. El patrón no va rodeado por diagonales.</dd> + <dt>{{htmlattrdef("placeholder")}} {{HTMLVersionInline("5")}}</dt> + <dd>Una pista para el usuario sobre lo que puede introducir en el control. El texto no debe contener saltos de línea. + <div class="note"><strong>Nota:</strong> No se debe usar el atributo <code>placeholder</code> en lugar de un elemento {{HTMLElement("label")}}, pues sus propósitos son diferentes. El elemento {{HTMLElement("label")}} describe el rol del elemento en el formulario (es decir, indica qué tipo de información se espera), y el atributo <code>placeholder</code> es una pista sobre el formato que debe tener el contenido. Hay casos en los que el atributo <code>placeholder</code> no es visible para el usuario, por lo que el formulario debe ser comprensible para el usuario aunque este atributo no esté presente.</div> + </dd> + <dt>{{htmlattrdef("readonly")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo indica que el usuario no puede modificar el valor del control. El valor del atributo es irrelevante. De ser necesario el acceso lectura-escritura al valor, <em>no</em> se debe agregar el atributo "<strong>readonly</strong>". Es ignorado si el atributo <strong>type</strong> es <code>hidden</code>, <code>range</code>, <code>color</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code>, o de tipo botón (como <code>button</code> o <code>submit</code>).</dd> + <dt>{{htmlattrdef("required")}} {{HTMLVersionInline("5")}}</dt> + <dd>Este atributo especifica que el usuario debe llenar el control antes de enviarlo al formulario. No puede ser usado cuando el atributo <strong>type</strong> es <code>hidden</code>, <code>image</code>, o de tipo botón (<code>submit</code>, <code>reset</code>, o <code>button</code>). Las pseudo-clases {{cssxref(":optional")}} y {{cssxref(":required")}} se aplicarán al campo según sea apropiado.</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>Este es un atributo no estándar, soportado por Safari, que sólo aplica cuando el atributo <strong>type</strong> es <code>search</code>. Es usado para controlar el máximo número de entradas que se deben mostrar en el listado nativo del <code><input></code> de búsquedas pasadas. Este valor debe ser un número entero no negativo.</dd> + <dt>{{htmlattrdef("selectionDirection")}} {{HTMLVersionInline("5")}}</dt> + <dd>La dirección en la que ocurre la selección. Esto es "forward" (hacia adelante) si la selección fue hecha de izquierda a derecha en una escritura LTR o izquierda a derecha en una escritura RTL, o "backward" (hacia atrás) si la selección fue hecha de forma opuesta. Puede ser "none" si la dirección de selección es desconocida.</dd> + <dt>{{htmlattrdef("selectionEnd")}}</dt> + <dd>La separación dentro del contenido de texto del último caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd> + <dt>{{htmlattrdef("selectionStart")}}</dt> + <dd>La separación dentro del contenido del primer caracter seleccionado. Si no hay selección, este valor indica la separación para el caracter que sigue a la posición actual del cursor (es decir, la posición que el siguiente caracter que se escriba ocupará).</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>El tamaño inicial del control. Este valor es en píxeles, a menos que el atributo <strong>type</strong> sea <code>text</code> o <code>password</code>, en cuyo caso será el número entero de caracteres. A partir de HTML5, este atributo aplica sólo cuando el atributo <strong>type</strong> es <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code>, <code>email</code>, o <code>password</code>, de otro modo es ignorado. Además, el tamaño debe ser mayor a cero. Si no se especifica un tamaño, se usa un valor predeterminado de 20. HTML5 simplemente establece que "el agente usuario debe asegurarse que al menos esa cantidad de caracteres sea visible", pero los caracteres pueden tener anchuras diferentes en ciertas fuentes. En algunos navegadores, una cadena con <em>x</em> caracteres no será completamente visible aunque su tamaño esté definido con un mínimo de <em>x</em>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si se establece este atributo con valor <code>true</code>, se está indicando que se debe revisar la ortografía y gramática del elemento. El valor <code>default</code> indica que el elemento va a actuar acorde al comportamiento predeterminado del navegador, posiblemente basado en el valor del atributo <code>spellcheck</code> de su elemento padre. El valor <code>false</code> indica que el elemento no debe ser revisado.</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>Si el atributo <strong>type</strong> es <code>image</code>, este atributo especifica el URI para la ubicación de la imagen a mostrar en el botón de envío gráfico. En caso contrario, es ignorado.</dd> + <dt>{{htmlattrdef("step")}} {{HTMLVersionInline("5")}}</dt> + <dd>Trabaja con los atributos <strong>min</strong> y <strong>max</strong>, para limitar el incremento de valores numéricos o de fecha-hora. Puede ser el valor <code>any</code> o un número positivo de punto flotante. Si no se establece este atributo como <code>any</code>, el control acepta solamente valores múltiplos del valor del atributo, mayores al mínimo.</dd> + <dt>{{htmlattrdef("tabindex")}} específico para el elemento en {{HTMLVersionInline(4)}}, global en {{HTMLVersionInline("5")}}</dt> + <dd>La posición del elemento en el orden de navegación por la tecla Tab dentro del documento.</dd> + <dt>{{htmlattrdef("usemap")}} solo para {{HTMLVersionInline(4)}}, {{obsoleteGeneric("inline", "HTML5")}}</dt> + <dd>El nombre de un elemento {{HTMLElement("map")}} usado como mapa de imagen.</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>El valor inicial del control. Este atributo es opcional, excepto cuando el atributo <strong>type</strong> es <code>radio</code> o <code>checkbox</code>.<br> + Nótese que cuando se recarga la página, Gecko e IE <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186">ignorarán el valor especificado en el código fuente HTML</a>, si el valor fue modificado antes de recargar.</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>Este atributo Booleano indica si el selector usado cuando el atributo <strong>type</strong> es <code>file</code> debe permitir la selección de directorios solamente.</dd> + <dt>{{htmlattrdef("width")}} {{HTMLVersionInline("5")}}</dt> + <dd>Si el valor del atributo <strong>type</strong> es <code>image</code>, este atributo define la anchura de la imagen mostrada en el botón.</dd> + <dt>{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}</dt> + <dd>Esta extensión de Mozilla permite especificar el mensaje de error cuando un campo no es validado exitosamente.</dd> +</dl> + +<h2 id="Notas">Notas</h2> + +<h3 id="Introducción_de_archivos">Introducción de archivos</h3> + +<div class="note"> +<p><strong>Nota:</strong> A partir de {{Gecko("2.0")}}, llamar al método <code>click()</code> en un elemento <code><input></code> de tipo "file" abre el selector de archivos y permite al usuario seleccionar archivos. Véase <a href="/es/docs/Using_files_from_web_applications">Utilizar ficheros desde aplicaciones web</a> para ejemplos y más detalles.</p> +</div> + +<p>No se puede establecer el valor de un selector de archivos desde un script. Hacer algo como lo siguiente no tiene efecto alguno:</p> + +<pre class="brush: js notranslate">var e = getElementById("someFileInputElement"); +e.value = "foo"; +</pre> + +<h3 id="Mensajes_de_error">Mensajes de error</h3> + +<p>Para que Firefox presente un mensaje de error personalizado cuando la validación de un campo falla, se puede usar el atributo <code>x-moz-errormessage</code>:</p> + +<pre class="brush: html notranslate"><input type="email" x-moz-errormessage="Por favor, especifique una dirección de correo válida."> +</pre> + +<p>Nótese, sin embargo, que esto no es estándar, y no tendrá efecto en otros navegadores.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h2 id="Ejemplo_1_Cuadro_de_texto_simple">Ejemplo 1: Cuadro de texto simple</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Simple input box</p> +<input type="text" value="Type here"> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example_1_Simple_input_box', '', '100', '', 'Web/HTML/Element/input') }}</p> + +<h2 id="Ejemplo_2_Escenario_de_uso_común">Ejemplo 2: Escenario de uso común</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><p>A common form that includes input tags</p> +<form action="getform.php" method="get"> + <label>First name: <input type="text"></label><br> + <label>Last name: <input type="text"></label><br> + <label>E-mail: <input type="email"></label><br> +<input type="submit" value="Submit"> +</form> +</pre> + +<h3 id="Resultado_2">Resultado</h3> + +<p>{{ EmbedLiveSample('Example_2_Common_use-case_scenario', '', '200', '', 'Web/HTML/Element/input') }}</p> + +<h3 id="Usando_mozactionhint_en_Firefox_mobile">Usando mozactionhint en Firefox mobile</h3> + +<p>Se puede usar el atributo {{htmlattrxref("mozactionhint", "input")}} para especificar el texto para la etiqueta de la tecla Enter en el teclado virtual cuando el formulario es mostrado en Firefox mobile. Por ejemplo, para mostrar una etiqueta "Next", se puede hacer esto:</p> + +<pre class="brush: html notranslate"><input type="text" mozactionhint="next"> +</pre> + +<p>El resultado es:</p> + +<p><a href="/@api/deki/files/4970/=mozactionhint.png"><img alt="mozactionhint.png" class="default internal" src="/@api/deki/files/4970/=mozactionhint.png?size=webview" style="border: 1px solid black; height: 350px; width: 210px;"></a></p> + +<h2 id="Regionalización">Regionalización</h2> + +<p>Los valores permitidos para ciertos tipos de <input> dependen de la región. En algunos casos, 1,000.00 is a valid number, mientras en otros la manera válida de escribir un número es 1.000,00.</p> + +<p>Firefox usa la siguiente heurística para determinar la región con la cual validar los datos introducidos por el usuario (por lo menos para <code>type="number"</code>):</p> + +<ul> + <li>Intenta con el lenguaje especificado por el atributo <code>lang</code>/<code>xml:lang</code> del elemento o de sus elementos ascendentes.</li> + <li>Intenta con el lenguaje especificado en algun encabezado HTTP Content-Language o</li> + <li>Si ninguno está especificado, usa la región definida en el navegador.</li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>Añade el elemento <code>capture</code></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)<sup>[28]</sup></th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=button</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>3</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<br> + {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=color</td> + <td>21.0</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.01</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>type=date</td> + <td>5.0<sup>[24]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=datetime-local</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=email</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=file</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>3.02</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=hidden</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=image</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[5]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=month</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[6]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=number</td> + <td>6.0<sup>[7]</sup></td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>10<sup>[4]</sup></td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=password</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=radio</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<br> + {{CompatGeckoDesktop("1.9.2")}}<sup>[2]</sup></td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=range</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("23.0")}}</td> + <td>10</td> + <td>10.62<sup>[8]</sup></td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=reset</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=search</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=submit</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=tel</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.01</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=text</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>type=time</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>type=url</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=week</td> + <td>5.0</td> + <td>{{CompatNo}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[4]</sup></td> + </tr> + <tr> + <td>accept=[file extension]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>8.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[9]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[10]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[11]</sup></td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>6</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>mozactionhint</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>autocapitalize</td> + <td>43</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>17.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>5</td> + <td>9.6</td> + <td>5.2</td> + </tr> + <tr> + <td>autofocus</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>5.0</td> + </tr> + <tr> + <td>capture</td> + <td>Chrome for Android (0.16)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>checked</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>disabled</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}<sup>[25]</sup></td> + <td>6</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>form</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formenctype</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>5.0<sup>[12]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>9.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.2</td> + </tr> + <tr> + <td>height</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>incremental</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>inputmode</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>list</td> + <td>20.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>max</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>min</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>40.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>1.0<sup>[13]</sup></td> + <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[14]</sup><br> + {{CompatVersionUnknown}}<sup>[15]</sup></td> + <td>10</td> + <td>1.0<br> + 10.62<sup>[14]</sup><br> + 11.01<sup>[15]</sup></td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>5.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>11.00</td> + <td>5.0</td> + </tr> + <tr> + <td>readonly</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[16] </sup></td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>required</td> + <td>5.0<br> + 10<sup>[17]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>10</td> + <td>9.6</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>size</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>spellcheck</td> + <td>10.0</td> + <td>{{CompatGeckoDesktop("1.9.2")}}</td> + <td>10</td> + <td>11.0</td> + <td>4.0</td> + </tr> + <tr> + <td>src</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>2</td> + <td>1.0</td> + <td>1.0</td> + </tr> + <tr> + <td>step</td> + <td>6.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>10</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>tabindex</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>6<sup>[18]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>webkitdirectory</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=button</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=checkbox</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=color</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>type=date</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>5.0<sup>[23]</sup></td> + </tr> + <tr> + <td>type=datetime</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=datetime-local</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=email</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.1<sup>[19]</sup></td> + </tr> + <tr> + <td>type=file</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[27]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[21]</sup></td> + </tr> + <tr> + <td>type=hidden</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=image</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=month</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=number</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0<sup>[19]</sup></td> + </tr> + <tr> + <td>type=password</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> + </tr> + <tr> + <td>type=radio</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=range</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.0</td> + </tr> + <tr> + <td>type=reset</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=search</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>4.0<sup>[22]</sup></td> + </tr> + <tr> + <td>type=submit</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>type=tel</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1<sup>[22]</sup></td> + </tr> + <tr> + <td>type=text</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[27]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[22]</sup></td> + </tr> + <tr> + <td>type=time</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}<sup>[23]</sup></td> + </tr> + <tr> + <td>type=url</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>3.1<sup>[19]</sup></td> + </tr> + <tr> + <td>type=week</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10.62</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>accept=[MIME type]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=audio/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=image/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}<sup>[26]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=video/*</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accept=[. + ext]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>accesskey</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>autocomplete</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>autofocus</td> + <td>3.2</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>capture</td> + <td>3.0</td> + <td>{{CompatGeckoMobile("10.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>6.0</td> + </tr> + <tr> + <td>checked</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>disabled</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>form</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formaction</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formenctype</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formmethod</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>formnovalidate</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>formtarget</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>5.0</td> + </tr> + <tr> + <td>height</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>list</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>max</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>maxlength</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>min</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>minlength</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>27.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>multiple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>name</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + <tr> + <td>pattern</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>placeholder</td> + <td>2.3</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.10</td> + <td>4</td> + </tr> + <tr> + <td>readonly</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>required</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>size</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>spellcheck</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11.0</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>src</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>step</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}<sup>[20]</sup></td> + <td>{{CompatUnknown}}</td> + <td>10.62</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>tabindex</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>webkitdirectory</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("49.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>width</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("16.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Fue implementado en la versión 2 o inferior.</p> + +<p>[2] Implementado para valor <code>indeterminate</code>.</p> + +<p>[3] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p> + +<p>[4] Es reconocido, pero no tiene UI.</p> + +<p>[5] Gecko 2.0 {{geckoRelease("2.0")}} solo envía las coordenadas X e Y cuando se presiona, sin enviar nombre/valor del elemento.</p> + +<p>[6] Esta característica todavía no está implementada. Véase {{bug("888320")}}.</p> + +<p>[7] Regionalización en Chrome 11.</p> + +<p>[8] Opera 11.01 añadió soporte para un valor predeterminado.</p> + +<p>[9] Filtros para estas extensiones de archivo de audio: .aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg, .ra, .ram, .snd, .wav, .wma.</p> + +<p>[10] Filtros para estas extensiones de archivo de video: .avi, .divx, .flv, .m4v, .mkv, .mov, .mp4, .mpeg, .mpg, .ogm, .ogv, .ogx, .rm, .rmvb, .smil, .webm, .wmv, .xvid</p> + +<p>[11] Filtros para estas extensiones de archivo de imagen: .jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw</p> + +<p>[12] En 6.0 solo funciona con el tipo de documento HTML5, el soporte para validación en 7.0 fue deshabilitado, y rehabilitado en 10.0.</p> + +<p>[13] Soportado para <code>type="file"</code> y <code>type="email"</code> desde la versión 5.0.</p> + +<p>[14] Soportado para <code>type="file"</code>.</p> + +<p>[15] Supported for <code>type="email"</code>.</p> + +<p>[16] No está presente para <code>type="checkbox"</code> y <code>type="radio"</code>.</p> + +<p>[17] Soportado para el elemento {{HTMLElement("select")}}.</p> + +<p>[18] Elementos con <code>tabindex</code> > <code>0</code> no son navegables.</p> + +<p>[19] Sin validación, pero provee un teclado específico. Safari Mobile para iOS aplica un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code><input></code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p> + +<p>[20] La interfaz podría permanecer sin implementarse.</p> + +<p>[21] <a href="http://blog.uploadcare.com/post/97884147203/you-cannot-upload-files-to-a-server-using-mobile-safari">La carga de archivos no funcionaba</a> en Mobile Safari para iOS 8.0 y 8.0.1. Este bug fue corregido en iOs 8.0.2.</p> + +<p>[22] Safari Mobile para iOS aplicaba un estilo predeterminado de <code>{{cssxref("opacity")}}: 0.4</code> para deshabilitar los elementos <code><input></code> textuales. Los demás navegadores mayores no comparten este estilo particular actualmente.</p> + +<p>[23] En Safari Mobile para iOS, la configuración <code>{{cssxref("display")}}: block</code> en un <code><input></code> con <code>type="date"</code>, <code>type="time"</code>, <code>type="datetime"</code>, <code>type="datetime-local"</code>, o <code>type="month"</code> causa que el texto dentro del <code><input></code> se desalinee verticalmente. Véase {{webkitbug("139848")}}.</p> + +<p>[24] Desde Chrome 39, un <code><input></code> con <code>type="date"</code> estilizado con <code>{{cssxref("display")}}: table-cell; {{cssxref("width")}}: 100%;</code> tendrá un valor para {{cssxref("min-width")}} impuesto por Chrome, y no puede reducirse a un valor inferior a esa anchura mínima. Véase <a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium bug #346051</a>.</p> + +<p>[25] De forma predeterminada, Firefox, a diferencia de otros navegadores, <a href="http://stackoverflow.com/q/5985839/432681">persistirá el estado de deshabilitado dinámico y (si aplica), la selección de elementos dinámica</a> de un <code><input></code> a través de las cargas de páginas. Estableciedo el valor del atributo {{htmlattrxref("autocomplete","input")}} como <code>off</code> deshabilita esta característica. Esto funciona aun cuando el atributo {{htmlattrxref("autocomplete","input")}} no aplicaría normalmente al <code><input></code> debido a su atributo {{htmlattrxref("type","input")}}. Véase {{bug(654072)}}.</p> + +<p>[26] A partir de Gecko 9.0 {{geckoRelease("9.0")}}, Firefox para Android permite capturar imágenes usando la cámara para posteriormente cargarlas, sin necesidad de dejar el navegador. Los desarrolladores Web pueden implementar estar característica simplemente estableciendo el valor del atributo <code>accept</code> como <code>image/*</code> en el elemento <code><input></code> con <code>type="file"</code>.</p> + +<p>[27] Firefox para Android establece un gradiente predeterminado en {{cssxref("background-image")}} para todos los inputs con <code>type="file"</code>. Esto puede ser deshabilitado usando <code>background-image: none;</code>. También establece un valor para {{cssxref("border")}} en los mismos.</p> + +<p>[28] Previo a Firefox 51, <code>selectionStart</code> y <code>selectionEnd</code> devolvían <code>0</code> cuando no había selección. Ahora devuelven correctamente la separación del caracter siguiente a la posición actual del cursor, donde se insertará el siguiente caracter.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>Otros elementos relacionados con formularios: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li> + <li><a class="external" href="http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text">Cross-browser HTML5 placeholder text</a></li> +</ul> diff --git a/files/es/web/html/element/input/number/index.html b/files/es/web/html/element/input/number/index.html new file mode 100644 index 0000000000..102e540f7e --- /dev/null +++ b/files/es/web/html/element/input/number/index.html @@ -0,0 +1,450 @@ +--- +title: <input type="number"> +slug: Web/HTML/Elemento/input/number +tags: + - Elemento + - Elemento de entrada + - Formulários HTML + - HTML + - Número + - Referencia + - Tipo de entrada + - formulários +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Elementos {{HTMLElement("input")}} del tipo <strong><code>number</code></strong> son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas.</span> El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o símplemente pulsando con la punta del dedo.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<p>En navegadores que no soportan entradas de tipo <code>number</code>, una entrada <code>number</code> recurre al tipo <code>text</code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{jsxref("Number")}} representando un número, o vacío.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} e {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes que soporta</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Valor">Valor</h2> + +<p>Un {{jsxref("Number")}} representando el valor del número ingresado en la entrada. Tú puedes colocar el valor por omisión para la entrada incluyendo un número dentro del atributo {{htmlattrxref("value", "input")}}, de esta manera:</p> + +<pre class="brush: html"><input id="number" type="number" value="42"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos comúnmente soportados por todos los tipos de {{HTMLElement("input")}}, las entradas de tipo <code>number</code> soportan estos atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El <code>id</code> del elemento {{HTMLElement("datalist")}} que contiene las opciones predefinidas de autocompletado.</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>El valor máximo a aceptar para esta entrada</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>El valor mínimo a aceptar para esta entrada</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar dentro del campo cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo Booleano indicando si el valor es de solo lectura</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>El intervalo de paso a usar cuando se usen las flechas arriba y abajo para ajustar el valor, así como para su validación</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>El valor máximo a aceptar para esta entrada. Si el {{htmlattrxref("value", "input")}} ingresado en el elemento excede éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si el valor del atributo <code>max</code> no es un número, entonces el elemento no tiene un valor máximo.</p> + +<p>Este valor debe ser mayor que o igual al valor del atributo <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>El valor mínimo a aceptap para esta entrada. Si el {{htmlattrxref("value", "input")}} del elemento es menor que éste, el elemento falla la <a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Validacion_de_restricciones">validación de restricciones</a>. Si un valor es especificado para <code>min</code> que no sea un número valido, la entrada no tiene un valor mínimo.</p> + +<p>Este valor debe ser menor que o igual al valor del atributo <code>max</code>.</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<p>El atributo <code>step</code> es un número que especifica la granularidad a la que debe adherirse el valor, o el valor especial <code>any</code>, el cual es descrito abajo. Solo valores que sean iguales a la base del escalonado (<code>{{anch("min")}}</code> si es especificado, si no {{htmlattrxref("value", "input")}}, y un valor por omisión apropiado si ninguno de esos es provisto) son válidos.</p> + +<p>Una valor de cadena <code>any</code> significa que ningún escalonado es implicado, y cualquier valor es permitido (salvo otras restricciones, tales como <code>{{anch("min")}}</code> y <code>{{anch("max")}}</code>).</p> + +<div class="note"> +<p><strong>Nota:</strong> Cuando los datos ingresados por el usuario no se adhieran a la configuración de escalonado, el {{Glossary("user agent")}} puede redondear al valor válido más cercano, prefiriendo numeros en la dirección positiva cuando hayan dos opciones igualmente cercanas.</p> +</div> +</div> + +<p>El valor por omisión de paso para entradas <code>number</code> es <code>1</code>, permitiendo solo enteros ser ingresados—<em>a menos que</em> la base del escalonado no sea un entero.</p> + +<h2 id="Usar_entradas_numéricas">Usar entradas numéricas</h2> + +<p>Elementos <code><input type="number"></code> pueden ayudar a simplificar tu trabajo al construir la interfaz de usuario y la lógica para ingresar números en un formulario. Cuando creas una entrada numérica con el valor apropiado para <code>type</code>, <code>number</code>, obtienes validación automática para que el texto sea un número, y usualmente un juego de botones arriba y abajo para subir y bajar el valor.</p> + +<div class="warning"> +<p><strong>Importante</strong>: Ten en mente que, lógicamente, no deberías poder ingresar otros caracteres que no sean números dentro de una entrada numérica. Parece haber algo de desacuerdo acerca de esto entre navegadores; ver {{bug(1398528)}}.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Es crucial recordar que un usuario puede jugar con tu HTML tras bambalinas, así que tu sitio<em> no debe</em> usar validación simple del lado del cliente para ningún fin de seguridad. Tú <em>debes</em> verificar en el lado del servidor cualquier transacción en la cual el valor provisto pueda tener alguna implicación de seguridad de cualquier tipo.</p> +</div> + +<p>Los navegadores de móviles ayudan más con la experiencia de usuario mostrando un teclado especial mejor adaptado para ingresar números cuando el usuario intente ingresar un valor. La siguiente captura de pantalla es tomada de Firefox para Android:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Una_entrada_numérica_simple">Una entrada numérica simple</h3> + +<p>En su forma más básica, una entrada numérica puede ser implementada así:</p> + +<pre class="brush: html"><label for="ticketNum">Number of tickets you would like to buy:</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> + +<p>Una entrada numérica es considerada válida cuando está vacía y cuando un único número es ingresado, pero por lo demás es inválida. Si el atributo xxxx es usado, la entrada ya no es considerada válida cuando esté vacía.</p> + +<div class="note"> +<p><strong>Nota</strong>: Cualquier número es un valor aceptable, mientras que sea un <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">número de punto flotante válido</a> (eso es, no <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> o <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity">Infinity</a>).</p> +</div> + +<h3 id="Marcas_de_lugar_Placeholders">Marcas de lugar (Placeholders)</h3> + +<p>Algunas veces es de ayuda ofrecer una indicación en contexto en cuanto a qué forma deben tomar los datos de entrada. Esto puede ser especialmente importante si el diseño de la página no ofrece etiquetas descriptivas para cada {{HTMLElement("input")}}. Es aquí donde entran las <strong>marcas de lugar</strong>. Una marca de lugar es un valor comúnmente usado para proveer un indicio en cuanto al formato que la entrada debe tomar por <code>value</code>. Este es mostrado dentro de la caja de edición cuando el <code>value</code> del elemento es <code>""</code>. Una vez que los datos son ingresados dentro de la caja, la marca de lugar desaparece; si la caja es vaciada, la marca de lugar reaparece.</p> + +<p>Aquí, tenemos una entrada <code>number</code> con la marca de lugar "<code>Multiple of 10</code>". Nota cómo la marca de lugar desaparece y reaparece conforme manipulas el contenido del campo de edición.</p> + +<pre class="brush: html"><input type="number" placeholder="Multiple of 10"></pre> + +<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> + +<h3 id="Controlar_el_tamaño_del_escalón">Controlar el tamaño del escalón</h3> + +<p>Por omisión, los botones arriba y abajo provistos para que pases el número de arriba a abajo pasarán por 1 el valor arriba y abajo. Puedes cambiar esto proveyendo un atributo {{htmlattrxref("step", "input")}}, el cual toma como valor un número que especifica la cantidad de escalones. Nuestro ejemplo arriba contiene una marca de lugar diciendo que el valor debe ser un múltiplo de 10, por lo tanto tiene sentido agregar un valor a <code>step</code> de <code>10</code>:</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10"></pre> + +<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> + +<p>En este ejemplo, debes hallar que las flechas de subir y bajar escalón incrementan y decrementan el valor por 10 cada vez, y no por 1. Aún puedes ingresar manualmente un número que no sea múltiplo de 10, pero este será considerado inválido.</p> + +<h3 id="Especificar_valores_máximo_y_mínimo">Especificar valores máximo y mínimo</h3> + +<p>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para especificar un valor mínimo y máximo que pueda tener el campo. Por ejemplo, demos a nuestro ejemplo un mínimo de <code>0</code>, y un máximo de <code>100</code>:</p> + +<pre class="brush: html"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> + +<p>En esta versión actualizada, debes hallar que los botones para subir y bajar escalón no te permitirán ir bajo 0 o sobre 100. Tú aún puedes ingresar manualmente un número fuera de estos límites, pero este será considerado inválido.</p> + +<h3 id="Permitir_valores_decimales">Permitir valores decimales</h3> + +<p>Un problema con las entradas numéricas es que su tamaño de escalón por omisión es 1. Si tratas de ingresar un número con un decimal (tal como "1.0"), este será considerado como inválido. Si quieres ingresar un valor que requiere decimales, necesitarás reflejar esto en el valor <code>step</code> (p.ej. <code>step="0.01"</code> para permitir hasta dos dígitos en la parte decimal). Aquí hay un ejemplo simple:</p> + +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> + +<p>Note que este ejemplo permite cualquier valor entre <code>0.0</code> y <code>10.0</code>, con decimales a dos cifras. Por ejemplo, "9.52" es válido, pero "9.521" no lo es.</p> + +<h3 id="Controlar_el_tamaño_de_la_entrada">Controlar el tamaño de la entrada</h3> + +<p>Los elementos {{HTMLElement("input")}} de tipo <code>number</code> no soportan atributos de dimensión tales como {{htmlattrxref("size", "input")}}. Necesitarás recurrir a <a href="/en-US/docs/Web/CSS">CSS</a> para cambiar el tamaño de estos controles.</p> + +<p>Por ejemplo, para ajustar el ancho de la entrada para que sea tan ancho como se necesita para ingresar un número de tres dígitos, podemos cambiar nuestro HTML para incluir un xxxx y acortar nuestra marca de lugar (placeholder) ya que el campo estará demasiado angosto para el texto que hemos estado usando hasta ahora:</p> + +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>Entonces agregamos algo de CSS para reducir el ancho del elemento con el selector de <code>id</code>, <code>#number</code>:</p> + +<pre class="brush: css">#number { + width: 3em; +}</pre> + +<p>El resultado se ve así:</p> + +<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p> + +<h3 id="Ofrecer_valores_sugeridos">Ofrecer valores sugeridos</h3> + +<p>Tú puedes proveer una lista de las opciones por defecto de las cuales el usuario puede seleccionar especificando el atributo {{htmlattrxref("list", "input")}}, el cual contiene como su valor el {{htmlattrxref("id")}} de un {{HTMLElement("datalist")}}, el cual a su vez contiene un elemento {{HTMLElement("option")}} por valor sugerido. El <code>value</code> de cada <code>option</code> es el valor sugerido correspondiente para la caja de entrada numérica.</p> + +<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<div class="note"> +<p>El uso del atributo {{htmlattrxref("list", "input")}} con entradas <code>number</code> no está soportado en todos los navegadores. Funciona en Chrome y Opera, por ejemplo, pero no en Firefox.</p> +</div> + +<h2 id="Validación">Validación</h2> + +<p>Ya hemos mencionado una serie de características de validación para entradas <code>number</code>, pero revisémoslas ahora:</p> + +<ul> + <li>Elementos <code><input type="number"></code> automáticamente invalidan cualquier entrada que no sea un número (o vacío, a menos que se especifique <code>required</code> ).</li> + <li>Puedes usar el atributo {{htmlattrxref("required", "input")}} para invalidar una entrada vacía. (En otras palabras, la entrada <em>debe</em> ser llenada).</li> + <li>Puedes usar el atributo {{htmlattrxref("step", "input")}} para restringir valores válidos a cierto conjunto de escalones (p.ej. múltiplos de 10).</li> + <li>Puedes usar los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} para restringir los límites inferior y superior de los valores válidos.</li> +</ul> + +<p>El siguiente ejemplo presenta todas las características anteriores, así como el uso de CSS para mostrar íconos de validez o invalidez, dependiendo del valor del <code>input</code>:</p> + +<pre class="brush: html"><form> + <div> + <label for="balloons">Number of balloons to order (multiples of 10):</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<p>Intenta enviar el formulario con diferentes valores inválidos ingresados — p.ej., siv valor; un valor abajo de 0 o arriba de 100; un valor que no sea múltiplo de 10; o un valor no numérico — y mira cómo los mensajes de error que te da el navegador difieren con estos.</p> + +<p>El CSS aplicado a este ejemplo es el siguiente:</p> + +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Aquí utilizamos las pseudo clases {{cssxref(":invalid")}} y {{cssxref(":valid")}} para mostrar un ícono apropiado de invalidez o validez como contenido generado en el elemento adyacente {{htmlelement("span")}}, como un indicador visual.</p> + +<p>Lo colocamos en un elemento separado <code><span></code> para mayor flexibilidad. Algunos navegadores no muestran contenido generado muy eficientemente en algunos tipos o entradas de formulario. (Lee, por ejemplo, la sección sobre <a href="/es/docs/Web/HTML/Element/input/date#Validation">validación de <code><input type="date"></code></a>).</p> + +<div class="warning"> +<p><strong>Importante</strong>: ¡La validación de formularios HTML <em>no</em> es un substituto de scripts del lado del servidor que asegure que los datos estén en el formato apropiado!</p> + +<p>Es demasiado fácil para alguien hacer ajustes al HTML que le prmita evitar la validación, o removerla completamente. También es posible para alguien evadir tu HTML y enviar los datos directamente a tu servidor.</p> + +<p>Si tu código del lado del servidor falla el validar los datos que recibe, el desastre podría azotar cuando datos que no están formateados apropiadamente sean enviados (o cuando los datos son demasiado grandes, o son del tipo incorrecto, y así sucesivamente).</p> +</div> + +<h3 id="Validación_de_patron">Validación de patron</h3> + +<p>Elementos <code><input type="number"></code> no soportan el uso del atributo {{htmlattrxref("pattern", "input")}} para hacer que los valores ingresados se ajusten a un patrón de expresión regular específico.</p> + +<p>La fundamentación para esto es que las entradas numéricas no serán válidas si contienen cualquier cosa excepto números, y tú puedes restringir el número mínimo y máximo de dígitos válidos usando los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max", "input")}} (a como se explica arriba).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Ya hemos cubierto el hecho de que por defecto, el incremento es <code>1</code>, y tú puedes usar el atributo {{htmlattrxref("step", "input")}} para permitir entradas decimales. Echemos un vistazo más de cerca.</p> + +<p>En el siguiente ejemplo hay un formulario para ingresar la estatura del usuario. Por defecto acepta la estatura en metros, pero puedes hacer click en el botón apropiado para cambiar el formulario a que acepte pies y pulgadas. La entrada para la estatura en metros acepta decimales a dos posiciones.</p> + +<p>{{EmbedLiveSample("Examples", 600, 100)}}</p> + +<p>El HTML se ve así:</p> + +<pre class="brush: html"><form> + <div class="metersInputGroup"> + <label for="meters">Enter your height — meters:</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>Enter your height — </span> + <label for="feet">feet:</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches:</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Enter height in feet and inches"> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>Verás que estamos usando muchos de los atributos que ya hemos visto antes en el artículo. Como queremos que acepte un valor de medida en centímetros, hemos colocado el valor de <code>step</code> a <code>0.01</code>, de manera que valores como <em>1.78</em> no sean vistos como inválidos. También hemos provisto una marca de lugar (placeholder) para esa entrada.</p> + +<p>Hemos escondido las entradas de pies y pulgadas inicialmente usando <code>style="display: none;"</code>, de manera que metros sea el tipo de entrada preseleccionado.</p> + +<p>Ahora, al CSS. Este se ve muy similar al estilo de validación que vimos antes; nada extraordinario aquí.</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Y finalmente, el JavaScript:</p> + +<pre class="brush: js">let metersInputGroup = document.querySelector('.metersInputGroup') +let feetInputGroup = document.querySelector('.feetInputGroup') +let metersInput = document.querySelector('#meters') +let feetInput = document.querySelector('#feet') +let inchesInput = document.querySelector('#inches') +let switchBtn = document.querySelector('input[type="button"]') + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet') + switchBtn.value = 'Enter height in meters' + + metersInputGroup.style.display = 'none' + feetInputGroup.style.display = 'block' + + feetInput.setAttribute('required', '') + inchesInput.setAttribute('required', '') + metersInput.removeAttribute('required') + + metersInput.value = '' + } else { + switchBtn.setAttribute('class', 'meters') + switchBtn.value = 'Enter height in feet and inches' + + metersInputGroup.style.display = 'block' + feetInputGroup.style.display = 'none' + + feetInput.removeAttribute('required') + inchesInput.removeAttribute('required') + metersInput.setAttribute('required', '') + + feetInput.value = '' + inchesInput.value = '' + } +});</pre> + +<p>Después de declarar unas pocas variables, un manejador de eventos s agredgado al <code>button</code> para controlar el mecanismo interruptor. Esto es bastante simple, principalmente involucra cambiar las {{HTMLElement("label")}} y <code>class</code> del botón, y actualizar los valores de muestra de los dos conjuntos de entradas cuando el botón sea presionado.</p> + +<p>(Nota que aquí no estamos convirtiendo de aquí para allá entre metros y pies/pulgadas, lo que probablemente haría una aplicación web en la vida real.)</p> + +<div class="note"> +<p><strong>Nota:</strong> Cuando el usuario haga click en el botón, el(los) atributo(s) <code>required</code> de la(s) entradas que estemos ocultando son removidos, y vaciará el <code>value</code> del(los) atributo(s). Esto es de manera que el formulario pueda ser enviado si ambos conjuntos de entradas no están llenas. También asegura que el formulario no enviará datos que el usuario no quiera.</p> + +<p>¡Si no hicieras eso, tendrías que llenar ambos pies/pulgadas <strong>y</strong> metros para enviar el formulario!</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Learn/HTML/Forms">Guía de formularios HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/es/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><a href="/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibilidad de propiedades CSS</a></li> +</ul> diff --git a/files/es/web/html/element/input/password/index.html b/files/es/web/html/element/input/password/index.html new file mode 100644 index 0000000000..2fd6cd5cb2 --- /dev/null +++ b/files/es/web/html/element/input/password/index.html @@ -0,0 +1,132 @@ +--- +title: <input type="password"> +slug: Web/HTML/Elemento/input/password +tags: + - Element + - HTML + - Reference +translation_of: Web/HTML/Element/input/password +--- +<p> </p> + +<p>{{HTMLRef}}</p> + +<p>Los elementos <code><input></code> de tipo <strong><code>"password"</code></strong> proporcionan una forma para que el usuario ingrese una contraseña de forma segura. El elemento se presenta como un control de editor de texto, sin formato, de una línea, en el que el texto está oculto para que no pueda leerse, generalmente reemplazando cada carácter con un símbolo como el asterisco ("*") o un punto ("•"). Este carácter variará dependiendo del {{Glossary("user agent")}} y del {{Glossary("OS")}}.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Content categories</a></th> + <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>, listado, tabla enviable, reseteable, elementos de forma asociada, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, elementos etiquetables, contenido palpable.</td> + </tr> + <tr> + <th scope="row">Contenido permitido</th> + <td>Ninguno, es un {{Glossary("empty element")}}.</td> + </tr> + <tr> + <th scope="row">Omisión de etiquetas</th> + <td>Tiene que tener una etiqueta al inicio y no tener una etiqueta final.</td> + </tr> + <tr> + <th scope="row">Elementos de parentescos</th> + <td>Cualquier elemento que accepta <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> + </tr> + <tr> + <th scope="row">Interfaz DOM</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributos">Atributos</h2> + +<p>Además de los atributos listados abajo, este elemento puede tener cualquier <a href="/en-US/docs/HTML/Global_attributes">global attributes</a>.</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}{{HTMLVersionInline("5")}}</dt> + <dd>Establece el valor del atributo de autocompletado en el campo de una contraseña. En caso de ser cierto, automaticamente se rellena con el valor previamente almacenado.</dd> + <dt>{{htmlattrdef("autofocus")}}{{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano te permite especificar que la página ponga el foco en un campo a menos que el usuario lo revoque, por ejemplo, escribir en un campo diferente. Solo un elemento en el documento puede tener el atributo Booleano <strong>autofocus</strong>.</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>Este atributo Booleano indica que el campo de la contraseña no está disponible. Además, deshabilita los valores que no son enviados por el campo.</p> + </dd> + <dt>{{htmlattrdef("defaultvalue")}}</dt> + <dd>Define un valor predeterminado en el campo de la contraseña.</dd> + <dt>{{htmlattrdef("inputmode")}} {{HTMLVersionInline("5")}}</dt> + <dd>Le da proporciona información al buscador sobre que teclado mostrar. Los valores posibles son: + <ul> + <li><code>verbatim</code>: Alfanumérico, contenido no verbla tales como usuarios y contraseñas.</li> + <li><code>latin</code>: Introducción de texto en el lenguaje preferido del usuario con ayudas de escritura, como predicción de texto. Se usa para comunicación de usuario a ordenador en, por ejemplo, campos de búsqueda.</li> + <li><code>latin-name</code>: Como <em>latin</em>, pero para nombres de personas.</li> + <li><code>latin-prose</code>: Como <em>latin</em>, pero con unas ayudas de escritura más activas. Para comunicación de usuario a usuario como por ejemplo, mensajería instantanea o emails.</li> + <li><code>full-width-latin</code>: Como <em>latin-prose</em>, pero para lenguajes secundarios del usuario.</li> + <li><code>kana</code>: Entrada de texto Kana o romaji, normalmente entrada hiragana, usa carácteres con ancho completo, con soporte para converstirse a kanji. Establecido para la entrada de texto Japonés.</li> + <li><code>katakana</code>: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.</li> + </ul> + </dd> + <dt>{{htmlattrdef("maxlength")}}</dt> + <dd>Establece el valor del atributo maxlength en el campo de una contraseña.</dd> + <dt>{{htmlattrdef("minlength")}}</dt> + <dd>Establece el valor del atributo minlength en el campo de una contraseña.</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>Nombre del campo, usado para datos enviados desde formulario.</dd> + <dt>{{htmlattrdef("pattern")}}{{HTMLVersionInline("5")}}</dt> + <dd> Establece el valor del atributo pattern del campo de una contraseña.</dd> + <dt>{{htmlattrdef("placeholder")}}{{HTMLVersionInline("5")}}</dt> + <dd>Establece el valor del atributo placeholder del campo de una contraseña.</dd> + <dt>{{htmlattrdef("readonly")}}</dt> + <dd>Este atributo Booleano indica que el usuario no puede modificar el valor del campo de una contraseña.</dd> + <dt>{{htmlattrdef("required")}}{{HTMLVersionInline("5")}}</dt> + <dd>Este atributo Booleano especifica que el usuario debe rellenar con un valor antes de enviar un formulario.</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>Establece el valor del atributo size del campo de una contraseña.</dd> + <dt> </dt> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Para crear un widget que muestre una constraseña, use:</p> + +<pre class="brush: html"><input type="password"></pre> + +<p>Para crear un widget que muestre una contraseña con un patrón o diseño, use:</p> + +<pre class="brush: html"><input type="password" pattern=".{6,}"></pre> + +<p>El ejemplo de arriba creará un elemento password que deberá contener 6 o más carácteres.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'the-input-element.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Fix me:</strong> Insert Browser Compatibility table here.</p> +</div> + +<h2 id="sect1"> </h2> diff --git a/files/es/web/html/element/input/range/index.html b/files/es/web/html/element/input/range/index.html new file mode 100644 index 0000000000..e0cf92d55a --- /dev/null +++ b/files/es/web/html/element/input/range/index.html @@ -0,0 +1,416 @@ +--- +title: <input type="range"> +slug: Web/HTML/Elemento/input/range +tags: + - Elementos + - Formulários HTML + - HTML etiqueta input + - Input + - Range + - Rango + - Referencia + - Web + - deslizador + - formulários + - slider +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">El elemento {{HTMLElement("input")}} del tipo <code><strong>"range"</strong></code> permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo. El valor exacto, sin embargo, no se considera importante. Se repesenta típicamente como un "tirador" o un control deslizante en lugar de un campo de texto como otros tipos de {{HTMLElement("input")}}.</span> Como este tipo de widget es bastante inmpreciso, no debe utilizarse normalmente a menos que el valor exacto del control no sea importante.</p> + +<div id="summary_sample1"> +<pre class="brush: html"><input type="range"></pre> +</div> + +<p>{{EmbedLiveSample("summary_sample1", 600, 40)}}</p> + +<p>Si el navegador del usuario no soporta el tipo <code>"range"</code>, será tratado como un input de tipo <code><a href="/en-US/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{domxref("DOMString")}} que contiene la cadena que representa el valor numérico seleccionado; use {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} to get the value as a {{jsxref("Number")}}.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} e {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes soportados</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} y {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>Atributos IDL </strong></td> + <td><code>list</code>, <code>value</code> y <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Metodos</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} y {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">Value</h2> + +<p>El atributo {{htmlattrxref("value", "input")}} contiene un {{domxref("DOMString")}} que es la representación de tipo cadena del número seleccionado. El valor nunca es una cadena vacía (<code>""</code>). El valor por defecto es el punto intermedio entre los valores mínimo y máximo especificados, a menos que el valor máximo sea menor que el valor mínimo, en cuyo caso el valor por defecto será el valor del atributo <code>min</code>. El algoritmo de determina el valor por defecto es:</p> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p><span id="result_box" lang="es"><span>Si se intenta establecer un valor inferior al mínimo definido, el valor será igual al mínimo.</span> <span>De manera similar, un intento de establecer un valor superior al máximo da como resultado el valor máximo.</span></span></p> + +<h2 id="Usando_inputs_range">Usando inputs range</h2> + +<p>El input de tipo <code>"number"</code> permite al usuario introducir un número y, opcionalmente, forzarle a que dicho valor se encuentre entre un mínimo y un máximo, pero le obliga a introducir un valor específico. El input de tipo <code>"range"</code> pide al usuario que indique el valor en un rango numérico sin que tenga que preocuparse qué valor numérico específico está seleccionado.</p> + +<p>Los ejemplos títpicos de situaciones en las que se pueden usar inputs de tipo rango suelen ser:</p> + +<ul> + <li>Controles de audio (volumen o balance) o controles de filtro.</li> + <li>Configuración de color, como canales, transparencia, brillo, etc.</li> + <li>Controles de configuración de juegos, como dificultad, distancia de visibilidad, tamaño del nunodGame configuration controls such as difficulty, visibility distance, world size, etc.</li> + <li>Longitud de contraseñas para un gestor de contraseñas generadas.</li> +</ul> + +<p>Como regla general, si el usuario está más interesado en la distancia entre un mínimo y un máximo más que en el propio valor en sí mismo, el input de tipo rango es el candidato perfecto. Por ejemplo, en el caso del control del volumen de un equipo estéreo, el usuario normalmente piensa "pon el volumen a la midad" en lugar de "pon el volumen al 0,5".</p> + +<h3 id="Especificar_los_valores_mínimo_y_máximo">Especificar los valores mínimo y máximo</h3> + +<p>Por defecto, el valor mínimo es 0 y el máximo es 100. Si es necesario modificar dichos valores, podemos usar los atributos {{htmlattrxref("min", "input")}} y/o {{htmlattrxref("max", "input")}}. Podemos usar cualquier valor de coma flotante.</p> + +<p>Por ejemplo, para usar un rango entre -10 y 10, usaremos:</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Definir_el_tamaño_de_los_saltos">Definir el tamaño de los saltos</h3> + +<p>Por defecto, cada salto tiene valor 1, es decir el valor será siempre un número entero. Podemos cambiarlo mediante el atributo {{htmlattrxref("step")}}. Si necesitas, por ejemplo, un valor entre 5 y 10 con una precisión de dos decimales, debes indicar que el valor de <code>step</code> es 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p><span id="result_box" lang="es"><span>Si quieres aceptar cualquier valor independientemente de la cantidad de decimales, puede especificar un valor de </span></span><code>"any"</code> al atrtibuto {{htmlattrxref("step", "input")}}:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>En el ejemplo, permitimos al usuario seleccionar cualquier valor entre 0 y π sin restricciones en la parte decimal del número seleccionado.</p> +</div> + +<h3 id="Añadir_marcas_y_etiquetas">Añadir marcas y etiquetas</h3> + +<p>La especificación HTML permite a los navegadores cierta flexibilidad sobre cómo presentar el control range. En ningún sitio es más notoria dicha flexibilidad como a la hora de representar las marcas y las etiquetas de un rango. La especificación describe cómo añadir puntos personalizados al control range usando el atributo {{htmlattrxref("list", "input")}} y el elemento {{HTMLElement("datalist")}}, pero no hay requisitos o recomendaciones de estandarizar las marcas a lo largo del control.</p> + +<h4 id="Mockups_del_control_range">Mockups del control range</h4> + +<p>Como los navegadores tienen esta flexibilidad, y hasta la fecha ninguno admite todas las funciones que HTML define para los controles range, a continuación mostramos algunas maquetas que permiten conocer lo que puede visualizarse en macOS en un navegador que las admita.</p> + +<h5 id="El_control_rango_sin_adornos">El control rango sin adornos</h5> + +<p>Cuando no especificas un atributo {{htmlattrxref("list", "input")}} al input range, un navegador que lo soporte mostrará lo siguie.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range"></pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas">Un control rango con marcas</h5> + +<p>El siguiente rango utiliza el atributo <code>list</code> (al cual le especificamos el ID del elemento {{HTMLElement("datalist")}}) para definir la serie de marcas del rango. Hay once marcas, cada una de ellas mide un 10%, representadas por el {{htmlattrxref("value", "option")}} de cada elemento {{HTMLElement("option")}}.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_control_rango_con_marcas_y_etiquetas">Un control rango con marcas y etiquetas</h5> + +<p>Puedes añadir etiquetas a tu control range usando el atributo {{htmlattrxref("label", "option")}} al elemento {{HTMLElement("option")}} correspondiente a cada marca que desees etiquetar.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Captura de pantalla</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"> + <option value="10"> + <option value="20"> + <option value="30"> + <option value="40"> + <option value="50" label="50%"> + <option value="60"> + <option value="70"> + <option value="80"> + <option value="90"> + <option value="100" label="100%"> +</datalist> +</pre> + </td> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.</p> +</div> + +<h3 id="Cambiar_la_orientación">Cambiar la orientación</h3> + +<div class="hidden"> +<p>Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS</p> + +<div class="note"> +<p><strong>Nota</strong>: Esto aún no está implementado por los principales navegadores. This is not actually implemented yet by any of the major browsers. See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>.</p> +</div> + +<p>Si tenemos el siguiente control range:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>Dicho control se muestra en horizontal (al menos en los principales navegadores, o otros puede variar). Presentarlo en vertical es tan simple como añadir CSS para cambiar las dimensiones del control, de la siguiente manera:</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<p><strong>En la actualidad, ninguno de los navegadores principales soporta la creación de inputs range usando este CSS, incluso a perar de que la especificación recomienda que lo hagan.</strong></p> +</div> +</div> + +<p>La especificación HTML recomienda que los navegadores cambien la orientación del range si el ancho especificado es menor que el alto. Desafortunadamente, ninguno de los principales navegadores soportar controles range verticales directamente. Para conseguir un range vertical, la forma más fácil es usar CSS, aplicando {{cssxref("transform")}} para rotar el elemento y mostrarlo en vertical. Veamos cómo.</p> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<p>El HTML necesita que el elemento {{HTMLElement("input")}} esté dentro de un elemento {{HTMLElement("div")}} :</p> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Ahora necesitamos un poco de CSS. Primero escribimos el CSS del div contenedor; especificamos el modo de display y el tamaño que queremos que tenga, reservando un área en la página para el "slider" que vamos a rotar.</p> + +<pre class="brush: css">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> +Después ponemos la información para el elemento <code><input></code>: + +<pre class="brush: css">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>El tamaño del range es 150 pixeles de ancho por 20 pixeles de alto. Ponemos los márgenes a 0 y con {{cssxref("transform-origin")}} cambiamos centro que usaremos para rotar el range. Como el input mide 150 pixeles de ancho y largo, girará en una cuadrado de 150 pixeles de lado. Colocamos el centro de giro a 75px horizontal y verticalmente y, finalmente, rotamos 90º en sentido contrario a las agujas del reloj. El resultado final es un input range que ha girado y cuyo valor máximo está en la parte superior y el valor mínimo en la parte inferior.</p> + +<h4 id="Result_2">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validación">Validación</h2> + +<div class="g-unit" id="gt-res-c"> +<div id="gt-res-p"> +<div id="gt-res-data"> +<div id="gt-res-wrap"> +<div id="gt-res-content"> +<div class="trans-verified-button-small" dir="ltr" id="gt-res-dir-ctr"> +<div id="tts_button"> </div> +<span id="result_box" lang="es"><span>No hay un patrón de validación</span></span><span lang="es"><span> disponible;</span> <span>sin embargo, se realizan las siguientes formas de validación automática:</span></span></div> +</div> +</div> +</div> +</div> +</div> + +<p> </p> + +<ul> + <li>Si el {{htmlattrxref("value", "input")}} <span id="result_box" lang="es"><span>está configurado con un valor que no se puede convertir en un número de coma flotante válido, la validación falla porque recibe una entrada incorrecta.</span></span></li> + <li>El valor no puede ser menor que el valor de {{htmlattrxref("min", "input")}}. Por defecto es 0.</li> + <li>El valor no puede ser mayor que el {{htmlattrxref("max", "input")}}. Por defecto es 100.</li> + <li>El valor será un múltiplo del valor de {{htmlattrxref("step", "input")}}. Por defecto es 1.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Además de los ejemplos anteriores, encontrarás más ejemplos en los siguientes artículos:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li> +</ul> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0<sup>[2]</sup></td> + <td>12</td> + <td>{{CompatGeckoDesktop(23)}}<sup>[1][4]</sup></td> + <td>10</td> + <td>10.1</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1<sup>[3]</sup></td> + <td>57<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}<sup>[1]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] A pesar de que la especificación dice que el input range debe mostrarse verticalmente si el alto es mayor que el ancho, este comportamiento no está implementado actualmente. Mira los siguientes bugs para conocer más información: {{bug(840820)}} y {{bug(981916)}}.</p> + +<p>[2] Chrome implementa el valor <code>slider-vertical</code> con la propiedad no estandard {{cssxref("-webkit-appearance")}}. <em>No deberías usarla ya que es propietaria, a menos que incluyas fallbacks para usuarios de otros navegadores</em>.</p> + +<p>[3] El navegador de Android reconoce el tipo <code>"range"</code> desde la versión 2.1, pero no está totalmente implementada hasta la versión 4.3.</p> + +<p>[4] Dibujar marcas y etiquetas no está aún implementado. Ver {{bug(841942)}} para conocer más información.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface it's based upon</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> +</ul> diff --git a/files/es/web/html/element/input/text/index.html b/files/es/web/html/element/input/text/index.html new file mode 100644 index 0000000000..b98f985679 --- /dev/null +++ b/files/es/web/html/element/input/text/index.html @@ -0,0 +1,472 @@ +--- +title: <input type="text"> +slug: Web/HTML/Elemento/input/text +tags: + - Entrada de texto + - Form input + - Formulários HTML + - HTML + - Input + - Input Type + - Referencia + - Text + - Texto + - formulários + - text input +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean campos de texto básicos de una sola línea.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value")}}</strong></td> + <td>Un {{DOMxRef("DOMString")}} que representa el texto contenido en el campo de texto.</td> + </tr> + <tr> + <td><strong>Eventos</strong></td> + <td>{{event("change")}} y {{event("input")}}</td> + </tr> + <tr> + <td><strong>Atributos comunes admitidos</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} y {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL attributes</strong></td> + <td>{{htmlattrxref("list", "input")}}, {{HTMLAttrDef("value")}}</td> + </tr> + <tr> + <td><strong>Métodos</strong></td> + <td>{{DOMxRef("HTMLInputElement.select", "select()")}}, {{DOMxRef("HTMLInputElement.setRangeText", "setRangeText()")}} y {{DOMxRef("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Value"><code>Value</code></h2> + +<p>El atributo {{HTMLAttrxRef("value", "input")}} es un {{DOMxRef("DOMString")}} que contiene el valor actual del texto ingresado en el campo de texto. Puedes recuperar esto usando la propiedad {{DOMxRef("HTMLInputElement.value", "value")}} en JavaScript.</p> + +<pre class="brush: js notranslate">let theText = myTextInput.value; +</pre> + +<p>Si no existen restricciones de validación para la entrada (consulta {{anch("Validación")}} para obtener más detalles), el valor puede ser una cadena vacía ("").</p> + +<h2 id="Atributos_adicionales">Atributos adicionales</h2> + +<p>Además de los atributos que operan en todos los elementos {{HTMLElement("input")}} independientemente de su tipo, las entradas de texto admiten los siguientes atributos:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>El id del elemento {{HTMLElement("datalist")}} que contiene las opciones de autocompletar predefinidas</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>El número máximo de caracteres que debe aceptar la entrada</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>El número mínimo de caracteres que la entrada puede tener y aún se considera válida</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Una expresión regular que el contenido de la entrada debe coincidir para que sea válida</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Un valor de ejemplo para mostrar en el campo de entrada siempre y cuando esté vacío</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un atributo booleano que indica si el contenido de la entrada debe ser de solo lectura.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un número que indica cuántos caracteres de ancho debe tener el campo de entrada.</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>Controla si se habilita o no la revisión ortográfica para el campo de entrada, o si se debe usar la configuración de revisión ortográfica predeterminada</td> + </tr> + </tbody> +</table> + +<h3 id="HTMLAttrDeflist">{{HTMLAttrDef("list")}}</h3> + +<p>Los valores del atributo {{HTMLAttrDef("list")}} son el {{DOMxRef("Element.id", "id")}} de un elemento {{HTMLElement("datalist")}} ubicado en el mismo documento. El {{HTMLElement("datalist")}} proporciona una lista de valores predefinidos para sugerir al usuario para esta entrada. Cualquier valor de la lista que no sea compatible con {{HTMLAttrxRef("type", "input")}} no se incluye en las opciones sugeridas. Los valores proporcionados son sugerencias, no requisitos: los usuarios pueden seleccionar de esta lista predefinida o proporcionar un valor diferente.</p> + +<h3 id="HTMLAttrDefmaxlength">{{HTMLAttrDef("maxlength")}}</h3> + +<p>El número máximo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("text")}}. Debe ser un valor entero 0 o superior. Si no se especifica {{HTMLAttrDef("maxlength")}}, o se especifica un valor no válido, el {{HTMLAttrDef("text")}} de la entrada no tiene una longitud máxima. Este valor también debe ser mayor o igual que el valor de {{HTMLAttrxRef("minlength", "input")}}.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del valor de texto del campo es mayor que {{HTMLAttrxRef("maxlength", "input")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefminlength">{{HTMLAttrDef("minlength")}}</h3> + +<p>El número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en la entrada de {{HTMLAttrDef("texto")}}. Debe ser un valor entero no negativo menor o igual al valor especificado por {{HTMLAttrxRef("maxlength", "input")}}. Si no se especifica {{HTMLAttrDef("minlength")}}, o se especifica un valor no válido, la entrada de {{HTMLAttrDef("text")}} no tiene una longitud mínima.</p> + +<p>La entrada fallará {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}} si la longitud del texto ingresado en el campo es menor que {{HTMLAttrDef("minlength")}} Unidades de código UTF-16 de longitud. La validación de la restricción solo se aplica cuando el usuario cambia el valor.</p> + +<h3 id="HTMLAttrDefpattern">{{HTMLAttrDef("pattern")}}</h3> + +<div id="pattern-include"> +<p>El atributo {{HTMLAttrDef("pattern")}}, cuando se especifica, es una expresión regular que el {{HTMLAttrxRef("value")}} de la entrada debe coincidir para que el valor pase {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}. Debe ser una expresión regular de JavaScript válida, como la usada por el tipo {{JSxRef("RegExp")}} y como se documenta en la {{web.link("/es/docs/Web/JavaScript/Guide/Regular_Expressions", "guía sobre expresiones regulares")}}; el indicador <code>'u'</code> se especifica al compilar la expresión regular, de modo que el patrón se trata como una secuencia de puntos de código Unicode, en lugar de ASCII. No se deben especificar barras diagonales alrededor del texto del patrón.</p> + +<p>Si el patrón especificado no se especifica o no es válido, no se aplica ninguna expresión regular y este atributo se ignora por completo.</p> + +<div class="note"> +<p><strong>Consejo</strong>:: Utiliza el atributo {{HTMLAttrxRef("title", "input")}} para especificar el texto que la mayoría de los navegadores mostrarán como información sobre herramientas para explicar cuáles son los requisitos para coincidir con el patrón. También debes incluir otro texto explicativo cercano.</p> +</div> +</div> + +<p>Consulta {{anch("Especificación de un patrón")}} para obtener más detalles y un ejemplo.</p> + +<h3 id="HTMLAttrDefplaceholder">{{HTMLAttrDef("placeholder")}}</h3> + +<p>El atributo {{HTMLAttrDef("placeholder")}} es una cadena que proporciona una breve pista al usuario sobre el tipo de información que se espera en el campo. Debe ser una palabra o frase corta que demuestre el tipo de datos esperado, en lugar de un mensaje explicativo. El texto <em>no debe</em> incluir retornos de carro o saltos de línea.</p> + +<p>Si el contenido del control tiene una direccionalidad ({{Glossary("LTR")}} o {{Glossary("RTL")}}) pero necesitas presentar el marcador de posición en la direccionalidad opuesta, puedes usar caracteres de formato de algoritmo bidireccional Unicode para anular la direccionalidad dentro del marcador de posición; consulta {{SectionOnPage("/es/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Anulación de BiDi mediante caracteres de control Unicode")}} para esos caracteres.</p> + +<div class="note"> +<p><strong>Nota</strong>: Evita utilizar el atributo {{HTMLAttrDef("placeholder")}} si puedes. No es tan útil semánticamente como otras formas de explicar tu formulario y puede causar problemas técnicos inesperados con tu contenido. Consulta {{SectionOnPage("/es/docs/Web/HTML/Element/input", "Etiquetas y marcadores de posición")}} para obtener más información.</p> +</div> + +<h3 id="HTMLAttrDefreadonly">{{HTMLAttrDef("readonly")}}</h3> + +<p>Un atributo booleano que, si está presente, significa que el usuario no puede editar este campo. Su {{HTMLAttrDef("value")}}, sin embargo, aún se puede cambiar mediante el código JavaScript configurando directamente la propiedad {{DOMxRef("HTMLInputElement.value")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Debido a que un campo de solo lectura no puede tener un valor, {{HTMLAttrDef("required")}} no tiene ningún efecto en las entradas con el atributo {{HTMLAttrDef("readonly")}} también especificado.</p> +</div> + +<h3 id="HTMLAttrDefsize">{{HTMLAttrDef("size")}}</h3> + +<p>El atributo {{HTMLAttrDef("size")}} es un valor numérico que indica cuántos caracteres de ancho debe tener el campo de entrada. El valor debe ser un número mayor que cero, y el valor predeterminado es 20. Dado que el ancho de los caracteres varía, esto puede ser exacto o no y no se debe confiar en que lo sea; la entrada resultante puede ser más estrecha o más ancha que el número especificado de caracteres, dependiendo de los caracteres y la fuente (configuración de {{CSSxRef("fuente")}} en uso).</p> + +<p>Esto <em>no</em> establece un límite en la cantidad de caracteres que el usuario puede ingresar en el campo. Solo especifica aproximadamente cuántos se pueden ver a la vez. Para establecer un límite superior en la longitud de los datos de entrada, utiliza el atributo {{anch("maxlength")}}.</p> + +<h3 id="HTMLAttrDefspellcheck">{{HTMLAttrDef("spellcheck")}}</h3> + +<p>{{HTMLAttrDef("spellcheck")}} es un atributo global que se utiliza para indicar si se habilita o no la revisión ortográfica de un elemento. Se puede usar en cualquier contenido editable, pero aquí consideramos los detalles relacionados con el uso del corrector ortográfico ({{HTMLAttrxRef("spellcheck")}} en elementos {{HTMLElement("input")}}. Los valores permitidos para el corrección ortográfica son:</p> + +<dl> + <dt><code>false</code></dt> + <dd>Desactive la corrección ortográfica de este elemento.</dd> + <dt><code>true</code></dt> + <dd>Habilita la revisión ortográfica de este elemento.</dd> + <dt>"" (cadena vacía) o sin valor</dt> + <dd>Sigue el comportamiento predeterminado del elemento para la revisión ortográfica. Esto se puede basar en la configuración de la corrección ortográfica de los padres u otros factores.</dd> +</dl> + +<p>Un campo de entrada puede tener habilitado el corrector ortográfico si no tiene el atributo {{anch("readonly")}} configurado y no está deshabilitado.</p> + +<p>Es posible que el valor devuelto al leer el corrector ortográfico puede no reflejar el estado real del corrector ortográfico dentro de un control, si las preferencias de {{Glossary("agente de usuario", "agentes de usuario")}} anulan la configuración.</p> + +<h2 id="Atributos_no_estándar">Atributos no estándar</h2> + +<p>Los siguientes atributos no estándar también están disponibles en algunos navegadores. Como regla general, debes evitar usarlos a menos que no puedas evitarlo.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Una cadena que indica si la autocorrección está activa (<code>on</code>) o (<code>off</code>). <strong>Solo Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Una cadena que indica el tipo de acción que se realizará cuando el usuario presione la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras editas el campo; esto se usa para determinar una etiqueta apropiada para esa tecla en un teclado virtual. <strong>Solo Firefox para Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="HTMLAttrDefautocorrect_non-standard_inline">{{HTMLAttrDef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Una extensión de Safari, el atributo {{HTMLAttrDef("autocorrect")}} es una cadena que indica si activar o no la corrección automática mientras el usuario está editando este campo. Los valores permitidos son:</p> + +<dl> + <dt><code>on</code></dt> + <dd>Habilita la corrección automática de errores tipográficos, así como el procesamiento de sustituciones de texto, si los hay.</dd> + <dt><code>off</code></dt> + <dd>Desactiva la corrección automática y las sustituciones de texto.</dd> +</dl> +</div> + +<h3 id="HTMLAttrDefmozactionhint_non-standard_inline">{{HTMLAttrDef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>Una extensión de Mozilla, compatible con Firefox para Android, que proporciona una pista sobre qué tipo de acción se realizará si el usuario presiona la tecla <kbd>Intro</kbd> o <kbd>Retorno</kbd> mientras edita el campo. Esta información se usa para decidir qué tipo de etiqueta usar en la tecla <kbd>Intro</kbd> del teclado virtual.</p> + +<div class="note"> +<p><strong>Nota</strong>: Este <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">se ha estandarizado</a> como el atributo global {{HTMLAttrxRef("enterkeyhint")}}, pero aún no está ampliamente implementado. Para ver el estado del cambio que se está implementando en Firefox, consulta {{bug(1490661)}}.</p> +</div> + +<p>Los valores permitidos son: <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> y <code>send</code>. El navegador decide, utilizando esta sugerencia, qué etiqueta poner en la tecla Intro.</p> +</div> + +<h2 id="Usar_entradas_de_texto">Usar entradas de texto</h2> + +<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} crean entradas básicas de una sola línea. Los debes usar en cualquier lugar donde desees que el usuario ingrese un valor de una sola línea y no hay un tipo de entrada más específico disponible para recopilar ese valor (por ejemplo, si es un {{web.link("/es/docs/Web/HTML/Element/input/datetime-local", "date")}}, {{web.link("/es/docs/Web/HTML/Element/input/url", "URL")}}, {{web.link("/es/docs/Web/HTML/Element/input/email", "email")}}, o {{web.link("/es/docs/Web/HTML/Element/input/search", "término de búsqueda")}}, tiene mejores opciones disponibles).</p> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>Esto se renderiza así:</p> + +<p>{{EmbedLiveSample("Ejemplo_básico", 600, 50)}}</p> + +<p>Cuando se envía, el par de nombre/valor de datos enviado al servidor será <code>uname=Chris</code> (si se ingresó "Chris" como valor de entrada antes del envío). Debes recordar incluir el atributo {{HTMLAttrxRef("name", "input")}} en el elemento {{HTMLElement("input")}}; de lo contrario, el valor del campo de texto no se incluirá con los datos enviados.</p> + +<h3 id="Establecer_marcadores_de_posición">Establecer marcadores de posición</h3> + +<p>Puedes proporcionar un marcador de posición útil dentro de tu entrada de texto que puede proporcionar una pista sobre qué ingresar al incluir el uso del atributo {{HTMLAttrxRef("placeholder", "input")}}. Mira el siguiente ejemplo:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" + placeholder="Una sola palabra, en minúsculas"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>Puedes ver cómo se representa el marcador de posición a continuación:</p> + +<p>{{EmbedLiveSample("Establecer_marcadores_de_posición", 600, 50)}}</p> + +<p>El marcador de posición generalmente se representa en un color más claro que el color de primer plano del elemento y desaparece automáticamente cuando el usuario comienza a ingresar texto en el campo (o siempre que el campo tiene un valor establecido programáticamente al establecer su atributo {{HTMLAttrDef("value")}}.</p> + +<h3 id="Tamaño_físico_del_elemento_de_entrada">Tamaño físico del elemento de entrada</h3> + +<p>El tamaño físico del cuadro de entrada se puede controlar mediante el atributo {{HTMLAttrxRef("size", "input")}}. Con él, puedes especificar el número de caracteres que la entrada de texto puede mostrar a la vez. Esto afecta el ancho del elemento, lo cual te permite especificar el ancho en términos de caracteres en lugar de píxeles. En este ejemplo, por ejemplo, la entrada tiene 30 caracteres de ancho:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" + placeholder="Una sola palabra, en minúsculas" + size="30"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Tamaño_físico_del_elemento_de_entrada', 600, 50) }}</p> + +<h2 id="Validación">Validación</h2> + +<p>Los elementos {{HTMLElement("input")}} de tipo {{HTMLAttrDef("text")}} no tienen validación automática aplicada (ya que una entrada de texto básica debe ser capaz de aceptar cualquier cadena arbitraria), pero hay algunas opciones de validación de lado del cliente disponibles, que verás a continuación.</p> + +<div class="note"> +<p><strong>Nota</strong>: La validación del formulario HTML <em>no</em> sustituye a la de los scripts del servidor que garantizan que los datos introducidos tengan el formato adecuado. Es demasiado fácil para alguien realizar ajustes en el HTML que le permitan omitir la validación o eliminarla por completo. También es posible que alguien simplemente omita tu HTML por completo y envíe los datos directamente a tu servidor. Si tu código del lado del servidor no valida los datos que recibe, podría ocurrir un desastre cuando se ingresen en tu base de datos datos con formato incorrecto (o datos que son demasiado grandes, son del tipo incorrecto, etc.).</p> +</div> + +<h3 id="Una_nota_sobre_estilizado">Una nota sobre estilizado</h3> + +<p>Hay pseudoclases útiles disponibles para diseñar elementos de formulario para ayudar al usuario a ver cuándo sus valores son válidos o no. Estos son {{CSSxRef(": valid")}} e {{CSSxRef(":invalid")}}. En esta sección, usaremos el siguiente CSS, que colocará una marca de verificación (tilde) junto a las entradas que contienen valores válidos y una cruz (X) junto a las entradas que contienen valores no válidos.</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>La técnica también requiere que se coloque un elemento {{HTMLElement("span")}} después del elemento {{HTMLElement("form")}}, que actúa como contenedor de los iconos. Esto era necesario porque algunos tipos de entrada en algunos navegadores no muestran muy bien los iconos colocados directamente después de ellos.</p> + +<h3 id="Hacer_entrada_requerida">Hacer entrada requerida</h3> + +<p>Puedes usar el atributo {{HTMLAttrxRef("required", "input")}} como una manera fácil de hacer que se requiera ingresar un valor antes de que se permita el envío del formulario:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Hacer_entrada_requerida', 600, 70) }}</p> + +<p>Si intentas enviar el formulario sin ningún término de búsqueda ingresado, el navegador mostrará un mensaje de error.</p> + +<h3 id="Longitud_del_valor_de_entrada">Longitud del valor de entrada</h3> + +<p>Puedes especificar una longitud mínima (en caracteres) para el valor ingresado usando el atributo {{HTMLAttrxRef("minlength", "input")}}; de manera similar, usa {{HTMLAttrxRef("maxlength", "input")}} para establecer la longitud máxima del valor ingresado, en caracteres.</p> + +<p>El siguiente ejemplo requiere que el valor ingresado tenga entre 4 y 8 caracteres de longitud.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required size="10" + placeholder="nombreusuario" + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Longitud_del_valor_de_entrada', 600, 70) }}</p> + +<p>Si intentas enviar el formulario con menos de 4 caracteres, se te dará un mensaje de error apropiado (que difiere entre los navegadores). Si intentas ingresar más de 8 caracteres, el navegador no te lo permitirá.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si especificas un {{HTMLAttrDef("minlength")}} pero no especificas {{HTMLAttrDef("required")}}, la entrada se considera válida, ya que no se requiere que el usuario especifique un valor.</p> +</div> + +<h3 id="Especificación_de_un_patrón">Especificación de un patrón</h3> + +<p>Puedes utilizar el atributo {{HTMLAttrxRef("pattern", "input")}} para especificar una expresión regular con la que el valor ingresado debe coincidir para que se considere válido (ve un curso intensivo simple en {{web.link("/es/docs/Learn/HTML/Forms/Form_validation#Validación_con_una_expresión_regular", "Validación con una expresión regular")}} sobre el uso de expresiones regulares para validar entradas).</p> + +<p>El siguiente ejemplo restringe el valor a 4-8 caracteres y requiere que contenga solo letras minúsculas.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Elige un nombre de usuario: </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Los nombres de usuario deben estar en minúsculas y tener entre 4 y 8 caracteres de longitud.</p> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>Esto se renderiza así:</p> + +<p>{{ EmbedLiveSample('Especificación_de_un_patrón', 600, 110) }}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Puedes ver buenos ejemplos de entradas de texto utilizadas en contexto en los artículos {{web.link("/es/docs/Learn/HTML/Forms/Your_first_HTML_form", "Mi primer formulario HTML")}} y {{web.link("/es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form", "Cómo estructurar un formulario HTML")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</li> + <li>{{HTMLElement("input")}} y la interfaz {{DOMxRef("HTMLInputElement")}} en que se basa.</li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}}: Campo de entrada de texto multilínea</li> + <li>{{web.link("/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets", "Compatibilidad de propiedades CSS")}}</li> +</ul> |