Atributos de Entrada HTML para Funcionalidad Mejorada
Ya sabemos cómo construir formularios con campos de entrada 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, orientando a los usuarios sobre el tipo de dato esperado. Útil para ofrecer contexto o instrucciones antes de que los usuarios ingresen datos.
<input type="text" placeholder="Enter your email" />
Name
name especifica el nombre del campo de entrada, utilizado para identificar los datos al enviar el formulario. Cada campo de entrada dentro de un formulario debe tener un atributo name ú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 al cargar la página.
<input type="tel" value="+1 (484) 298-9732" />
Requerido
required especifica que el campo de entrada debe completarse antes de enviar el formulario. Impide el envío del formulario si el campo requerido está vacío.
<input type="password" required />
Deshabilitado
disabled deshabilita el campo de entrada, impidiendo que los usuarios interactúen con él o ingresen datos. Útil para mostrar campos de entrada solo lectura o inactivos.
<input type="text" value="New York" disabled />
Solo lectura
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 reciba foco y sea seleccionado.
<input type="text" value="USA" readonly />
Mínimo y Máximo
min y max especifican los valores mínimo y máximo permitidos para los campos de entrada numéricos. Útil para aplicar 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.
index.html
Tutorial en video
1. ¿Qué atributo proporciona un texto de ejemplo o sugerencia dentro de un campo de entrada, orientando a los usuarios sobre el tipo de dato esperado?
2. ¿Qué atributo especifica el nombre del campo de entrada, utilizado para identificar los datos al enviar el formulario?
3. ¿Qué atributo impide el envío del formulario si el campo obligatorio queda vacío?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Can you explain the difference between the disabled and readonly attributes?
What happens if I don't set a name attribute for an input field in a form?
Can you give more examples of using min and max with different input types?
Awesome!
Completion rate improved to 3.13Atributos de Entrada HTML para Funcionalidad Mejorada
Desliza para mostrar el menú
Ya sabemos cómo construir formularios con campos de entrada 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, orientando a los usuarios sobre el tipo de dato esperado. Útil para ofrecer contexto o instrucciones antes de que los usuarios ingresen datos.
<input type="text" placeholder="Enter your email" />
Name
name especifica el nombre del campo de entrada, utilizado para identificar los datos al enviar el formulario. Cada campo de entrada dentro de un formulario debe tener un atributo name ú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 al cargar la página.
<input type="tel" value="+1 (484) 298-9732" />
Requerido
required especifica que el campo de entrada debe completarse antes de enviar el formulario. Impide el envío del formulario si el campo requerido está vacío.
<input type="password" required />
Deshabilitado
disabled deshabilita el campo de entrada, impidiendo que los usuarios interactúen con él o ingresen datos. Útil para mostrar campos de entrada solo lectura o inactivos.
<input type="text" value="New York" disabled />
Solo lectura
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 reciba foco y sea seleccionado.
<input type="text" value="USA" readonly />
Mínimo y Máximo
min y max especifican los valores mínimo y máximo permitidos para los campos de entrada numéricos. Útil para aplicar 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.
index.html
Tutorial en video
1. ¿Qué atributo proporciona un texto de ejemplo o sugerencia dentro de un campo de entrada, orientando a los usuarios sobre el tipo de dato esperado?
2. ¿Qué atributo especifica el nombre del campo de entrada, utilizado para identificar los datos al enviar el formulario?
3. ¿Qué atributo impide el envío del formulario si el campo obligatorio queda vacío?
¡Gracias por tus comentarios!
