Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Atributos para Elementos de Entrada | Tablas y Formularios
Conceptos básicos de HTML

book
Atributos para Elementos de Entrada

Ya sabemos cómo construir formularios con entradas y etiquetas. Ahora, consideremos otros atributos útiles para los elementos de entrada que mejoran su funcionalidad y usabilidad.

Atributos Comunes para Elementos de Entrada

Placeholder

placeholder proporciona un texto de ejemplo o sugerencia dentro del campo de entrada, guiando a los usuarios sobre qué tipo de entrada se espera. Útil para proporcionar contexto o instrucciones a los usuarios antes de que ingresen datos.

<input type="text" placeholder="Enter your email" />

Name

name especifica el nombre del campo de entrada, que se utiliza para identificar los datos de entrada cuando se envía el formulario. Cada campo de entrada dentro de un formulario debe tener un atributo de nombre único.

<input type="text" name="username" />

Value

value establece el valor inicial o predeterminado del campo de entrada. Prellena el campo de entrada con un valor específico cuando se carga la página.

<input type="tel" value="+1 (484) 298-9732" />

Required

required especifica que el campo de entrada debe completarse antes de que se pueda enviar el formulario. Evita el envío del formulario si el campo requerido está vacío.

<input type="password" required />

Disabled

disabled deshabilita el campo de entrada, impidiendo que los usuarios interactúen con él o ingresen datos. Útil para mostrar campos de entrada de solo lectura o inactivos.

<input type="text" value="New York" disabled />

Readonly

readonly hace que el campo de entrada sea de solo lectura, permitiendo a los usuarios ver el valor pero no modificarlo. Similar al atributo disabled, pero aún permite que el campo sea enfocado y seleccionado.

<input type="text" value="USA" readonly />

Min y Max

min y max especifican los valores mínimos y máximos permitidos para los campos de entrada numéricos. Útil para imponer restricciones en la entrada numérica, como edad o cantidad.

<input type="number" min="21" max="99" />

Ejemplo: Consideremos un ejemplo que incluye todos los atributos y elementos necesarios para el formulario.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Attributes for Input Elements</title>
<meta charset="UTF-8" />
</head>
<body>
<form onsubmit="return false">
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email" required><br>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<label for="phone-number">Phone number:</label>
<input type="tel" id="phone-number" name="phone-number" value="+1 (484) 298-9732"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" value="New York" disabled><br>
<label for="country">Country:</label>
<input type="text" id="country" name="country" value="USA" readonly><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="21" max="99"><br>
<button type="submit">Send Form</button>
</form>
</body>
</html>

Tutorial en Video

1. ¿Qué atributo proporciona un texto de sugerencia o ejemplo dentro de un campo de entrada, guiando a los usuarios sobre qué tipo de entrada se espera?

2. ¿Qué atributo especifica el nombre del campo de entrada, que se utiliza para identificar los datos de entrada cuando se envía el formulario?

3. ¿Qué atributo impide el envío del formulario si el campo requerido se deja vacío?

question mark

¿Qué atributo proporciona un texto de sugerencia o ejemplo dentro de un campo de entrada, guiando a los usuarios sobre qué tipo de entrada se espera?

Selecciona la respuesta correcta

question mark

¿Qué atributo especifica el nombre del campo de entrada, que se utiliza para identificar los datos de entrada cuando se envía el formulario?

Selecciona la respuesta correcta

question mark

¿Qué atributo impide el envío del formulario si el campo requerido se deja vacío?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 7
some-alt