Enlaces HTML
Los enlaces HTML se definen con la <a>etiqueta:
El destino del enlace se especifica en el href [Link] atributos se utilizan para
proporcionar información adicional sobre los elementos HTML.
Imágenes HTML
Las imágenes HTML se definen con la <img> etiqueta. El archivo fuente (src), el
texto alternativo (alt), width y height se proporcionan como atributos:
Cómo ver el código fuente HTML
Ver código fuente HTML:
Haga clic en CTRL + U en una página HTML, o haga clic derecho en la página y
seleccione "Ver código fuente de la página".Esto abrirá una nueva pestaña que
contiene el código fuente HTML de la página.
Inspeccionar un elemento HTML:
Haga clic derecho en un elemento (o en un área en blanco) y elija "Inspeccionar"
para ver de qué elementos están compuestos (verá tanto el HTML como el
CSS).También puede editar HTML o CSS sobre la marcha en el panel Elementos o
Estilos que se abre.
Atributos HTML
El atributo href
La <a>etiqueta define un hipervínculo. El hrefatributo especifica la URL de la página
a la que va el enlace:
Saltos de línea HTML
El elemento HTML<br>define un salto de línea. Úselo <br>si desea un salto de línea
(una nueva línea) sin comenzar un nuevo párrafo:
Solución: el elemento HTML <pre>
El elemento HTML <pre>define texto preformateado.
El texto dentro de un <pre>elemento se muestra en una fuente de ancho fijo
(normalmente Courier) y conserva tanto los espacios como los saltos de línea:
Elementos de formato HTML
Los elementos de formato se diseñaron para mostrar tipos especiales de texto:
•<b>- Texto en negrita
•<strong>- Texto importante
•<i>- Texto en cursiva
•<em>- Texto enfatizado
•<mark>- Texto marcado
•<small>- Texto más pequeño
•<del>- Texto eliminado
•<ins>- Texto insertado
•<sub>- Texto subíndice
•<sup>- Texto en superíndice
HTML <cite> para el título del trabajo
La <cite>etiqueta HTML define el título de una obra creativa (por ejemplo, un libro,
un poema, una canción, una película, un cuadro, una escultura, etc.).
Nota:El nombre de una persona no es el título de una obra.
El texto del <cite>elemento normalmente se muestra en cursiva.
Etiqueta de comentario HTML
Puede agregar comentarios a su fuente HTML utilizando la siguiente sintaxis:
<!-- Write your comments here -->
Enlaces HTML: el atributo de destino
De forma predeterminada, la página vinculada se mostrará en la ventana actual del
navegador. Para cambiar esto, debe especificar otro destino para el enlace.
El target atributo especifica dónde abrir el documento vinculado. El target
atributo puede tener uno de los siguientes valores:
•_self- Por defecto. Abre el documento en la misma ventana/pestaña en la
que se hizo clic.
•_blank- Abre el documento en una nueva ventana o pestaña.
•_parent- Abre el documento en el marco principal.
•_top- Abre el documento en el cuerpo completo de la ventana.
Botón como enlace
Para utilizar un botón HTML como enlace, debe agregar algún código
[Link] le permite especificar qué sucede en ciertos eventos, como
hacer clic en un botón:
Sintaxis de imágenes HTML
La <img>etiqueta HTML se utiliza para incrustar una imagen en una página web.
Técnicamente, las imágenes no se insertan en una página web; Las imágenes están
vinculadas a páginas web. La<img>etiqueta crea un espacio de retención para la
imagen a la que se hace referencia. La <img>etiqueta está vacía, contiene solo
atributos y no tiene una etiqueta de cierre. La <img>etiqueta tiene dos atributos
obligatorios:
•src: especifica la ruta a la imagen.
•alt: especifica un texto alternativo para la imagen.
Sintaxis
<img src="url" alt="alternatetext">
Alternativamente, puede utilizar los atributos widthy :height
Ejemplo
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
El <title>elemento agrega un título a su página:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>
Tablas HTML
Definir una tabla HTML
Una tabla en HTML consta de celdas de tabla dentro de filas y columnas.
Ejemplo
Una tabla HTML simple:
Celdas de tabla
Cada celda de la tabla está definida por una etiqueta <td>y una </td>.
Td significa datos de tabla.
Todo lo que está entre <td> y </td>es el contenido de la celda de la tabla.
Filas de la tabla
Cada fila de la tabla comienza con una <tr>y termina con una </tr>etiqueta.
tr significa fila de tabla.
Encabezados de tabla
A veces desea que sus celdas sean celdas de encabezado de tabla. En esos casos
utilice la <th>etiqueta en lugar de la <td>etiqueta: th significa encabezado de
tabla.
Listas HTML
Lista HTML desordenada
Una lista desordenada comienza con la <ul>etiqueta. Cada elemento de la lista
comienza con la <li>etiqueta. Los elementos de la lista estarán marcados con
viñetas (pequeños círculos negros) de forma predeterminada:
Lista HTML ordenada
Una lista ordenada comienza con la <ol>etiqueta. Cada elemento de la lista
comienza con la <li>etiqueta. Los elementos de la lista estarán marcados con
números de forma predeterminada:
Listas de descripción HTML
HTML también admite listas de descripciones.
Una lista de descripción es una lista de términos, con una descripción de cada
término. La <dl>etiqueta define la lista de descripción, la <dt>etiqueta define el
término (nombre) y la <dd> etiqueta describe cada término:
Bloque HTML y elementos
en línea
Cada elemento HTML tiene un valor de visualización predeterminado, según el
tipo de elemento que [Link] dos valores de visualización más comunes son
bloque y en línea.
Elementos a nivel de bloque
Un elemento a nivel de bloque siempre comienza en una nueva línea y los
navegadores agregan automáticamente algo de espacio (un margen) antes y
después del elemento. Un elemento a nivel de bloque siempre ocupa todo el ancho
disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).
Dos elementos de bloque comúnmente utilizados son:<p> y <div>.
El <p>elemento define un párrafo en un documento HTML.
El <div>elemento define una división o una sección en un documento HTML.
El elemento <p> es un elemento a nivel de bloque.
El elemento <div> es un elemento a nivel de bloque.
El elemento <div>
El <div>elemento se utiliza a menudo como contenedor para otros elementos HTML.
El <div>elemento no tiene atributos obligatorios, pero style y class son id
comunes. Cuando se usa junto con CSS, el <div>elemento se puede usar para
diseñar bloques de contenido:
El elemento <span>
El <span>elemento es un contenedor en línea que se utiliza para marcar una parte
de un texto o una parte de un documento. El <span>elemento no tiene atributos
obligatorios, pero style y class son id comunes. Cuando se usa junto con CSS, el
<span>elemento se puede usar para diseñar partes del texto:
Resumen del capítulo
•Un elemento a nivel de bloque siempre comienza en una nueva línea y ocupa
todo el ancho disponible
•Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho
necesario
•El <div>elemento es a nivel de bloque y a menudo se usa como contenedor
para otros elementos HTML.
•El <span>elemento es un contenedor en línea que se utiliza para marcar una
parte de un texto o una parte de un documento.
Atributo de clase HTML
❮ AnteriorPróximo ❯
El atributo HTML classse utiliza para especificar una clase para un elemento
HTML.
Varios elementos HTML pueden compartir la misma clase.
Usando el atributo de clase
El class atributo se utiliza a menudo para señalar el nombre de una clase en una
hoja de estilo. También puede ser utilizado por JavaScript para acceder y manipular
elementos con el nombre de clase específico. En el siguiente ejemplo tenemos tres
<div>elementos con un class atributo con el valor de "ciudad". Los tres <div>
elementos tendrán el mismo estilo según [Link] definición de estilo en la sección
principal:
Múltiples clases
Los elementos HTML pueden pertenecer a más de una clase. Para definir varias
clases, separe los nombres de las clases con un espacio, por ejemplo, <div
class="city main">. El estilo del elemento se diseñará de acuerdo con todas las
clases especificadas. En el siguiente ejemplo, el primer <h2>elemento pertenece
tanto a la city clase como a la main clase, y obtendrá los estilos CSS de ambas
clases:
Usando el atributo de identificación
El id atributo especifica una identificación única para un elemento HTML. El valor
del id atributo debe ser único dentro del documento HTML.
El id atributo se utiliza para señalar una declaración de estilo específica en una hoja
de estilo. JavaScript también lo utiliza para acceder y manipular el elemento con la
identificación específica. La sintaxis de id es: escriba un carácter almohadilla (#),
seguido de un nombre de id. Luego, defina las propiedades CSS entre llaves {}. En
el siguiente ejemplo tenemos un <h1> elemento que apunta al nombre de
identificación "myHeader". Este <h1> elemento tendrá estilo de acuerdo con la
#myHeader definición de estilo en la sección principal:
Diferencia entre clase e identificación
Un nombre de clase puede ser usado por múltiples elementos HTML, mientras que
un nombre de identificación solo debe ser usado por un elemento HTML dentro de la
página:
Marcadores HTML con ID y enlaces
Los marcadores HTML se utilizan para permitir a los lectores saltar a partes
específicas de una página web.
Los marcadores pueden resultar útiles si su página es muy larga.
Para utilizar un marcador, primero debe crearlo y luego agregarle un enlace.
Luego, cuando se hace clic en el enlace, la página se desplazará hasta la ubicación
con el marcador.
HTML: el elemento principal
El <head>elemento HTML es un contenedor para los siguientes elementos:
<title>,<style>,<meta>,<link>,<script> y <base>.
El elemento HTML <head>
El <head>elemento es un contenedor de metadatos (datos sobre datos) y se coloca
entre la <html>etiqueta y la <body>etiqueta. Los metadatos HTML son datos sobre el
documento HTML. Los metadatos no se muestran. Los metadatos suelen definir el
título del documento, el juego de caracteres, los estilos, los scripts y otra
metainformación.
El elemento HTML <título>
El <title>elemento define el título del documento. El título debe ser solo texto y se
muestra en la barra de título del navegador o en la pestaña de la página.¡ El
<title>elemento es obligatorio en documentos HTML! ¡El contenido del título de
una página es muy importante para la optimización de motores de búsqueda
(SEO)! Los algoritmos de los motores de búsqueda utilizan el título de la página para
decidir el orden al enumerar las páginas en los resultados de búsqueda.
El <title>elemento:
•define un título en la barra de herramientas del navegador
•proporciona un título para la página cuando se agrega a favoritos
•muestra un título para la página en los resultados del motor de búsqueda
Por lo tanto, ¡intenta que el título sea lo más preciso y significativo posible!
Un documento HTML simple:
El elemento HTML <estilo>
El <style>elemento se utiliza para definir información de estilo para una única
página HTML:
El elemento HTML <meta>
El <meta>elemento se utiliza normalmente para especificar el juego de caracteres, la
descripción de la página, las palabras clave, el autor del documento y la
configuración de la ventana gráfica. Los metadatos no se mostrarán en la página,
pero los utilizarán los navegadores (cómo mostrar el contenido o recargar la página),
los motores de búsqueda (palabras clave) y otros servicios web.
Ejemplos
Defina el juego de caracteres utilizado:
<meta charset="UTF-8">
Definir palabras clave para motores de búsqueda:
<meta name="keywords" content="HTML, CSS, JavaScript">
Defina una descripción de su página web:
<meta name="description" content="Free Web tutorials">
Definir el autor de una página:
<meta name="author" content="John Doe">
Actualizar el documento cada 30 segundos:
<meta http-equiv="refresh" content="30">
Configurar la ventana gráfica para que su sitio web se vea bien en todos
los dispositivos:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Ejemplo de <meta> etiquetas:
Configuración de la ventana gráfica
La ventana gráfica es el área visible para el usuario de una página web. Varía según
el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una
computadora.
Debes incluir el siguiente <meta> elemento en todas tus páginas web:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la
escala de la página.
La width=device-width parte establece el ancho de la página para seguir el ancho
de la pantalla del dispositivo (que variará según el dispositivo).
La initial-scale=1.0parte establece el nivel de zoom inicial cuando el navegador
carga la página por primera vez.A continuación se muestra un ejemplo de una
página web sin la metaetiqueta de ventana gráfica y la misma página web con la
metaetiqueta de ventana gráfica:
El elemento HTML <script>
El <script>elemento se utiliza para definir JavaScripts del lado del cliente.
El siguiente JavaScript escribe "¡Hola JavaScript!" en un elemento HTML con
id="demo":
El elemento HTML <base>
El <base>elemento especifica la URL base y/o el destino de todas las URL relativas
de una página.
La <base>etiqueta debe tener presente un atributo href o target, o ambos.
¡Solo puede haber un único <base> elemento en un documento!
Resumen del capítulo
•El <head>elemento es un contenedor de metadatos (datos sobre datos)
•El <head>elemento se coloca entre la <html> etiqueta y la <body>etiqueta.
•El <title>elemento es obligatorio y define el título del documento.
•El <style>elemento se utiliza para definir información de estilo para un solo
documento.
•La <link> etiqueta se utiliza con mayor frecuencia para vincular a hojas de
estilo externas.
•El <meta>elemento se utiliza normalmente para especificar el juego de
caracteres, la descripción de la página, las palabras clave, el autor del
documento y la configuración de la ventana gráfica.
•El <script>elemento se utiliza para definir JavaScripts del lado del cliente.
•El <base>elemento especifica la URL base y/o el destino de todas las URL
relativas de una página.
El <kbd>elemento define la entrada del teclado.
•El <samp>elemento define la salida de muestra de un programa de
computadora.
•El <code>elemento define un fragmento de código informático.
•El <var>elemento define una variable en programación o en una expresión
matemática.
•El <pre>elemento define texto preformateado.
Elementos semánticos HTML
Elementos semánticos = elementos con significado.
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente su significado tanto para el navegador
como para el desarrollador.
Ejemplos de elementos no semánticos:<div> y <span>- No dice nada sobre su
contenido.
Ejemplos de elementos semánticos:<form>,<table>, y <article>- Define
claramente su contenido.
Elementos semánticos en HTML
Muchos sitios web contienen código HTML como: <div id="nav"> <div
class="header"> <div id="footer"> para indicar navegación, encabezado y pie de
página. En HTML existen algunos elementos semánticos que se pueden utilizar para
definir diferentes partes de una página web:
• <artículo>
• <aparte>
• <detalles>
• <título de figura>
• <figura>
• <pie de página>
• <encabezado>
• <principal>
• <marca>
• <nav>
• <sección>
• <resumen>
• <hora>
Elemento HTML <sección>
El <section>elemento define una sección en un documento. Según la
documentación HTML del W3C: "Una sección es una agrupación temática de
contenido, normalmente con un encabezado".
Ejemplos de dónde <section>se puede utilizar un elemento:
•Capítulos
•Introducción
•Noticias
•Información del contacto
Normalmente, una página web se puede dividir en secciones para introducción,
contenido e información de contacto.
Elemento HTML <artículo>
El <article>elemento especifica contenido independiente y autónomo.
Un artículo debe tener sentido por sí solo y debe ser posible distribuirlo
independientemente del resto del sitio web.
Ejemplos de dónde <article>se puede utilizar el elemento:
•Publicaciones del foro
•Publicaciones de blog
•Comentarios del usuario
•Tarjetas de producto
•Artículos del periódico
Elemento HTML <nav>
El <nav>elemento define un conjunto de enlaces de navegación.
Formularios HTML
El elemento <formulario>
El elemento HTML <form>se utiliza para crear un formulario HTML para la entrada
del usuario:
<form>
.
form elements
.
</form>
El <form>elemento es un contenedor para diferentes tipos de elementos de entrada,
como: campos de texto, casillas de verificación, botones de opción, botones de
envío, etc. Todos los diferentes elementos del formulario se tratan en este
capítulo:Elementos del formulario HTML.
Campos de texto
Define <input type="text">un campo de entrada de una sola línea para entrada
de texto.
Así es como se mostrará el código HTML anterior en un navegador:
Nombre de pila:
Apellido:
El elemento <etiqueta>
Observe el uso del <label>elemento en el ejemplo anterior.
La <label>etiqueta define una etiqueta para muchos elementos del formulario. El
<label>elemento es útil para los usuarios de lectores de pantalla, porque el lector
de pantalla leerá la etiqueta en voz alta cuando el usuario se centre en el elemento
de entrada. El <label>elemento también ayuda a los usuarios que tienen
dificultades para hacer clic en regiones muy pequeñas (como botones de opción o
casillas de verificación), porque cuando el usuario hace clic en el texto dentro del
<label>elemento, alterna el botón de opción/casilla de verificación. El for atributo
de la <label>etiqueta debe ser igual al id atributo del <input> elemento para
unirlos.
Botones de radio
El <input type="radio">define un botón de [Link] botones de opción permiten
al usuario seleccionar UNA de un número limitado de opciones.
Casillas de verificación
El <input type="checkbox">define una casilla de verificación. Las casillas de
verificación permiten al usuario seleccionar CERO o MÁS opciones de un número
limitado de opciones.
El botón Enviar
Define <input type="submit">un botón para enviar los datos del formulario a un
controlador de formulario. El controlador de formulario suele ser un archivo en el
servidor con un script para procesar los datos de entrada. El controlador de
formulario se especifica en el action atributo del formulario.
El atributo de nombre para <entrada>
Observe que cada campo de entrada debe tener un name atributo para ser enviado.
Si name se omite el atributo, el valor del campo de entrada no se enviará en
absoluto.
Los elementos HTML <formulario>
El <form>elemento HTML puede contener uno o más de los siguientes elementos de
formulario:
•<input>
•<label>
•<select>
•<textarea>
•<button>
•<fieldset>
•<legend>
•<datalist>
•<output>
•<option>
•<optgroup>
El elemento <entrada>
Uno de los elementos de formulario más utilizados es el <input>elemento.
El <input>elemento se puede mostrar de varias formas, según el type atributo.
El elemento <etiqueta>
El <label>elemento define una etiqueta para varios elementos del formulario. El
<label>elemento es útil para los usuarios de lectores de pantalla, porque el lector
de pantalla leerá la etiqueta en voz alta cuando el usuario se concentre en el
elemento de entrada.
El <label>elemento también ayuda a los usuarios que tienen dificultades para hacer
clic en regiones muy pequeñas (como botones de opción o casillas de verificación),
porque cuando el usuario hace clic en el texto dentro del <label>elemento, alterna
el botón de opción/casilla de verificación. El for atributo de la <label>etiqueta
debe ser igual al id atributo del <input> elemento para unirlos.
El elemento <seleccionar>
El <select>elemento define una lista desplegable:
Valores visibles:
Utilice el size atributo para especificar el número de valores visibles:
Permitir selecciones múltiples:
Utilice el multiple atributo para permitir al usuario seleccionar más de un valor:
El elemento <textarea>
El <textarea> elemento define un campo de entrada de varias líneas (un área de
texto):
El elemento <botón>
El <button> elemento define un botón en el que se puede hacer clic:
Los
elementos <fieldset> y <legend>
El <fieldset>elemento se utiliza para agrupar datos relacionados en un formulario.
El <legend>elemento define un título para el <fieldset> elemento.
Tipos de entrada HTML
Estos son los diferentes tipos de entrada que puedes usar en HTML:
•<input type="button">
•<input type="checkbox">
•<input type="color">
•<input type="date">
•<input type="datetime-local">
•<input type="email">
•<input type="file">
•<input type="hidden">
•<input type="image">
•<input type="month">
•<input type="number">
•<input type="password">
•<input type="radio">
•<input type="range">
•<input type="reset">
•<input type="search">
•<input type="submit">
•<input type="tel">
•<input type="text">
•<input type="time">
•<input type="url">
•<input type="week">
Texto de tipo de entrada
<input type="text">define un campo de entrada de texto de una sola línea :
Tipo de entrada Contraseña
<input type="password">define un campo de contraseña:
Tipo de entrada Enviar
<input type="submit">define un botón para enviar datos de formulario a un
controlador de formulario. El controlador de formulario suele ser una página de
servidor con un script para procesar datos de entrada. El controlador de formulario
se especifica en el action atributo del formulario:
<input type="reset">define un botón de reinicio que restablecerá todos los
valores del formulario a sus valores predeterminados:
Tipo de entrada Radio
<input type="radio">define un botón de opción. Los botones de opción
permiten al usuario seleccionar SÓLO UNA de un número limitado de opciones:
Casilla de verificación de tipo de
entrada
<input type="checkbox">define una casilla de verificación. Las casillas de
verificación permiten al usuario seleccionar CERO o MÁS opciones de un número
limitado de opciones.
Botón de tipo de entrada
<input type="button">define un botón
Tipo de entrada Color
Se <input type="color">utiliza para campos de entrada que deben contener un
color. Dependiendo de la compatibilidad del navegador, puede aparecer un selector
de color en el campo de entrada.
Tipo de entrada Fecha
Se <input type="date">utiliza para campos de entrada que deben contener una
fecha. Dependiendo de la compatibilidad del navegador, puede aparecer un selector
de fecha en el campo de [Link]én puedes usar los atributos min y maxpara
agregar restricciones a las fechas:
Tipo de entrada Fecha y hora local
Especifica <input type="datetime-local">un campo de entrada de fecha y hora,
sin zona horaria. Dependiendo de la compatibilidad del navegador, puede aparecer
un selector de fecha en el campo de entrada.
Tipo de entrada Correo electrónico
Se <input type="email">utiliza para campos de entrada que deben contener una
dirección de correo electrónico. Dependiendo de la compatibilidad del navegador, la
dirección de correo electrónico se puede validar automáticamente cuando se envía.
Algunos teléfonos inteligentes reconocen el tipo de correo electrónico y agregan
".com" al teclado para que coincida con la entrada del correo electrónico.
Imagen de tipo de entrada
Define <input type="image">una imagen como un botón de envío.
La ruta a la imagen se especifica en el src atributo.
Archivo de tipo de entrada
Define <input type="file">un campo de selección de archivos y un botón
"Examinar" para cargar archivos.
Tipo de entrada oculto
Define <input type="hidden">un campo de entrada oculto (no visible para el
usuario). Un campo oculto permite a los desarrolladores web incluir datos que los
usuarios no pueden ver ni modificar cuando se envía un formulario. Un campo oculto
a menudo almacena qué registro de la base de datos debe actualizarse cuando se
envía el formulario.
Nota:Si bien el valor no se muestra al usuario en el contenido de la página, es
visible (y se puede editar) utilizando las herramientas de desarrollo de cualquier
navegador o la función "Ver código fuente". ¡No utilice entradas ocultas como forma
de seguridad!
Tipo de entrada Mes
El <input type="month">permite al usuario seleccionar un mes y año. Dependiendo
de la compatibilidad del navegador, puede aparecer un selector de fecha en el
campo de entrada.
Número de tipo de entrada
El <input type="number">define un campo de entrada numérico. También puede
establecer restricciones sobre los números que se aceptan. El siguiente ejemplo
muestra un campo de entrada numérico, donde puede ingresar un valor del 1 al 5:
Rango de tipo de entrada
Define <input type="range">un control para ingresar un número cuyo valor exacto
no es importante (como un control deslizante). El rango predeterminado es de 0 a
100. Sin embargo, puede establecer restricciones sobre qué números se aceptan con
los atributos min, maxy :step
Búsqueda de tipo de entrada
Se <input type="search">utiliza para campos de búsqueda (un campo de
búsqueda se comporta como un campo de texto normal).
Tipo de entrada Tel.
Se <input type="tel">utiliza para campos de entrada que deben contener un
número de teléfono.
Tipo de entrada Hora
El <input type="time">permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de
hora en el campo de entrada.
URL de tipo de entrada
Se input type="url">utiliza para campos de entrada que deben contener una
dirección URL. Dependiendo de la compatibilidad del navegador, el campo URL se
puede validar automáticamente cuando se envía. Algunos teléfonos inteligentes
reconocen el tipo de URL y agregan ".com" al teclado para que coincida con la
entrada de la URL.
Tipo de entrada Semana
El <input type="week">permite al usuario seleccionar una semana y un año.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de
fecha en el campo de entrada.
Atributos de entrada HTML
El value atributo de entrada especifica un valor inicial para un campo de entrada:
El atributo de solo lectura
El readonly atributo de entrada especifica que un campo de entrada es de solo
lectura. Un campo de entrada de solo lectura no se puede modificar (sin embargo,
un usuario puede acceder a él, resaltarlo y copiar el texto).
¡El valor de un campo de entrada de solo lectura se enviará al enviar el formulario!
El atributo discapacitado
El disabled atributo de entrada especifica que un campo de entrada debe estar
deshabilitado. Un campo de entrada deshabilitado no se puede utilizar y no se
puede hacer clic en él.
¡El valor de un campo de entrada deshabilitado no se enviará al enviar el formulario!
El atributo de tamaño
El size atributo de entrada especifica el ancho visible, en caracteres, de un campo
de entrada. El valor predeterminado size es 20. Nota:El size atributo funciona
con los siguientes tipos de entrada: texto, búsqueda, tel, url, correo electrónico y
contraseña.
El atributo longitud máxima
El maxlength atributo de entrada especifica el número máximo de caracteres
permitidos en un campo de entrada. Nota:Cuando se establece a maxlength, el
campo de entrada no aceptará más que el número de caracteres especificado. Sin
embargo, este atributo no proporciona ninguna información. Entonces, si desea
alertar al usuario, debe escribir código JavaScript.
Los atributos mínimo y máximo
La entrada miny max los atributos especifican los valores mínimo y máximo para un
campo de entrada. Los atributos min y max funcionan con los siguientes tipos de
entrada: número, rango, fecha, fecha y hora local, mes, hora y semana.
Consejo:utilice los atributos máximo y mínimo juntos para crear un rango de
valores legales.
El atributo múltiple
El multiple atributo de entrada especifica que el usuario puede ingresar más de un
valor en un campo de entrada. El multiple atributo funciona con los siguientes
tipos de entrada: correo electrónico y archivo.
El atributo del patrón
El pattern atributo de entrada especifica una expresión regular con la que se
compara el valor del campo de entrada cuando se envía el formulario. El pattern
atributo funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, URL,
teléfono, correo electrónico y contraseña.
El atributo de marcador de posición
El placeholder atributo de entrada especifica una breve sugerencia que describe el
valor esperado de un campo de entrada (un valor de muestra o una breve
descripción del formato esperado). La breve sugerencia se muestra en el campo de
entrada antes de que el usuario ingrese un valor. El placeholder atributo funciona
con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo
electrónico y contraseña.
El atributo requerido
El required atributo de entrada especifica que se debe completar un campo de
entrada antes de enviar el formulario. El required atributo funciona con los
siguientes tipos de entrada: texto, búsqueda, URL, teléfono, correo electrónico,
contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.
El atributo de paso
El step atributo de entrada especifica los intervalos numéricos legales para un
campo de entrada.
Ejemplo: si paso="3", los números legales podrían ser -3, 0, 3, 6, etc.
Consejo:Este atributo se puede utilizar junto con los atributos máximo y mínimo
para crear un rango de valores legales.
El step atributo funciona con los siguientes tipos de entrada: número, rango, fecha,
fecha y hora local, mes, hora y semana.
El atributo de enfoque automático
El autofocus atributo de entrada especifica que un campo de entrada debe recibir
atención automáticamente cuando se carga la página.
Los atributos de alto y ancho.
La entrada height y widthlos atributos especifican la altura y el ancho de un
<input type="image">elemento.
El atributo de lista
El list atributo de entrada se refiere a un <datalist>elemento que contiene
opciones predefinidas para un elemento <input>.
El atributo de autocompletar
El autocomplete atributo de entrada especifica si un formulario o un campo de
entrada debe tener activado o desactivado el autocompletado. Autocompletar
permite al navegador predecir el valor. Cuando un usuario comienza a escribir en un
campo, el navegador debería mostrar opciones para completar el campo, según los
valores escritos anteriormente. El autocomplete atributo funciona con <form>los
siguientes <input>tipos: texto, búsqueda, URL, teléfono, correo electrónico,
contraseña, selectores de fecha, rango y color.