Los formularios se definen mediante el elemento form. Todos los elementos dentro de form pertenecen entonces al formulario en cuestión.
<form> ... </form>
El atributo action se espera en la introducción <form>. Se utiliza para especificar lo que debe suceder con los datos del formulario. Por lo general, se trata de una aplicación PHP.
<form method="post" action="form.php"> ... </form>
Asegúrese de que el archivo especificado se puede encontrar realmente. Por lo tanto, debe establecer la ruta correcta.
También puede introducir una dirección de correo electrónico en lugar de un script.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> ... </form>
En este caso, los datos del formulario se envían por correo electrónico. Por supuesto, esto no es elegante, por lo que casi siempre se utiliza la variante script. Sin embargo, si no tienes un script a mano, también puedes enviar el formulario por correo electrónico si es necesario.
Otro atributo importante para el elemento formulario es method. Se utiliza para definir el método de transmisión HTTP para enviar el contenido del formulario. Existen dos variantes diferentes.
- post = Los datos del formulario se transmiten a la dirección especificada en dos pasos. En primer lugar, el navegador se pone en contacto con la dirección especificada. Si esto tiene éxito, los datos del formulario se transfieren al script.
- get = Con este método, los datos del formulario se añaden al final de la URL asignada al atributo action. De este modo, los datos del formulario también pueden verse en la barra de direcciones del navegador.
Naturalmente, se plantea la cuestión de cuál de estas dos variantes debe utilizarse para enviar los datos del formulario. En principio, se pueden utilizar ambas. Sin embargo, especialmente cuando se trata de grandes cantidades de datos y de subir archivos al servidor, debería utilizar post.
Campos de formulario simples
Hasta ahora, sólo se ha definido el marco exterior del formulario. Sin embargo, el formulario en sí todavía no es visible en el navegador.
<form method="post" action="form.php"> ... </form>
Ahora es el momento de llenar el formulario con contenido/vida.
El tipo de campo requerido con más frecuencia es probablemente un campo de entrada de una sola línea. Se utilizan, por ejemplo, para consultar apellidos, nombres y direcciones de correo electrónico. Los campos de entrada de una sola línea se definen del siguiente modo
<input type="text" name="firstname" />
La combinación atributo-valor type= "text" se asigna al elemento input. También debe asignar a cada campo de entrada un identificador interno. Este identificador debe ser único en el documento. Es especialmente interesante cuando se trata de procesar los datos del formulario mediante un script. No utilice espacios ni caracteres especiales en el identificador.
Si observa el resultado en el navegador, verá la siguiente imagen:
Todavía no tiene un aspecto especialmente espectacular. Pero si hace clic en el campo de texto, se dará cuenta de que ya puede hacer entradas allí.
Para que los visitantes sepan qué introducir en el campo, falta por supuesto una etiqueta.
Nombre: <input type="text" name="firstname" />
También en este caso, una mirada en el navegador proporciona el resultado deseado.
Puede utilizar el atributo size para determinar el ancho del campo.
Nombre: <input type="text" name="firstname" size="30" /> <br /> Código postal: <input type="text" name="plz" size="5" />
El ancho de campo deseado se asigna al atributo size.
Aquí, 5 corresponde exactamente a cinco caracteres. El atributo maxlength también es interesante en este contexto. En efecto, especifica el número máximo de caracteres que pueden introducirse en el campo. He aquí otro ejemplo:
Nombre: <input type="text" name="firstname" size="30" maxlength="40" />
Si el valor especificado para maxlength es mayor que el valor especificado para size, el campo se desplaza automáticamente para entradas más largas.
Puede utilizar el atributo value para predefinir un campo.
Nombre: <input type="text" name="firstname" value="Tu nombre" />
El valor asignado debe considerarse como una preasignación de campo.
Los usuarios pueden eliminar este valor predeterminado.
También puede impedir que se borren valores de los campos. Esto implica definir un campo de entrada que ya no es un campo de entrada en el verdadero sentido de la palabra. De hecho, estos campos se utilizan a menudo para las salidas. Esto podría ser interesante, por ejemplo, para mostrar valores determinados por un script. Piense, por ejemplo, en una calculadora. Sin embargo, también puede preasignar manualmente un campo con un texto que ya no pueda ser modificado por los visitantes. (Nota: Lamentablemente, el signo euro no se muestra correctamente en la vista PDF).
<input name="precio" type="text" value="€ 699.-" sólo lectura />
Para establecer un campo como de sólo lectura, asígnele el atributo readonly. De nuevo, observe el resultado:
El texto predefinido puede verse directamente. Sin embargo, no se puede borrar.
Definir campos de contraseña
Por supuesto que conoce los campos de contraseña. Siempre que se registra, tiene que introducir una contraseña. (Normalmente, incluso hay que introducirla dos veces).
Los datos introducidos en el campo de entrada no son visibles, sino que el navegador los sustituye automáticamente por asteriscos/puntos. La ventaja de esta variante es que las personas que puedan estar mirando por encima de tu hombro cuando introduces la contraseña no pueden descifrarla. Sin embargo, es un error pensar que los campos de contraseña son automáticamente seguros. De hecho, con HTTP normal, las contraseñas se transmiten en texto plano cuando se envía el formulario.
Los campos de contraseña se definen de la siguiente manera:
<input type="password" name="password" />
Al atributo type se le asigna el valor password. De nuevo, eche un vistazo al resultado.
Si escribe algo ahí, el navegador lo hará irreconocible a medida que escribe.
