Formulario HTML y elementos de entrada

Si bien la mayoría de los demás elementos HTML se utilizan para presentar información en su página, un formulario HTML se utiliza para recopilar información de sus usuarios.

La mayoría de los sitios web modernos interactuarán con sus usuarios a través de formularios. Por ejemplo, deberá tener un formulario que permita a los usuarios realizar pedidos, enviarle un mensaje o realizar un seguimiento de sus pedidos.

¿Cómo funciona un formulario?

El formulario en sí no procesa la entrada. Solo recopila información del usuario y envía la información al servidor web.

Para procesar la información de un formulario, deberá utilizar la programación del lado del servidor, como CGI, Perl, ASP, PHP. Para ASP.NET, HTML Se pueden usar formularios, pero hay mejores opciones para interactuar con los usuarios (ASP.NET los temas se tratan en su propia serie de tutoriales).

La siguiente proceso interactivo tiene lugar cuando un usuario accede a una página que contiene un formulario:

1. El visitante llena en el formulario y envía
2. El navegador envía los datos del formulario enviado al servidor web
3. Un procesador de formularios se está ejecutando en el procesos del servidor web los datos del formulario
4. A página de respuesta se envía de vuelta en HTML al navegador

Elemento de formulario

Un formulario puede contener elementos de entrada de tipo como cuadros de texto, casillas de verificación, botones de radio, botones de envío y más. Un formulario también puede contener listas de selección, áreas de texto, conjuntos de campos, leyendas y elementos de etiquetas. Un comienzo y un final <form> La etiqueta se utiliza para crear un formulario.

<form>
    ... input elements ...
</form>

Hay varios atributos que puede asignar al elemento de formulario. Sin embargo, el único atributo requerido es action. El action El atributo apunta al script del lado del servidor que maneja el envío del formulario. Otro atributo opcional que se usa comúnmente es method.

asignas el method atribuir a cualquiera GET o POST. Si utiliza GET método, los valores de envío del formulario se pasan como parte del URL (Cadena de consulta).

Si esto es POSTla información se envía al servidor como parte del cuerpo de datos y no será visible en el cuadro de URL en el navegador del usuario. Si no especifica el método, GET se utiliza de forma predeterminada. Aquí hay un ejemplo.

<form action="cgi-bin/form.pl" method="post">
    ... input elements ...
</form>

Ahora que tiene su formulario, necesita agregar elementos de entrada. Como se discutió anteriormente, los elementos de entrada incluyen cuadros de texto, casillas de verificación, radio y botones.

Elemento de entrada

El <input /> elemento se utiliza para recopilar información. Un elemento de entrada puede variar de muchas maneras, según el atributo de tipo. Un elemento de entrada puede ser de tipo text, checkbox, password, radio, resety submit.

Aquí están algunas ejemplos:

<form action="formaction.asp" method="post">
    textbox1: <input type="text" name="textbox1"/><br />
    textbox2: <input type="text" name="textbox2" />
</form>

textbox1: 
textbox2: 

<form action="formaction.asp" method="post">
    Password: <input type="password" name="pwd1"/><br />
</form>

Password: 

<form action="formaction.asp" method="post">
    <input type="radio" name="answer" value="yes" />Yes<br />
    <input type="radio" name="answer" value="no" />No
</form>

 Yes
 No

<form action="formaction.asp" method="post">
    <input type="checkbox" name="color" value="a" />A<br />
    <input type="checkbox" name="color" value="b" />B<br />
    <input type="checkbox" name="color" value="c" />C
</form>

 A
 B
 C

<form action="formaction.asp" method="post">
    Name: <input type="text" name="textbox1"/> <input type="submit" value="Submit" />
</form>

Name:  

A botón de enviar se utiliza para enviar datos de formulario al servidor web. Los datos se envían a la página especificada en el formulario action atributo. La página de acción ejecutará el código contra los datos y devolverá los resultados al usuario.

<form action="formaction.asp" method="post">
    Name: <input type="text" name="textbox1" value="Type your name" />
    <input type="submit" value="Submit" /> <input type="reset" value="Reset" />
</form>

Name: