Web.HTML.Formularios.Atributos.
Existen muchos atributos o propiedades en las cuales se les puede dar más funcionalidades tanto a los formularios como sus campos.
Value.
Valor inicial o por defecto de los campos de un formulario.
<form action="">
Nombre:<br>
<input type="text" name="nombre" value="Ismael">
</form>Readonly.
Atributo que no permite modificar el contenido de un campo.
<input type="text" name="nombre" value="Ismael" readonly>Disabled.
Atributo que permite desactivar totalmente la entrada de datos en un campo, es decir, la entrada de texto es inutilizada.
<input type="text" name="nombre" value="Ismael" disabled>Size y Maxlength.
Son atributos especiales que sirve para controlar la longitud y tamaño de los campos.
<input type="text" name="nombre" value="John" size="40" maxlength="40">- Size. Longitud que alberga la parte física donde se mete el texto.
- Maxlength. Número máximo de caracteres que deja almacenar en el campo de texto.
Autocomplete.
Es un atributo que permite autorellenar los campos en función de los datos que se hayan introducido con anterioridad.
<form action="" autocomplete="on">
...
E-mail: <input type="email" name="emilio" autocomplete="off"><br>
<input type="submit" value="Enviar">
</form>Se puede aplicar tanto a un formulario entero como un sólo campo, como se ve en el ejemplo.
Novalidate.
Es un atributo que permite no validar los datos de un formulario cuando son enviados al servidor para su posterior control.
<form action="accion.php" novalidate>
...
</form>Autofocus.
Es un atributo que permite donde poner el enfoque cuando se carga la página.
Nombre:<input type="text" name="nombre" autofocus>Crear una Imagen de Enviar.
En vez de usar un botón para enviar los datos al servidor, se puede hacer con una imagen para que quede más vistoso y bonito.
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">Funciona exactamente igual que la etiqueta <img>.
- src. Indica la imagen o url donde se encuentra la imagen.
- alt. Texto que muestra cuando pasamos el ratón por encima de la imagen.
- width y height. Ancho y alto de la imagen respectivamente.
Multiple.
Es un atributo que sirve para enviar varios archivos a la vez al servidor.
<!DOCTYPE html>
<html>
<body> <form action="action_page.php">
Selecciona las imágenes: <input type="file" name="img" multiple>
<input type="submit" Value="Enviar imágenes>
</form></body>
</html>
Pattern.
Es un atributo que permite una expresión para controlar los datos que se meten en un campo.
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Debe introducir 3 letras">La expresión regular quiere decir:
- [A-Za-z ]. Sólo voy aceptar letras de la a-z, tanto mayúsculas como minúsculas.
- {3}. Cogidos de 3 en 3, es decir, sólo voy aceptar 3 letras.
- Title. El mensaje que mostrará cuando sea erróneo lo que se haya introducido.
Las expresiones regulares es algo bastante complejo. Ser verá un poco más adelante con JavaScript.
Placeholder.
Es un atributo que permite una pista o comentario indicando al usuario lo que debe introducir.
<!DOCTYPE html>
<html>
<body> <form action="accion.php">
<input type="text" name="nombre" placeholder="Nombre"><br>
<input type="text" name="apellidos" placeholder="Apellidos"><br>
<input type="submit" value="Enviar">
</form></body>
</html>
