-
Cómo crear una página web con un formulario electrónico
-
La creación de una página Web que contiene un formulario HTML es una tarea común y una fácil de lograr. Hay muchos elementos posibles que se pueden incluir en un formulario de una página Web, y cuáles los que decide naturalmente relacionarse con su propósito en la creación de la forma. Cualquiera que sea la información que desea capturar, los pasos a seguir son generalmente similares. Cuando se crea el formulario, usted también tendrá que tener en cuenta lo que va a pasar con los datos capturados dentro de él.Instrucciones
1 Crea tu página Web utilizando la siguiente estructura general:
<Html>
<Head> </ head>
<Body>
<Div id = "formsection">
Formar contenido que ir aquí ...
</ Div>
</ Body>
</ Html>
Incluya cualquier otro artículo en su página como encabezados, imágenes y texto como sea necesario. El formulario se coloca dentro de la "<div>" en el cuerpo de la página, por lo que si va a añadir nada más, hacerlo fuera de este elemento.
2 Agregue su forma de esquema de la siguiente manera (en el denominado "<div>" sección):
<Form name = acción = método de "myform" "myform_handler.php" = "post">
Los elementos de entrada para ir aquí ...
</ Form>
Dependiendo de lo que planea hacer con los datos de las personas entran en su forma, es posible que desee para enviarlo a un script del lado del servidor como en este ejemplo. En este caso los datos se envían a un script llamado "myform_handler.php" que puede llevar a cabo el procesamiento, tales como confirmar los datos a una base de datos o tal vez el envío de un correo electrónico con los datos incluidos.
3 Incluir elementos de entrada dentro de su forma para adaptarse a los tipos de datos que desea capturar. Los siguientes son ejemplos de algunos de los tipos de elemento de entrada HTML se puede elegir entre:
<! - Radio Buttons ->
Botón de opción 1: <input type = "radio" nombre = valor "radiogroup" = "uno" />
Radio Botón 2: <input type = "radio" nombre = valor "radiogroup" = "dos" />
<! - Casilla ->
Casilla de verificación 1: <input type = "checkbox" name = "check1" = "IsChecked" />
<! - Despliegue ->
<Select name = "listselection">
<Option value = "item1"> Artículo 1 </ option>
<Option value = "elemento2"> Artículo 2 </ option>
<Option value = "elemento3"> Artículo 3 </ option>
</ Select>
<! - Entrada de texto ->
<textarea rows = "20" cols = nombre de "10" = "entrada de texto"> texto predeterminado que se muestra aquí. </ textarea>
4 Incluir un botón de envío en su forma de modo que cualquier dato introducido se pueden capturar:
<Input type = "submit" value = "Enviar" />
Cuando el usuario pulsa el botón de enviar, lo que ocurre dependerá de lo que haya incluido en su apertura "<form>" etiqueta. Si, como en este ejemplo, ha incluido el nombre de un script del lado del servidor dentro de atributo de "acción" de su forma, al pulsar el botón de enviar hará que todos los datos introducidos en el formulario para ser enviado allí. Como alternativa se puede optar por permanecer en la misma página cuando se envía el formulario, pero llamar a una función JavaScript para hacer lo que quiera con los datos.
5 Procesar los datos capturados de su formulario. Si va a enviar los datos del formulario a un script del lado del servidor, puede acceder a lo que se ha entrado allí, como en el siguiente ejemplo PHP ( "myform_handler.php" guardado en el mismo directorio que la página web):
<? Php
$ Radio_choice = $ _POST [ 'radiogroup'];
$ Check_choice = $ _POST [ ''] check1;
$ Select_choice = $ _POST [ 'listselection'];
$ Text_entered = $ _POST [ 'Entrada Texto'];
echo $ radio_choice "<br/>" $ check_choice "<br/>" $ select_choice "<br/>" $ text_entered......;
?>
Este ejemplo trivial, simplemente escribe los datos capturados a cabo en el navegador, pero es posible que desee para manejar los datos de otra forma, tales como escribir a una base de datos o enviando un correo electrónico en alguna parte. Sube tus archivos una vez que se hayan completado y poner a prueba su forma de navegar a la misma.
Consejos y advertencias
- Es posible que desee validar los datos introducidos antes de que el formulario puede ser presentado con éxito. Hay muchos recursos de JavaScript libres disponibles, por ejemplo para detectar si existen direcciones de correo electrónico válidas y prácticamente cualquier otro tipo de datos.
- Asegúrese de probar su formulario mediante la introducción de los datos y su presentación en diferentes navegadores web, como a veces estos elementos se ven y se comportan de manera diferente.
