Elementos Semánticos en HTML
- El valor Atributo
- El atributo de lectura
- El atributo discapacitado
- El tamaño Atributo
- El Atributo de longitud máxima
- Min y max Atributos
- El atributo múltiple
- El patrón Atributo
- El atributo marcador
- El Atributo requerido
- El paso Atributo
- El autoenfoque Atributo
- La altura y anchura Atributos
- El atributo List
- El atributo autocomplete
El valor Atributo
El atributo value en HTML se utiliza para definir el valor de un elemento de entrada.
Este atributo es fundamental en campos como <input> y
<textarea>, ya que especifica qué información se enviará al servidor cuando se
envíe el formulario. Por ejemplo, en un campo de texto, el atributo value representa el
contenido inicial que se mostrará en el campo.
Ejemplo
En este ejemplo, el campo de entrada de texto tiene un valor predeterminado de "Hola Mundo".
Código del ejemplo
<input type="text" value="Hola Mundo">
...
El atributo de lectura
El atributo readonly se utiliza en campos de entrada y áreas de texto para hacer que el
usuario no pueda modificar el contenido. Esto es útil en situaciones donde deseas mostrar
información que no debe ser editada, como resultados de cálculos o datos que provienen de otras
fuentes. Los campos marcados con este atributo aún se pueden seleccionar y copiar.
Ejemplo
En este ejemplo, el campo de entrada de texto es de solo lectura y contiene el texto "Información no editable".
Código del ejemplo
<input type="text" value="Información no editable" readonly>
El atributo discapacitado
El atributo disabled se utiliza para deshabilitar un elemento de entrada, lo que impide
que el usuario interactúe con él. Los campos deshabilitados no se envían con el formulario y no
pueden ser seleccionados o editados. Este atributo es útil cuando se desea mostrar un campo que no
está disponible para el usuario en ciertas condiciones.
Ejemplo
En este ejemplo, el campo de entrada de texto está deshabilitado y muestra el texto "Campo deshabilitado".
Código del ejemplo
<input type="text" value="Campo deshabilitado" disabled>
El tamaño Atributo
El atributo size define el ancho visible de un campo de entrada de texto. Se especifica
en número de caracteres, lo que significa que el tamaño del campo se ajustará en función de la
cantidad de texto que puede mostrar a la vez. Este atributo es útil para mejorar la presentación de
formularios y garantizar que los usuarios puedan ver suficiente contenido.
Ejemplo
En este ejemplo, el campo de entrada de texto tiene un tamaño de 30 caracteres.
Código del ejemplo
<input type="text" value="Campo de entrada" size="30">
El Atributo de longitud máxima
El atributo maxlength especifica el número máximo de caracteres que un usuario puede
ingresar en un campo de entrada. Este atributo es útil para limitar la entrada de datos y asegurar
que los usuarios no excedan la longitud deseada, evitando errores en el procesamiento de datos.
Ejemplo
En este ejemplo, el campo de entrada permite un máximo de 10 caracteres.
Código del ejemplo
<input type="text" value="Texto" maxlength="10">
Min y max Atributos
Los atributos min y max se utilizan para definir límites en campos de
entrada de tipo numérico, así como en campos de fecha. El atributo min establece el
valor mínimo permitido y el atributo max establece el valor máximo. Esto es útil para
validar datos y asegurar que se encuentren dentro de un rango específico.
Ejemplo
En este ejemplo, el campo de entrada permite valores numéricos entre 1 y 10.
Código del ejemplo
<input type="number" min="1" max="10" value="5">
El atributo múltiple
El atributo multiple permite seleccionar múltiples opciones en elementos de entrada,
como campos de selección de archivos o listas desplegables. Cuando se aplica a un campo de tipo
file, permite seleccionar varios archivos a la vez.
Ejemplo
En este ejemplo, el campo de selección de archivos permite seleccionar múltiples archivos.
Código del ejemplo
<input type="file" multiple>
El patrón Atributo
El atributo pattern define una expresión regular que el valor del campo debe cumplir
para ser válido. Es útil para validar el formato de entrada, como un número de teléfono o un código
postal.
Ejemplo
En este ejemplo, el campo de texto solo aceptará valores numéricos de cinco dígitos.
Código del ejemplo
<input type="text" pattern="[0-9]{5}" placeholder="Ingrese 5 dígitos">
El atributo marcador
El atributo placeholder muestra un texto sugerido dentro del campo de entrada que
desaparece cuando el usuario empieza a escribir. Este texto es útil para dar pistas sobre el formato
o contenido esperado.
Ejemplo
En este ejemplo, el campo de texto muestra "Ingrese su nombre" como marcador.
Código del ejemplo
<input type="text" placeholder="Ingrese su nombre">
El Atributo requerido
El atributo required indica que un campo es obligatorio y debe ser completado antes de
enviar el formulario. Se aplica a campos de texto, selección y otros tipos de entrada.
Ejemplo
En este ejemplo, el campo de texto es obligatorio.
Código del ejemplo
<input type="text" required placeholder="Este campo es obligatorio">
El paso Atributo
El atributo step se utiliza para definir los incrementos de valor permitidos en un campo
de tipo numérico, como en un campo de número o rango. Es útil para establecer pasos específicos,
como unidades enteras o decimales.
Ejemplo
En este ejemplo, el campo de número permite seleccionar incrementos de 0.5.
Código del ejemplo
<input type="number" step="0.5" placeholder="Incrementos de 0.5">
El autoenfoque Atributo
El atributo autofocus permite que un campo de entrada reciba automáticamente el enfoque
al cargar la página, haciendo que el cursor esté listo para ingresar datos.
Ejemplo
En este ejemplo, el campo de texto tiene el enfoque automático.
Código del ejemplo
<input type="text" autofocus placeholder="Este campo tiene autoenfoque">
La altura y anchura Atributos
Los atributos height y width especifican la altura y el ancho de los
elementos, generalmente aplicados a imágenes y videos. Estos valores pueden definirse en píxeles.
Ejemplo
En este ejemplo, la imagen tiene una altura y un ancho definidos.
Código del ejemplo
<img src="https://via.placeholder.com/150" height="100" width="150" alt="Ejemplo de altura y anchura">
El atributo List
El atributo list permite asociar un campo de entrada con una lista de opciones
predefinidas, facilitando la selección de valores por parte del usuario. Utiliza el elemento
datalist para definir las opciones.
Ejemplo
En este ejemplo, el campo de texto tiene una lista de opciones sugeridas.
Código del ejemplo
<input type="text" list="opciones" placeholder="Seleccione una opción">
<datalist id="opciones">
<option value="Opción 1">
<option value="Opción 2">
<option value="Opción 3">
</datalist>
El atributo autocomplete
El atributo autocomplete controla si el navegador sugiere o completa automáticamente
valores previamente ingresados en campos similares. Puede configurarse en "on" para activar la
función o en "off" para desactivarla.
Ejemplo
En este ejemplo, el campo de texto tiene el autocompletado activado.
Código del ejemplo
<input type="text" autocomplete="on" placeholder="Ingrese su información">
| Atributo | Referencia | Descripción |
|---|---|---|
| El valor Atributo | value | Define el valor predeterminado de un elemento de entrada. |
| El atributo de lectura | readonly | Indica que un campo de entrada no puede ser modificado por el usuario. |
| El atributo discapacitado | disabled | Desactiva un elemento de entrada, impidiendo que el usuario interactúe con él. |
| El tamaño Atributo | size | Especifica el ancho visible de un campo de entrada en caracteres. |
| El Atributo de longitud máxima | maxlength | Define el número máximo de caracteres que el usuario puede ingresar. |
| Min y max Atributos | min, max | Especifica los valores mínimos y máximos que un campo de entrada puede aceptar. |
| El atributo múltiple | multiple | Permite seleccionar múltiples opciones en un campo de entrada. |
| El patrón Atributo | pattern | Especifica una expresión regular que el valor del campo debe coincidir. |
| El atributo marcador | placeholder | Proporciona una pista o guía al usuario sobre qué ingresar en el campo. |
| El Atributo requerido | required | Indica que el campo debe ser completado antes de enviar el formulario. |
| El paso Atributo | step | Especifica el intervalo entre los valores permitidos en un campo numérico. |
| El autoenfoque Atributo | autofocus | Permite que un campo de entrada reciba automáticamente el enfoque al cargar la página. |
| La altura y anchura Atributos | height, width | Especifica la altura y el ancho de un elemento de entrada, como un área de texto. |
| El atributo List | list | Asocia un elemento de entrada con un conjunto de opciones predefinidas. |
| El atributo autocomplete | autocomplete | Indica si el navegador debe autocompletar el campo basado en entradas anteriores. |
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias