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