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