Atributos de INPUTS en HTML

GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Atributos de INPUTS en HTML
El atributo “value”
El atributo value especifica el valor inicial para un campo de entrada
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<h2>Atributo “value”</h2>
<form action="/pagina_accion.php">
Nacionalidad <input type="text" name="nacionalidad" value="Venezolano">
<input type="submit" value="Enviar">
</form>
</body>
</html>
Código 129.html
El atributo “readonly”
El atributo readonly especifica que el campo de entrada es de sólo lectura (no se puede cambiar)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “readonly”</h2>
Nacionalidad <input type="text" name="nacionalidad" value="Venezolano" readonly>
</form>
</body>
</html>
Código 130.html
GERENCIA VIRTUAL
El atributo “disabled”
El atributo disabled especifica que el campo de entrada se desactiva. Un campo de entrada
desactivado es inservible y su valor no se enviará al presentar el formulario.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “disable”</h2>
Nacionalidad <input type="text" name="nacionalidad" value="Venezolano" disabled>
</form>
</body>
</html>
Código 131.html
El atributo “size”
El atributo size especifica el tamaño (en caracteres) para el campo de entrada.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “size”</h2>
Nacionalidad <input type="text" name="nacionalidad" value="Venezolano"
size="30">
</form>
</body>
</html>
Código 132.html
GERENCIA VIRTUAL
El atributo “maxlength”
El atributo maxlength especifica la longitud máxima permitida para el campo de entrada.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “maxlength”</h2>
Nacionalidad <input type="text" name="nacionalidad" value="Venezolano"
maxlength="10" >
</form>
</body>
</html>
Código 133.html
Los atributos de HTML5

HTML5 añade los siguientes atributos para <input>:
 autocomplete
 autofocus
 form
 formaction
 formenctype
 formmethod
 formnovalidate
 formtarget
 height and width
 list
 min and max
 multiple
 pattern (regexp)
 placeholder
 required
 step
y los siguientes atributos para <form>:
 autocomplete
 novalidate
GERENCIA VIRTUAL
El atributo “autocomplete”
El atributo autocomplete especifica si un campo de formulario o de entrada debe tener
autocompletar encendido o apagado. Cuando autocompletar está activado, el navegador
completa automáticamente los valores de entrada basado en valores que el usuario ha
introducido antes.
Consejo: Es posible tener autocompletar "on" para el formulario, y "off" para los campos de
entrada específicos, o viceversa. El atributo autocomplete trabaja con <form> y en los siguientes
tipos de <input>: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, datepickers,
rango y color. En algunos navegadores puede que tenga que activar la función de autocompletar
para que esto funcione.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “autocomplete”</h2>
<form action="/pagina_accion.php" autocomplete="on">
Apellido: <input type="text" name="apellido" value=""><br><br>
Nombre: <input type="text" name="nombre" value=""><br><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>
<p>Llene el formulario envíelo y luego recargue la página, en este caso están
activos los campos en el formulario pero email desactivado por campo.</p>
</body>
</html>
Código 134.html
El atributo “novalidate”
El atributo novalidate es un atributo de <form>. Cuando está presente, novalidate especifica
que los datos del formulario no deben ser validados.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “novalidate”</h2>
<form action="/pagina_accion.php" novalidate>
E-mail: <input type="email" name="email"><br>
</form>
</body>
</html>
Código 135.html
GERENCIA VIRTUAL
El atributo “autofocus”
El atributo autofocus especifica que el input señalado de forma automática debe obtener el foco
cuando se carga la página.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “autofocus”</h2>
Apellido: <input type="text" name="apellido" value="" autofocus><br><br>
</form>
</body>
</html>
Código 136.html
El atributo “form”
El atributo form especifica una o más formas a la que un elemento <input> pertenece.
Consejo: Para referirse a más de una forma, usar una lista separada por espacios de forma ids.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “form”</h2>
<form action="/pagina_accion.php" id="form1">
</form>
<p>El campo E-mail no está dentro de la forma pero pertenece a ella, con este
atributo podemos colocar campos en distintos lugares de la página, no solo
dentro del formulario como tal.</p>
E-mail: <input type="email" name="email" form="form1">
</body>
</html>
Código 137.html
GERENCIA VIRTUAL
El atributo “formAction”
El atributo formAction especifica la dirección URL de un archivo que va a procesar los datos
cuando se envía el formulario. El atributo formAction anula el atributo de acción del
elemento <form>. El atributo formAction se utiliza con type="submit" y type="image".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “formAction”</h2>
E-mail: <input type="email" name="email"><br><br>
<input type="submit" value="Enviar"><br>
<input type="submit" formaction="/ pagina_accion2.php"
value="Enviar como administrador">
</form>
</body>
</html>
Código 138.html
El atributo “formenctype”
El atributo formenctype especifica cómo los datos del formulario deben ser (sólo para las formas
con method = "post"). El atributo formenctype anula el atributo enctype del elemento <form>. El
atributo formenctype se utiliza con type="submit" y type="image".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “formenctype”</h2>
<form action="/pagina_accion.php" method="post">
<input type="submit" formenctype="multipart/form-data"
value="Enviar como Multipart/form-data sin codificación">
</form>
<p><strong>Nota:</strong>El atributo formenctype de la etiqueta input no es
soportado por IE9 y versiones anteriores.</p>
</body>
</html>
Código 139.html
GERENCIA VIRTUAL
El atributo “formmethod”
El atributo formmethod define el método HTTP para enviar form-data a la URL de acción.
El atributo formmethod anula el atributo del método del elemento <form>. El
atributo formmethod se puede utilizar con type="submit" y type="image".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “formmethod”</h2>
<form action="/pagina_accion.php" method="get">
<input type="submit" value="Enviar usando GET"><br>
<input type="submit" formmethod="post" value="Enviar usando POST">
</form>
<p><strong>Nota:</strong>Con un botón enviamos con método GET y con el otro con
método POST.</p>
</body>
</html>
Código 140.html
El atributo “formnovalidate”
El atributo formnovalidate anula el atributo novalidate del <form> elemento. El
atributo formnovalidate se puede utilizar con type="submit".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “formnovalidate”</h2>
<input type="submit" value="Enviar"><br><br>
<input type="submit" formnovalidate value="Enviar sin validación">
</form>
<p><strong>Nota:</strong>Con un botón enviamos con validación y con el otro sin
validación.</p>
</body>
</html>
Código 141.html
GERENCIA VIRTUAL
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 utilizar con type="submit" y
type="image".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “formtarget”</h2>
<input type="submit" value="Enviar normal"><br><br>
<input type="submit" formtarget="_blank" value="Enviar a nueva ventana"><br><br>
</form>
</body>
</html>
Código 142.html
El atributo “pattern”
El atributo pattern especifica una expresión regular que el valor del elemento <input> compara.
El atributo pattern trabaja con los siguientes tipos de entrada: texto, búsqueda, URL, teléfono,
correo electrónico y contraseña.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “pattern”</h2>
Codigo de País (3 letras): <input type="text" name="cod_pais" pattern="[A-Za-
z]{3}"><br><br>
</form>
</body>
</html>
Código 143.html
GERENCIA VIRTUAL
El marcador de posición Atributo

El atributo placeholder especifica una muestra del valor esperado de un campo de entrada (un
valor que muestra o una breve descripción del formato). El contenido de la muestra aparece en el
campo de entrada antes de que el usuario introduzca un valor.
El atributo placeholder trabaja con los siguientes tipos de entrada: texto, búsqueda, URL,
teléfono, correo electrónico y contraseña.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “placeholder”</h2>
E-mail:<input type="email" name="email" placeholder="ejemplo@ejemplo.com"><br><br>
<input type="submit" value="Enviar"></form>
</body>
</html>
Código 144.html
El atributo “required”
El atributo required especifica que un campo de entrada debe ser completado antes de enviar el
formulario, de lo contrario no se ejecutará. El atributo required trabaja con los siguientes tipos de
entrada: texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha,
número, casillas de verificación, de radio y de archivo.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “required”</h2>
E-mail:<input type="email" name="email" placeholder=ejemplo@ejemplo.com
required><br><br>
</body>
</html>
Código 145.html
GERENCIA VIRTUAL
El atributo “step”
El atributo step especifica los intervalos de números legales para un elemento <input>.
Ejemplo: Si definimos step = "3", números legales podrían ser -3, 0, 3, 6, etc. El atributo step
trabaja con los siguientes tipos de entrada: número, rango, fecha, fecha y hora local, el mes, el
tiempo y la semana.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Atributo “step”</h2>
Puntaje:<input type="number" name="puntos" step="4"><br><br>
<p><strong>Note:</strong>El atributo step no es soportado por IE9 y versiones
anteriores.</p>
</body>
</html>
Código 146.html

Atributos de INPUTS en HTML

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Atributos de INPUTS en HTML

Caricato da

Copyright:

Formati disponibili

GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Atributos de INPUTS en HTML

Los atributos de HTML5

y los siguientes atributos para <form>:

El marcador de posición Atributo

Potrebbero piacerti anche