diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:45 -0500 |
commit | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (patch) | |
tree | 0dd8b084480983cf9f9680e8aedb92782a921b13 /files/es/web/html/atributos | |
parent | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (diff) | |
download | translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.gz translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.tar.bz2 translated-content-1109132f09d75da9a28b649c7677bb6ce07c40c0.zip |
initial commit
Diffstat (limited to 'files/es/web/html/atributos')
-rw-r--r-- | files/es/web/html/atributos/accept/index.html | 169 | ||||
-rw-r--r-- | files/es/web/html/atributos/autocomplete/index.html | 180 | ||||
-rw-r--r-- | files/es/web/html/atributos/index.html | 677 | ||||
-rw-r--r-- | files/es/web/html/atributos/min/index.html | 162 | ||||
-rw-r--r-- | files/es/web/html/atributos/minlength/index.html | 71 | ||||
-rw-r--r-- | files/es/web/html/atributos/multiple/index.html | 182 |
6 files changed, 1441 insertions, 0 deletions
diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/atributos/accept/index.html new file mode 100644 index 0000000000..b98ff8b644 --- /dev/null +++ b/files/es/web/html/atributos/accept/index.html @@ -0,0 +1,169 @@ +--- +title: 'HTML el atributo: accept' +slug: Web/HTML/Atributos/accept +tags: + - Accept + - Archivo + - Entrada + - Input + - Referencia + - atributo +translation_of: Web/HTML/Attributes/accept +--- +<p class="summary"><span class="seoSummary">El atributo <strong><code>accept</code></strong> toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. </span>La propiedad «<em>accept</em>» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.</p> + +<p>Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.</p> + +<p>Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <code><input></code> como este:</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<p>Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:</p> + +<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*"> +<input type="file" id="videoFile" accept="video/*"> +<input type="file" id="imageFile" accept="image/*"></pre> + +<p>El atributo <code>accept</code> no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.</p> + +<p>Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.</p> + +<div id="ejemplo_sencillo"> +<pre class="brush: html notranslate"><p> + <label for="soundFile">Selecciona un archivo de audio:</label> + <input type="file" id="soundFile" accept="audio/*"> + </p> + <p> + <label for="videoFile">Selecciona un archivo de video:</label> + <input type="file" id="videoFile" accept="video/*"> + </p> + <p> + <label for="imageFile">Selecciona algunas imágenes:</label> + <input type="file" id="imageFile" accept="image/*" multiple> + </p></pre> + +<p>{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}</p> + +<p>Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo <code><a href="multiple">multiple</a></code> para obtener más información.</p> +</div> + +<h2 id="Especificadores_de_tipo_de_archivo_únicos">Especificadores de tipo de archivo únicos</h2> + +<p>Un <strong>especificador de tipo de archivo único</strong> es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo <code>file</code>. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:</p> + +<ul> + <li>Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: <code>.jpg</code>, <code>.pdf</code>, o <code>.doc</code>.</li> + <li>Una cadena de tipo MIME válida, sin extensiones.</li> + <li>La cadena <code>audio/*</code> significa "cualquier archivo de audio".</li> + <li>La cadena <code>video/*</code> significa "cualquier archivo de video".</li> + <li>La cadena <code>image/*</code> significa "cualquier archivo de imagen".</li> +</ul> + +<p>El atributo <code>accept</code> toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Usar_inputs_de_archivo">Usar <em>input</em>s de archivo</h2> + +<h3 id="Un_ejemplo_básico">Un ejemplo básico</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Elige el archivo a cargar</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Esto produce la siguiente salida:</p> + +<p>{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}</p> + +<div class="note"> +<p><strong>Nota</strong>: También puedes encontrar este ejemplo en GitHub; consulta <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">código fuente</a> y también puedes <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">verlo funcionando en vivo</a>.</p> +</div> + +<p>Independientemente del dispositivo o sistema operativo del usuario, el <code><input></code> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.</p> + +<p>La inclusión del atributo <code><a href="multiple">multiple</a></code>, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <code><input></code>, omite el atributo <code>multiple</code>.</p> + +<h3 id="Limitar_los_tipos_de_archivo_aceptados">Limitar los tipos de archivo aceptados</h3> + +<p>A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p> + +<p>Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:</p> + +<ul> + <li><code>accept="image/png"</code> o <code>accept=".png"</code> — Acepta archivos PNG.</li> + <li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Acepta archivos PNG o JPEG.</li> + <li><code>accept="image/*"</code> — Acepta cualquier archivo con un tipo MIME de <code>image/*</code>. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Acepta cualquier cosa que huela a un documento de MS Word.</li> +</ul> + +<p>Veamos un ejemplo más completo:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Elige el archivo para cargar</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Enviar</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}</td> + <td>{{Spec2('HTML5.1')}}</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.attribute.accept")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}</li> + <li>{{web.link("/es/docs/Web/API/File", "API de File")}}</li> +</ul> diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/atributos/autocomplete/index.html new file mode 100644 index 0000000000..b8546e368d --- /dev/null +++ b/files/es/web/html/atributos/autocomplete/index.html @@ -0,0 +1,180 @@ +--- +title: The HTML autocomplete attribute +slug: Web/HTML/Atributos/autocomplete +translation_of: Web/HTML/Attributes/autocomplete +--- +<p>El atributo <code>autocomplete</code> está disponible en varios tipos de {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. <span class="seoSummary"><code>autocomplete</code> </span> permite a los desarrolladores web especificar qué permisos si los hay <span class="seoSummary">{{Glossary("user agent")}} </span> debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.</p> + +<p> </p> + +<p>Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ingresados por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.</p> + +<p>Si un elemento {{HTMLElement("input")}} no tiene el atributo <code>autocomplete</code> , entonces los navegadores usan el atributo <code>autocomplete</code> del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.</p> + +<p>Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}</p> + +<div class="blockIndicator note"> +<p>Para proveer el autocompletado, el navegador necesita del los elementos <code><input></code>:</p> + +<ol> + <li>Que tengan <code>name</code> y/o <code>id</code></li> + <li>Pertenezcan a un elemento <code><form></code></li> + <li>Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}</li> +</ol> +</div> + +<h2 id="Valores">Valores</h2> + +<dl> + <dt><code>"off"</code></dt> + <dd>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. + <div class="note"><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to <code>"off"</code> will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div> + </dd> + <dt><code>"on"</code></dt> + <dd>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</dd> + <dt><code>"name"</code></dt> + <dd>The field expects the value to be a person's full name. Using <code>"name"</code> rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components: + <dl> + <dt><code>"honorific-prefix"</code></dt> + <dd>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</dd> + <dt><code>"given-name"</code></dt> + <dd>The given (or "first") name.</dd> + <dt><code>"additional-name"</code></dt> + <dd>The middle name.</dd> + <dt><code>"family-name"</code></dt> + <dd>The family (or "last") name.</dd> + <dt><code>"honorific-suffix"</code></dt> + <dd>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd> + <dt><code>"nickname"</code></dt> + <dd>A nickname or handle.</dd> + </dl> + </dd> + <dt><code>"email"</code></dt> + <dd>An email address.</dd> + <dt><code>"username"</code></dt> + <dd>A username or account name.</dd> + <dt><code>"new-password"</code></dt> + <dd>A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.</dd> + <dt><code>"current-password"</code></dt> + <dd>The user's current password.</dd> + <dt><code>"organization-title"</code></dt> + <dd>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</dd> + <dt><code>"organization"</code></dt> + <dd>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</dd> + <dt><code>"street-address"</code></dt> + <dd>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</dd> + <dt><code>"address-line1"</code>, <code>"address-line2"</code>, <code>"address-line3"</code></dt> + <dd>Each individual line of the street address. These should only be present if the <code>"street-address"</code> is also present.</dd> + <dt><code>"address-level4"</code></dt> + <dd>The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.</dd> + <dt><code>"address-level3"</code></dt> + <dd>The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.</dd> + <dt><code>"address-level2"</code></dt> + <dd>The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</dd> + <dt><code>"address-level1"</code></dt> + <dd>The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</dd> + <dt><code>"country"</code></dt> + <dd>A country code.</dd> + <dt><code>"country-name"</code></dt> + <dd>A country name.</dd> + <dt><code>"postal-code"</code></dt> + <dd>A postal code (in the United States, this is the ZIP code).</dd> + <dt><code>"cc-name"</code></dt> + <dd>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</dd> + <dt><code>"cc-given-name"</code></dt> + <dd>A given (first) name as given on a payment instrument like a credit card.</dd> + <dt><code>"cc-additional-name"</code></dt> + <dd>A middle name as given on a payment instrument or credit card.</dd> + <dt><code>"cc-family-name"</code></dt> + <dd>A family name, as given on a credit card.</dd> + <dt><code>"cc-number"</code></dt> + <dd>A credit card number or other number identifying a payment method, such as an account number.</dd> + <dt><code>"cc-exp"</code></dt> + <dd>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</dd> + <dt><code>"cc-exp-month"</code></dt> + <dd>The month in which the payment method expires.</dd> + <dt><code>"cc-exp-year"</code></dt> + <dd>The year in which the payment method expires.</dd> + <dt><code>"cc-csc"</code></dt> + <dd>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</dd> + <dt><code>"cc-type"</code></dt> + <dd>The type of payment instrument (such as "Visa" or "Master Card").</dd> + <dt><code>"transaction-currency"</code></dt> + <dd>The currency in which the transaction is to take place.</dd> + <dt><code>"transaction-amount"</code></dt> + <dd>The amount, given in the currency specified by <code>"transaction-currency"</code>, of the transaction, for a payment form.</dd> + <dt><code>"language"</code></dt> + <dd>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</dd> + <dt><code>"bday"</code></dt> + <dd>A birth date, as a full date.</dd> + <dt><code>"bday-day"</code></dt> + <dd>The day of the month of a birth date.</dd> + <dt><code>"bday-month"</code></dt> + <dd>The month of the year of a birth date.</dd> + <dt><code>"bday-year"</code></dt> + <dd>The year of a birth date.</dd> + <dt><code>"sex"</code></dt> + <dd>A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.</dd> + <dt><code>"tel"</code></dt> + <dd>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: + <dl> + <dt><code>"tel-country-code"</code></dt> + <dd>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</dd> + <dt><code>"tel-national"</code></dt> + <dd>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</dd> + <dt><code>"tel-area-code"</code></dt> + <dd>The area code, with any country-internal prefix applied if appropriate.</dd> + <dt><code>"tel-local"</code></dt> + <dd>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use <code>"tel-local-prefix"</code> for "555" and <code>"tel-local-suffix"</code> for "6502".</dd> + </dl> + </dd> + <dt><code>"tel-extension"</code></dt> + <dd>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</dd> + <dt><code>"impp"</code></dt> + <dd>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</dd> + <dt><code>"url"</code></dt> + <dd>A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.</dd> + <dt><code>"photo"</code></dt> + <dd>The URL of an image representing the person, company, or contact information given in the other fields in the form.</dd> +</dl> + +<p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply to the <code><input></code> by virtue of its <code>type</code>. See {{bug(654072)}}.</p> +</div> + +<h2 id="Administrative_levels_in_addresses">Administrative levels in addresses</h2> + +<p>The four administrative level fields (<code>"address-level1"</code> through <code>"address-level4"</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p> + +<p><code>"address-level1"</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p> + +<h3 id="Form_layout_flexibility">Form layout flexibility</h3> + +<p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p> + +<h3 id="Variations">Variations</h3> + +<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p> + +<h4 id="United_States">United States</h4> + +<p>A typical home address within the United States looks like this:</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>"address-level1"</code> is the state, or "CA" in this case.</p> + +<p>The second-least specific portion of the address is the city or town name, so <code>"address-level2"</code> is "Exampleville" in this example address.</p> + +<p>United States addresses do not use levels 3 and up.</p> + +<h4 id="United_Kingdom">United Kingdom</h4> + +<p>The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.</p> + +<h4 id="China">China</h4> + +<p>China can use as many as three administrative levels: the province, the city, and the district.</p> diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/atributos/index.html new file mode 100644 index 0000000000..03e7d8baee --- /dev/null +++ b/files/es/web/html/atributos/index.html @@ -0,0 +1,677 @@ +--- +title: Referencia de Atributos HTML +slug: Web/HTML/Atributos +tags: + - HTML + - Referencia + - Web + - atributo +translation_of: Web/HTML/Attributes +--- +<p>Los elementos en HTML tienen <strong>atributos</strong>; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.</p> + +<h2 id="Lista_de_Atributos">Lista de Atributos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>Nombre del Atributo</th> + <th>Elementos</th> + <th>Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>accept</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.</td> + </tr> + <tr> + <td><code>accept-charset</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Lista de juegos de caracteres soportados.</td> + </tr> + <tr> + <td><code>accesskey</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_Globales" title="/es/docs/Web/HTML/Atributos_Globales">Atributos Globales</a></td> + <td>Define una tecla que activa o agrega un foco al elemento.</td> + </tr> + <tr> + <td><code>action</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>La URL del programa que procesa la información enviada en el formulario.</td> + </tr> + <tr> + <td><code>align</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}</td> + <td>Especifica el alineamiento horizontal del elemento.</td> + </tr> + <tr> + <td><code>alt</code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>Texto alternativo en caso de que la imagen no se pueda mostrar.</td> + </tr> + <tr> + <td><code>async</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indica que el script debería ejecutarse asincrónicamente.</td> + </tr> + <tr> + <td><code>autocomplete</code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.</td> + </tr> + <tr> + <td><code>autofocus</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>El elemento debería recibir foco automáticamente después de haberse cargado la página.</td> + </tr> + <tr> + <td><code>autoplay</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>El audio o video debería empezar lo antes posible.</td> + </tr> + <tr> + <td><code>autosave</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Previous values should persist dropdowns of selectable values across page loads.</td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>Color de fondo del elemento.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>El ancho del borde.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>buffered</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Contiene un rango de tiempo multimedia almacenado.</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>Cadena de desafío que se envía junto con la clave pública.</td> + </tr> + <tr> + <td><code>charset</code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>Declara la codificación de caracteres de la página o del script.</td> + </tr> + <tr> + <td><code>checked</code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>Indica que el elemento debería estar marcado al cargar la página.</td> + </tr> + <tr> + <td><code>cite</code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>Contiene una URL que apunta a la fuente de la cita o cambio.</td> + </tr> + <tr> + <td><code>class</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Usualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.</td> + </tr> + <tr> + <td><code>code</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.</td> + </tr> + <tr> + <td><code>codebase</code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.</p> + + <div class="note"> + <p><strong>Nota:</strong> Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>cols</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Define el número de columnas en un área de texto.</td> + </tr> + <tr> + <td><code>colspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Define el número de columnas que una celda debe contener.</td> + </tr> + <tr> + <td><code>content</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Un valor asociado con <code>http-equiv</code> o <code>name</code> dependiendo del contexto.</td> + </tr> + <tr> + <td><code>contenteditable</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica si el contenido del elemento es editable.</td> + </tr> + <tr> + <td><code>contextmenu</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.</td> + </tr> + <tr> + <td><code>controls</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el navegador debe mostrar controles de reproduccion al usuario.</td> + </tr> + <tr> + <td><code>coords</code></td> + <td>{{ HTMLElement("area") }}</td> + <td>Un conjunto de valores que especifican las coordenadas del area.</td> + </tr> + <tr> + <td><code>data</code></td> + <td>{{ HTMLElement("object") }}</td> + <td>Especifica la URL del recurso.</td> + </tr> + <tr> + <td><code>data-*</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Permite asociar atributos presonalizados a un elemento HTML.</td> + </tr> + <tr> + <td><code>datetime</code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>Indica la fecha y hora asociadas con el elemento.</td> + </tr> + <tr> + <td><code>default</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.</td> + </tr> + <tr> + <td><code>defer</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Indica que el código debe ser ejecutado despues de que la página este cargada.</td> + </tr> + <tr> + <td><code>dir</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).</td> + </tr> + <tr> + <td><code>dirname</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.</td> + </tr> + <tr> + <td><code>disabled</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si el usuario puede interactuar con el elemento.</td> + </tr> + <tr> + <td><code>download</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indica que el hipervínculo es utilizado para descargar un recurso.</td> + </tr> + <tr> + <td><code>draggable</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define si el elemento puede ser arrastrado.</td> + </tr> + <tr> + <td><code>dropzone</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica que el elemento acepta contenido soltado en el mismo.</td> + </tr> + <tr> + <td><code>enctype</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Define el tipo de contenido del formulario cuando el <code>método</code> del mismo es POST.</td> + </tr> + <tr> + <td><code>for</code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>Describe elementos que pertenecen a éste.</td> + </tr> + <tr> + <td><code>form</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica el formulario al que pertenece el elemento.</td> + </tr> + <tr> + <td><code>formaction</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.</td> + </tr> + <tr> + <td><code>headers</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>IDs de los elementos <code><th></code> que aplican a este elemento.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.</p> + + <div class="note"> + <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>hidden</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Evita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script</td> + </tr> + <tr> + <td><code>high</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el menor valor del rango alto.</td> + </tr> + <tr> + <td><code>href</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>La URL de un recurso asociado.</td> + </tr> + <tr> + <td><code>hreflang</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Especifica el lenguaje del recurso asociado.</td> + </tr> + <tr> + <td><code>http-equiv</code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.</td> + </tr> + <tr> + <td><code>icon</code></td> + <td>{{ HTMLElement("command") }}</td> + <td> + <p>Especifica una imagen relacionada con el comando.</p> + + <div class="note"> + <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p> + </div> + </td> + </tr> + <tr> + <td><code>id</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Identificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>Indica que la imagen es parte de un mapa de imagen del servidor.</td> + </tr> + <tr> + <td><code>itemprop</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica que el elemento contiene el valor de la propiedad especificada de un conjunto.</td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td> + <p>Especifica el tipo de clave generada.</p> + + <div class="note"> + <p><strong>Nota:</strong> RSA es el valor por defecto.</p> + </div> + </td> + </tr> + <tr> + <td><code>kind</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Specifies the kind of text track.</td> + </tr> + <tr> + <td><code>label</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Especifica el título de la pista con un formato legible por el usuario.</td> + </tr> + <tr> + <td><code>lang</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define el lenguaje utilizado en el elemento.</td> + </tr> + <tr> + <td><code>language</code></td> + <td>{{ HTMLElement("script") }}</td> + <td>Define el lenguage (de programación) utilizado en el elemento.</td> + </tr> + <tr> + <td><code>list</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Identifica una serie de valores predefinidos para ser sugeridos al usuario.</td> + </tr> + <tr> + <td><code>loop</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.</td> + </tr> + <tr> + <td><code>low</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el valor mas alto del rango bajo.</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>Especifica la URL del manifiesto de cache para el documento.</td> + </tr> + <tr> + <td><code>max</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>Indica el máximo valor aceptado.</td> + </tr> + <tr> + <td><code>maxlength</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Define el mayor número de caracteres aceptados.</td> + </tr> + <tr> + <td><code>media</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.</td> + </tr> + <tr> + <td><code>method</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Define el método <a href="/es/docs/Web/HTTP">HTTP</a> a emplear para enviar el formulario. Puede ser <code>GET</code> (predeterminado) o <code>POST</code>.</td> + </tr> + <tr> + <td><code>min</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>Indica el valor mínimo aceptado.</td> + </tr> + <tr> + <td><code>multiple</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Indica si múltiples valores pueden ser ingresados.</td> + </tr> + <tr> + <td><code>muted</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Indica si el audio será silenciado inicialmente al cargar la página.</td> + </tr> + <tr> + <td><code>name</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}</td> + <td>Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.</td> + </tr> + <tr> + <td><code>novalidate</code></td> + <td>{{ HTMLElement("form") }}</td> + <td>Este atributo indica que el formulario no debe ser validado cuando se envíe.</td> + </tr> + <tr> + <td><code>open</code></td> + <td>{{ HTMLElement("details") }}</td> + <td>Indica si los detalles de la página seran mostrados cuando cargue la misma.</td> + </tr> + <tr> + <td><code>optimum</code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>Indica el valor numérico óptimo.</td> + </tr> + <tr> + <td><code>pattern</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Define una expresion regular con la cual el valor del elemento debe ser validado.</td> + </tr> + <tr> + <td><code>ping</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.</td> + </tr> + <tr> + <td><code>placeholder</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.</td> + </tr> + <tr> + <td><code>poster</code></td> + <td>{{ HTMLElement("video") }}</td> + <td>Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.</td> + </tr> + <tr> + <td><code>preload</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>Indica si el recurso o partes del mismo deben ser precargadas.</td> + </tr> + <tr> + <td>pubdate</td> + <td>{{ HTMLElement("time") }}</td> + <td>Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td> + <p>Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.</p> + + <div class="note"> + <p><strong>Note:</strong> El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.</p> + </div> + </td> + </tr> + <tr> + <td><code>readonly</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si el elemento puede ser editado por el usuario.</td> + </tr> + <tr> + <td><code>rel</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>Especifica la relación entre el objeto destino y el objeto enlace.</td> + </tr> + <tr> + <td><code>required</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>Indica si se requiere rellenar o no este elemento.</td> + </tr> + <tr> + <td><code>reversed</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.</td> + </tr> + <tr> + <td><code>rows</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Define el número de filas en un área de texto.</td> + </tr> + <tr> + <td><code>rowspan</code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>Define el número de filas que una celda de una tabla debe abarcar.</td> + </tr> + <tr> + <td><code>sandbox</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Lista de restricciones a ser desactivadas en el iframe.</td> + </tr> + <tr> + <td><code>scope</code></td> + <td>{{ HTMLElement("th") }}</td> + <td>Define las celdas que la cabecera definió en este elemento.</td> + </tr> + <tr> + <td><code>scoped</code></td> + <td>{{ HTMLElement("style") }}</td> + <td>Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.</td> + </tr> + <tr> + <td><code>seamless</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Indica si el iframe debe ser cargado como parte del mismo documento.</td> + </tr> + <tr> + <td><code>selected</code></td> + <td>{{ HTMLElement("option") }}</td> + <td>Define un valor que será seleccionado al cargar la página.</td> + </tr> + <tr> + <td><code>shape</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: <code>circle</code>, <code>defaul</code>, <code>plygon</code> y <code>rect</code>.</td> + </tr> + <tr> + <td><code>size</code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>Define el ancho del elemento (en píxeles). Si el atributo del elemento es del <code>tipo</code> <code>text</code> o <code>password</code> entonces es el número de caracteres.</td> + </tr> + <tr> + <td><code>sizes</code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td>Define los tamaños en los que el icono puede ser cargado.</td> + </tr> + <tr> + <td><code>span</code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td>Indica el número de columnas que se agrupan.</td> + </tr> + <tr> + <td><code>spellcheck</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Indica si se permite la corrección ortográfica para el elemento.</td> + </tr> + <tr> + <td><code>src</code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>La URL del contenido integrable.</td> + </tr> + <tr> + <td><code>srcdoc</code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>Especifica el contenido de la página incluida.</td> + </tr> + <tr> + <td><code>srclang</code></td> + <td>{{ HTMLElement("track") }}</td> + <td>Especifica el lenguaje del contenido de la pista.</td> + </tr> + <tr> + <td><code>srcset</code></td> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td><code>start</code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>Define el número inicial de la lista (si es diferente a 1).</td> + </tr> + <tr> + <td><code>step</code></td> + <td>{{ HTMLElement("input") }}</td> + <td>Indica el valor del incremento para un valor numerico o de fecha.</td> + </tr> + <tr> + <td><code>style</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Define los estilos CSS que anulan los estilos establecidos previamente.</td> + </tr> + <tr> + <td><code>summary</code></td> + <td>{{ HTMLElement("table") }}</td> + <td> + <p>Contiene una descripción del contenido de la tabla.</p> + + <p>Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.</p> + </td> + </tr> + <tr> + <td><code>tabindex</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Sobrescribe el orden de tabulacion del navegador y usa el especificado.</td> + </tr> + <tr> + <td><code>target</code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td> + <p>Especifica el marco destino en un vínculo.</p> + + <p>Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.</p> + </td> + </tr> + <tr> + <td><code>title</code></td> + <td><a href="/es/docs/Web/HTML/Atributos_globales" title="/es/docs/Web/HTML/Atributos globales">Atributo Global</a></td> + <td>Texto a ser mostrado cuando el cursor esté sobre el elemento.</td> + </tr> + <tr> + <td><code>type</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>Define el tipo de elemento.</td> + </tr> + <tr> + <td><code>usemap</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td> + <p>Indica la URL parcial de un image map asociado con el elemento.</p> + + <div class="note"> + <p><strong>Note:</strong> Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}</p> + </div> + </td> + </tr> + <tr> + <td><code>value</code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>Define el valor predeterminado a ser mostrado al cargar la página.</td> + </tr> + <tr> + <td><code>width</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>Para los elementos enumerados aquí, esto establece el ancho del elemento.</p> + + <div class="note"> + <p><strong>Nota:</strong> En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.</p> + </div> + </td> + </tr> + <tr> + <td><code>wrap</code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>Indica la forma en la cual el texto debe ser envuelto.</td> + </tr> + </tbody> +</table> + +<h2 id="Contenido_versus_atributos_IDL">Contenido versus atributos IDL</h2> + +<p>En HTML, la mayoria de los atributos tiene dos caras: el <strong>atributo de contenido</strong> y el <strong>atributo IDL</strong></p> + +<p>El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a <code>setAttribute("maxlength", "42") en ese elemento.</code></p> + +<p>El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como <code>element.foo.</code>. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.</p> + +<p>La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el <code>type</code> por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines <code>input.type="foobar",</code> el elemento <code><input></code> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el <code>type</code> del atributo IDL retornara el string "text".</p> + +<p>Los atributos IDL no son siempre strings; por ejemplo, <code>input.maxlength</code> es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces <code>input.maxlength </code>siempre retornara un numero y cuando definas <code>input,maxlength</code>, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del estandar de JavaScript para conversiones de tipo.</p> + +<p>Los atributos IDL pueden <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">reflejar otros tipos</a> como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">las reglas de diseño en la especificacion</a>, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (<code>select.size</code>, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.</p> + +<h2 id="Ver_Tambien">Ver Tambien</h2> + +<ul> + <li><a href="/es/docs/Web/HTML/Elemento" title="/es/docs/Web/HTML/Elemento">Elementos</a></li> +</ul> diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/atributos/min/index.html new file mode 100644 index 0000000000..4060bd81f4 --- /dev/null +++ b/files/es/web/html/atributos/min/index.html @@ -0,0 +1,162 @@ +--- +title: 'HTML el atributo: min' +slug: Web/HTML/Atributos/min +tags: + - Atributos + - Restricción de validación + - atributo + - min +translation_of: Web/HTML/Attributes/min +--- +<div id="step-include"> +<p><span class="seoSummary">El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.</span></p> + +<p>Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.</p> + +<h3 id="Sintaxis">Sintaxis</h3> + +<div id="step-include"> +<p>Si <code>any</code> no se establece explícitamente, los valores válidos para el <code>número</code>, los tipos de entrada de fecha/hora y los tipos de entrada de <code>range</code> son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <code><input type="number" min="10" step="2"></code>, cualquier entero par, 10 o mayor, es válido. Si se omite, <code><input type="number"></code>, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el <code>step</code> predeterminado es 1. Para que 4.2 sea válido, <code>step</code> se debería haber configurado en <code>any</code>, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <code><input type="number" min="-5.2"></code></p> + +<table class="standard-table"> + <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <code><input type="" /></code></caption> + <thead> + <tr> + <th>Tipo del <code>input</code></th> + <th>Ejemplo</th> + <th>Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase <code>:invalid</code></p> +</div> +</div> + +<p>Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.</p> + +<p>Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.</p> + +<table class="standard-table"> + <caption>Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos</caption> + <thead> + <tr> + <th>Tipo del <code>input</code></th> + <th>Sintaxis</th> + <th>Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td>{{web.link("/es/docs/Web/CSS/number", "number")}}</td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h3 id="Impacto_en_step">Impacto en <code>step</code></h3> + +<p>Los valores de {{HTMLAttrxRef("min", "input")}} y <code>step</code> definen cuáles son los valores válidos, incluso si el atributo <code>step</code> no está incluido, como el <code>step</code> predeterminado de <code>0</code>.</p> + +<p>Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo <code>step</code>, en donde el valor predeterminado es 1.</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre> + +<p>Dado que <code>step</code> tiene el valor predeterminado de 1, los valores válidos incluyen <code>7.2</code>, <code>8.2</code>, <code>9.2</code> y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.</p> + +<p>{{EmbedLiveSample("Impacto_en_step",200,55)}}</p> + +<p>Si no se incluye explícitamente, <code>step</code> tiene como valor predeterminado 1 para <code>número</code> y <code>range</code>, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.</p> +</div> + +<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.attributes.min")}}</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#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}</li> + <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}</li> + <li>{{DOMxRef('Constraint_validation')}}</li> + <li>{{DOMxRef('validityState.rangeUnderflow')}}</li> + <li>{{CSSxRef(':out-of-range')}}</li> + <li>{{HTMLElement('input')}}</li> + <li>Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}</li> +</ul> diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/atributos/minlength/index.html new file mode 100644 index 0000000000..23056673e2 --- /dev/null +++ b/files/es/web/html/atributos/minlength/index.html @@ -0,0 +1,71 @@ +--- +title: 'HTML el atributo: minlength' +slug: Web/HTML/Atributos/minlength +tags: + - Entrada + - Input + - Referencia + - atributo + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +<p class="summary">El atributo <strong><code>minlength</code></strong> define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <strong><code><input></code></strong> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.</p> + +<p>El <strong><code><input></code></strong> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo <code>true</code>. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Al agregar <code>minlength="5"</code>, el valor debe estar vacío o tener cinco caracteres o más para ser válido.</p> + +<pre class="brush: html notranslate"><label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit"></pre> + +<p>Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea <code>null</code> (vacío) o tenga cinco o más caracteres. <em>Lima</em> no es válido, <em>limón es válido</em>.</p> + +<pre class="brush: css notranslate">input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +}</pre> + +<p>{{EmbedLiveSample('Ejemplos', '100%', 200)}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}</td> + <td>{{Spec2('HTML5.1')}}</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.attribute.minlength")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}</li> + <li>{{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}</li> + <li>{{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}</li> +</ul> diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/atributos/multiple/index.html new file mode 100644 index 0000000000..cbf465b0b8 --- /dev/null +++ b/files/es/web/html/atributos/multiple/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTML el atributo: multiple' +slug: Web/HTML/Atributos/multiple +tags: + - Atributos + - Resticción de validación + - atributo +translation_of: Web/HTML/Attributes/multiple +--- +<p>El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.</p> + +<p>Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo <code>file</code>, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo <code>file</code> dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.</p> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.</p> + +<pre class="brush: html notranslate"><code class="brush: html"><input type="email" <strong>multiple</strong> name="emails" id="emails"></code></pre> + +<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.</p> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic).</p> + +<pre class="brush: html notranslate"><code class="brush: html"><input type="file" <strong>multiple</strong> name="uploads" id="uploads"></code></pre> + +<p>Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.</p> + +<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.</p> + +<pre class="brush: html notranslate"><select multiple name="drawfs" id="drawfs"> + <option>Gruñón</option> + <option>Feliz</option> + <option>Dormilón</option> + <option>Tímido</option> + <option>Estornudo</option> + <option>Tontín</option> + <option>Doc</option> +</select></pre> + +<p>Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="input_para_correoᵉ"><code>input</code> para correoᵉ</h3> + +<pre class="brush: html notranslate"><label for="emails">¿A quién deseas enviar un correo electrónico?</label> +<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64"> + +<datalist id="drawfemails"> + <option value="gruñón@woodworkers.com">Gruñón</option> + <option value="feliz@woodworkers.com">Feliz</option> + <option value="dormilón@woodworkers.com">Dormilón</option> + <option value="tímido@woodworkers.com">Tímido</option> + <option value="estornudo@woodworkers.com">Estornudo</option> + <option value="tontín@woodworkers.com">Tontín</option> + <option value="doc@woodworkers.com">Doc</option> +</datalist></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre> +</div> + +<p>Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.</p> + +<p>Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.</p> + +<p>{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}</p> + +<h3 id="input_de_tipo_file"><code>input</code> de tipo <code>file</code></h3> + +<p>Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <p> + <label for="uploads"> + Elige las imágenes que deseas cargar: + </label> + <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple> + </p> + <p> + <label for="text">Elige un archivo de texto para cargar: </label> + <input type="file" id="text" name="text" accept=".txt"> + </p> + <p> + <input type="submit" value="Enviar"> + </p> +</form></pre> + +<p>{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}</p> + +<p>Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin <code>file</code>.</p> + +<p>Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como <code>?uploads=img1.jpg&uploads=img2.svg</code>. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el <code>post</code>. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.</p> + +<h3 id="select"><code>select</code></h3> + +<p>El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.</p> + +<pre class="brush: html notranslate"><form method="get" action="#"> +<p> + <label for="dwarfs">Selecciona los leñadores que te gusten:</label> + <select multiple name="drawfs" id="drawfs"> + <option>gruñón@woodworkers.com</option> + <option>feliz@woodworkers.com</option> + <option>dormilón@woodworkers.com</option> + <option>tímido@woodworkers.com</option> + <option>estornudo@woodworkers.com</option> + <option>tontín@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <label for="favoriteOnly">Selecciona tu favorito:</label> + <select name="favoriteOnly" id="favoriteOnly"> + <option>gruñón@woodworkers.com</option> + <option>feliz@woodworkers.com</option> + <option>dormilón@woodworkers.com</option> + <option>tímido@woodworkers.com</option> + <option>estornudo@woodworkers.com</option> + <option>tontín@woodworkers.com</option> + <option>doc@woodworkers.com</option> + </select> +</p> +<p> + <input type="submit" value="Enviar"> +</p> +</form></pre> + +<p>{{EmbedLiveSample("select", 600, 120) }}</p> + +<p>Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.</p> + +<pre class="brush: css notranslate">/* descomenta este CSS para que el multiple tenga la misma altura que single */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</pre> + +<p>Hay varias formas de seleccionar varias opciones en un elemento <code><select></code> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas <kbd>Ctrl</kbd>, <kbd>Comando</kbd> o <kbd>Mayús</kbd> y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <code><select></code>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando <kbd>Arriba</kbd> y <kbd>Teclas del cursor hacia abajo</kbd> para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando <kbd>Espacio</kbd>, pero el soporte varía entre los navegadores.</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#attr-input-multiple', 'Atributo multiple')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2> + +<p>Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".</p> + +<p>Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}<code>="1"</code> en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un <code>select</code>, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{HTMLElement('input')}}</li> + <li>{{htmlelement('select')}}</li> + <li>{{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}</li> +</ul> |