Los formularios HTML son herramientas poderosas para interactuar con los usuarios; sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. En este capítulo, cubriremos todos los aspectos de los formularios HTML, desde la estructura hasta el estilo, desde el manejo de datos hasta los widgets personalizados.
Formulario: recopila diferentes tipos de datos de entrada del usuario y los envía al servidor para realizar la interacción de datos entre el usuario y el servidor.
La etiqueta del formulario declara el alcance de la recopilación de datos. Siempre que esté en el formulario, son los datos que se recopilarán.
Puede haber varias etiquetas de formulario en una página, y solo pueden estar en relación paralela y no pueden anidarse. Cuando los usuarios envían datos al servidor, solo pueden enviar datos de un formulario a la vez. Si desea enviar varios formularios, debe utilizar la interacción asincrónica en js.
elemento <formulario>
Los formularios HTML se utilizan para recopilar las entradas del usuario.
Formulario HTML de definición de elementos:
<form>.formelementos.</form>
1. Los formularios HTML contienen elementos de formulario.
Los elementos de formulario se refieren a diferentes tipos de elementos de entrada, casillas de verificación, botones de opción, botones de envío, etc.
(1) elemento <entrada>
El elemento <input> es el elemento de formulario más importante. El elemento <input> tiene muchas formas, según el atributo de tipo. Este es el tipo utilizado en este capítulo:
(2) Entrada de texto
<input type=text> define un campo de entrada de una sola línea para entrada de texto:
<!DOCTYPEhtml><html><body><form>Apellido:<br><inputtype=textname=firstname><br>Nombre:<br><inputtype=textname=lastname></form><p>Por favor tenga en cuenta que el formulario en sí es invisible. </p><p>Tenga en cuenta también que el ancho predeterminado de los campos de texto es de 20 caracteres. </p></body></html>
Los resultados presentados son los siguientes:
(3) Entrada del botón de radio
<input type=radio> define los botones de radio. Los botones de opción permiten al usuario seleccionar una de un número limitado de opciones:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Hombre<br><inputtype=radioname=sexvalue=2>Mujer</form></body></html>
Los resultados presentados son los siguientes:
(4) Botón Enviar
<input type=submit> define el botón utilizado para enviar el formulario al controlador de formulario. Un controlador de formulario suele ser una página de servidor que contiene scripts para procesar datos de entrada. El controlador del formulario se especifica en el atributo de acción del formulario:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Apellido:<br><inputtype=textname=firstnamevalue=李><br>Nombre:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Enviar></formulario><p>Si hace clic en Enviar, los datos del formulario se enviarán a una página denominada demo_form.ashx para su posterior procesamiento. </p></body></html>
Los resultados presentados son los siguientes:
2. Atributos del formulario:
(1) Atributo de acción
El atributo de acción define la acción que se realizará cuando se envíe el formulario. La forma habitual de enviar un formulario al servidor es utilizar un botón de envío. Normalmente, los formularios se envían a una página web en un servidor web. En el ejemplo anterior, se especifica un script de servidor para manejar el formulario enviado:
<formación=acción.php>
Si se omite el atributo de acción, la acción se establecerá en la página actual.
(2)Atributo del método
El atributo de método especifica el método HTTP (GET o POST) utilizado al enviar el formulario:
<formación=acción.phpmétodo=OBTENER>
o:
<formación=acción.phpmétodo=POST>
¿Cuándo utilizar GET?
Puede utilizar GET (el método predeterminado): si el envío del formulario es pasivo (como una consulta en un motor de búsqueda) y no hay información confidencial. Cuando usa GET, los datos del formulario son visibles en la barra de direcciones de la página:
action_page.php?firstname=Han&lastname=Meimei
Nota: GET es más adecuado para enviar pequeñas cantidades de datos. El navegador establecerá un límite de capacidad (255 caracteres).
¿Cuándo utilizar la publicación?
Debe utilizar POST: si el formulario actualiza datos o contiene información confidencial (como contraseñas). POST es más seguro porque los datos enviados en la barra de direcciones de la página son invisibles.
(3) Atributo de nombre
Cada campo de entrada debe tener un atributo de nombre establecido para que se envíe correctamente. Este ejemplo solo enviará el campo de entrada Apellido:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Apellido:<br><inputtype=textvalue=李><br>Nombre:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Enviar></formulario><p>Si hace clic en Enviar, los datos del formulario se enviarán a una página denominada demo_form.ashx. </p><p>El apellido no se enviará porque este elemento de entrada no tiene un atributo de nombre. </p></body></html>
Los resultados presentados son los siguientes:
3. Controles de formulario
Combinar datos del formulario con <fieldset>
El elemento <fieldset> combina datos relacionados en un formulario. El elemento <legend> define el título del elemento <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Información personal:</legend>Apellido:<br><inputtype=textname=firstnamevalue=Mickey><br > Nombre:<br><inputtype=textname=lastnamevalue=Ratón><br><br><inputtype=submitvalue=Enviar></fieldset></form></body></html>
Los formularios se utilizan para recopilar datos del usuario, que deben completarse en varios controles. Los controles HTML también se implementan mediante etiquetas, pero presentarán algunas apariencias especiales y tendrán algunas funciones interactivas.
Los formularios HTML pueden contener controles como se muestra en la siguiente tabla: