Atributos de entrada HTML
Atributos de entrada HTML
El valor Atributo
El atributo de valor especifica el valor inicial para un campo de entrada:
Ejemplo
<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
El atributo de solo lectura
El atributo readonly especifica que el campo de entrada es de solo lectura (no se puede cambiar):
Ejemplo
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
El atributo deshabilitado
El atributo deshabilitado especifica que el campo de entrada está deshabilitado.
Un campo de entrada deshabilitado no se puede usar y no se puede hacer clic, y su valor no se enviará al enviar el formulario:
Ejemplo
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
El atributo de tamaño
El atributo de tamaño especifica el tamaño (en caracteres) para el campo de entrada:
Ejemplo
<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>
El atributo maxlength
El atributo maxlength especifica la longitud máxima permitida para el campo de entrada:
Ejemplo
<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>
Con un atributo maxlength, el campo de entrada no aceptará más que el número permitido de caracteres.
El atributo maxlength no proporciona ningún comentario. Si desea alertar al usuario, debe escribir el código JavaScript.
Nota: las restricciones de entrada no son infalibles, y JavaScript proporciona muchas formas de agregar entradas ilegales. Para restringir la entrada de forma segura, también debe ser verificado por el receptor (el servidor).
Atributos HTML5
HTML5 agregó los siguientes atributos para <input>:
- autocompletar
- enfoque automático
- formar
- formaction
- formenctype
- método de formulario
- formnovalidate
- forma del objetivo
- alto y ancho
- lista
- min y max
- múltiple
- patrón (regexp)
- marcador de posición
- necesario
- paso
y los siguientes atributos para <form>:
- autocompletar
- no validar
El atributo autocompletar
El atributo autocompletar especifica si un formulario o campo de entrada debe tener autocompletar activado o desactivado.
Cuando la función autocompletar está activada, el navegador completa automáticamente los valores de entrada según los valores que el usuario haya ingresado anteriormente.
Consejo: Es posible tener "autocompletar" para el formulario y "desactivar" para campos de entrada específicos, o viceversa.
El atributo autocompletar funciona con <form> y los siguientes <input> tipos: texto, búsqueda, url, tel, correo electrónico, contraseña, fechadores, rango y color.
Ejemplo
Un formulario HTML con autocompletar activado (y desactivado para un campo de entrada):
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
Sugerencia: en algunos navegadores, puede necesitar activar la función de autocompletar para que esto funcione.
El atributo no validado
El atributo novalidate es un atributo <form>.
Cuando está presente, novalidate especifica que los datos del formulario no se deben validar cuando se envíen.
Ejemplo
Indica que el formulario no debe validarse en el envío:
<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
El atributo autofoco
El atributo autofoco especifica que el campo de entrada debe enfocarse automáticamente cuando se carga la página.
Ejemplo
Deje que el campo de entrada "Primer nombre" se enfoque automáticamente cuando se carga la página:
First name:<input type="text" name="fname" autofocus>
El formulario Atributo
El atributo de formulario especifica uno o más formularios a los que pertenece un elemento <input>.
Consejo: Para hacer referencia a más de un formulario, use una lista de identificadores de formulario separados por espacios.
Ejemplo
Un campo de entrada ubicado fuera del formulario HTML (pero sigue siendo una parte del formulario):
<form action="/action_page.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">
El atributo de formacion
El atributo de formacion especifica la URL de un archivo que procesa el control de entrada cuando se envía el formulario.
El atributo de formacin anula el atributo de accin del elemento <form>.
El atributo de formacion se usa con type = "submit" y type = "image".
Ejemplo
Un formulario HTML con dos botones de envío, con diferentes acciones:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php"
value="Submit as admin">
</form>
El atributo formenctype
El atributo formenctype especifica cómo deben codificarse los datos del formulario cuando se envían (solo para los formularios con method = "post").
El atributo formenctype anula el atributo enctype del elemento <form>.
El atributo formenctype se usa con type = "submit" y type = "image".
Ejemplo
Envíe datos de formulario codificados por defecto (el primer botón de envío) y codificados como "multipart / form-data" (el segundo botón de envío):
<form action="/action_page_binary.asp" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
El método de formulario Atributo
El atributo formmethod define el método HTTP para enviar datos de formulario a la URL de acción.
El atributo formmethod anula el atributo de método del elemento <form>.
El atributo formmethod se puede usar con type = "submit" y type = "image".
Ejemplo
El segundo botón de enviar reemplaza el método HTTP del formulario:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
<input type="submit" formmethod="post"formaction="action_page_post.asp"
value="Submit using POST">
</form>
El atributo formnovalidate
El atributo formnovalidate anula el atributo novalidate del elemento <form>.
El atributo formnovalidate se puede usar con type = "submit".
Ejemplo
Un formulario con dos botones de envío (con y sin validación):
<form action="/action_page.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
El atributo formtarget
El atributo formtarget especifica un nombre o una palabra clave que indica dónde mostrar la respuesta que se recibe después de enviar el formulario.
El atributo formtarget anula el atributo de destino del elemento <form>.
El atributo formtarget se puede usar con type = "submit" y type = "image".
Ejemplo
Un formulario con dos botones de envío, con diferentes ventanas de destino:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
</form>
Los atributos de alto y ancho
Los atributos alto y ancho especifican el alto y el ancho de un elemento <input type = "image">.
Siempre especifique el tamaño de las imágenes. Si el navegador no conoce el tamaño, la página parpadeará mientras se cargan las imágenes.
Ejemplo
Defina una imagen como el botón Enviar, con atributos de altura y ancho:
<input type="image" src="img_submit.gif" alt="Submit" width="48"height="48">
La lista Atributo
El atributo list se refiere a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.
Ejemplo
Un elemento <input> con valores predefinidos en un <datalist>:
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Los atributos mínimo y máximo
El min y max atributos especificar los valores mínimo y máximo para un elemento <input>.
Los atributos mínimo y máximo funcionan con los siguientes tipos de entrada: número, rango, fecha, fecha-hora-local, mes, hora y semana.
Ejemplo
<input> elementos con valores mínimo y máximo:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
El Atributo múltiple
El atributo múltiple especifica que el usuario puede ingresar más de un valor en el elemento <input>.
El atributo múltiple funciona con los siguientes tipos de entrada: correo electrónico y archivo.
Ejemplo
Un campo de carga de archivos que acepta valores múltiples:
Select images: <input type="file" name="img" multiple>
El patrón Atributo
El atributo de patrón especifica una expresión regular con la que se compara el valor del elemento <input>.
El atributo de patrón funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.
Ejemplo
Un campo de entrada que puede contener solo tres letras (sin números ni caracteres especiales):
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
El marcador de posición Atributo
El atributo marcador de posición especifica una sugerencia que describe el valor esperado de un campo de entrada (un valor de muestra o una breve descripción del formato).
La sugerencia se muestra en el campo de entrada antes de que el usuario ingrese un valor.
El atributo marcador de posición funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico y contraseña.
Ejemplo
Un campo de entrada con un texto de marcador de posición:
<input type="text" name="fname" placeholder="First name">
El atributo requerido
El atributo requerido especifica que se debe completar un campo de entrada antes de enviar el formulario.
El atributo requerido funciona con los siguientes tipos de entrada: texto, búsqueda, url, teléfono, correo electrónico, contraseña, selector de fecha, número, casilla de verificación, radio y archivo.
Ejemplo
Un campo de entrada requerido:
Username: <input type="text" name="usrname" required>
El paso Atributo
El atributo step especifica los intervalos numéricos legales para un elemento <input>.
Ejemplo: si paso = "3", los números legales podrían ser -3, 0, 3, 6, etc.
Consejo: El atributo step se puede usar junto con los atributos max y min para crear un rango de valores legales.
El atributo de paso funciona con los siguientes tipos de entrada: número, rango, fecha, fecha-hora-local, mes, hora y semana.
Ejemplo
Un campo de entrada con un número específico de intervalos legales:
<input type="number" name="points" step="3">
Ponte a prueba con ejercicios!
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...