Los formularios html nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro site. Los formularios html están compuestos por campos de texto y botones.
Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento.
Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación.
El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios.
Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc.
Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: <form action=”dirección completa del archivo que la gestionará” …> </form>. Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.
Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.
Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www…………?nombre1=valor1&nombre2=valor2
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.
Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario HTML.
La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype=”text/plain”).
Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico:
Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características.
La caja de texto básica se escribiría de la siguiente forma:
Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.
Mira el siguiente código:
Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él.
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:
En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente:
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:
También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cómo quedaría nuestro código:
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del tren.
Por último está el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la siguiente manera:
Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.
A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediante la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión:
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
Para enviar la información, el formulario necesita de un botón que le indique que el formulario ha concluido y que pueden enviar la información.
Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:
Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la información. Para ello es muy útil el botón para borrar la información.
El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”.
El ejemplo sencillo de este botón tendría el siguiente código:
El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestión de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que hacen es comunicar cierta información al servidor sobre cómo tratar los datos manteniéndose ocultos a la vista de los usuarios.
Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en html, sólo en las que empleen también otro tipo de lenguajes.
Aquí podemos ver el código de un ejemplo:
El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto en otros artículos del tutorial.
La función de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento.
Un ejemplo de este tipo de botones sería este:
El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html.
Aquí te hemos escrito un formulario con este tipo de type (type=“file”) para que veas las diferencias con los otros que habíamos visto hasta ahora.
Fíjate como tenemos que cambiar el enctype, la forma de enviar la información, ya que ahora no vamos a enviar texto plano, sino archivos.
Nosotros tenemos que definir el tamaño del campo y su nombre. El botón “Examinar” es creado automáticamente por el navegador. Al pinchar en él, podremos examinar nuestro disco duro para encontrar la imagen que deseemos subir.
Como ejercicio final hemos hecho un formulario intentando reunir en él todo lo que hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un formulario.
Aquí te dejamos el código:
</td> <td>
</td> </tr> </table> </form>
EJERCICIO
Basándote en el código de ejemplo que hemos visto, crea una página web que cumpla con lo que indicamos a continuación:
a) Como título principal de la página debe figurar con etiquetas h1 el texto “Inscripción al Congreso de Medicina Santiago 2048”
b) Debe contener dos formularios: el primero será “Inscripción al Congreso para médicos especialistas” y el segundo “Inscripción al congreso para médicos generalistas”. Estos títulos deben figurar antes del formulario con etiquetas h2.
c) El formulario para médicos especialistas debe solicitar nombre, apellidos, especialidad y año de obtención de la especialidad.
d) El formulario para médicos generalistas debe solicitar nombre, apellidos, centro médico donde ejerce y año de obtención del título.
Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento.
Los formularios son un tag más de html y, como todos los tags, debe ir indicado mediante una etiqueta. La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas etiquetas, serán partes del formulario.
La etiqueta <form> tiene una serie de atributos básicos que vamos a pasarte a explicar a continuación.
action
El atributo “action” indica el tipo de acción que va a realizar el formulario. Anteriormente indicamos que la información podía enviarse a un correo electrónico o a un programa que la gestione. Es mediante esta etiqueta que se gestionan los formularios.
Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:direcciondelcorreo@correo.com…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc.
Si lo que queremos es que la información sea enviada a un programa que la gestione, debemos indicarle en la acción, la url del archivo donde se encuentra ubicado el programa que la gestionará. Lo escribiríamos de la siguiente manera: <form action=”dirección completa del archivo que la gestionará” …> </form>. Este tipo de envíos se utilizarían para casos de formularios de encuestas, cuestionarios, etc.
method
Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. Existen dos valores posibles: get y post.
El valor get es el valor por defecto. Si no concretamos el method, la información se enviará a través de este medio.
“get” indica que los datos enviados se adjuntarán en la barra de direcciones del cliente, al final de la url correspondiente y después de un signo de interrogación de cierre. Si se envía más de un dato, éstos irán separados por el símbolo &.
Un ejemplo de un formulario enviado por el method=“get” sería el siguiente: http://www…………?nombre1=valor1&nombre2=valor2
El valor post indica que el método de envío no se hará a través de la url, sino formando parte del cuerpo de la petición.
enctype
Mediante este atributo indicaremos la forma en la que viajará la información que se mande a través del formulario HTML.
La forma puede ser de varios tipos, aunque el más común es que la información se envíe como texto plano (enctype=”text/plain”).
Una vez vistos estos tres atributos, veremos como quedaría el código de un formulario estándar a un correo eléctrónico:
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>
Campos de texto
Los campos de entrada de los formularios se definen mediante el tag <input> y sus diferentes valores. Estos valores nos permiten utilizar varios tipos de cajas y de formas.
Vamos a ver a continuación distintos tipos de cajas y veremos como varían sus características.
Las cajas de texto básicas: <input type= “text”>
La caja de texto básica se escribiría de la siguiente forma:
<input type="text" name="nombredelacaja">
Hemos visto como el type= “text” le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas.
Podemos completar el estilo de esta caja gracias a los siguientes atributos:
size: mediante el atributo size podemos definir el tamaño de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, éste se desplazará pero sin que la caja varíe su tamaño. El texto irá desapareciendo por la izquierda.
maxlength: Este atributo nos sirve para definir la cantidad máxima de letras que se pueden escribir en la caja. No se podrán escribir en la caja más caracteres que los indicados por el maxlength.
value: Define si queremos que en la ventana haya un texto ya preescrito. Este texto puede ayudar al usuario a saber cúal es el tipo de dato que te piden en ese campo.
name: para ponerle un nombre al campo. Esto resulta muy útil a la hora de gestionar la información que nos llegue.
Mira el siguiente código:
<input type="text" size="15" maxlength="30" value="Nombre" name="nombre">
Aquí vemos un tipo de caja “text” con un tamaño de 15 y un límite de caracteres de 30. Además, tiene un texto preescrito en él.
Campos de texto largo: <textarea>
Un <textarea> es como una caja de texto sencilla, tipo “text”, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son útiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc.
Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formará parte del texto.
Sus atributos básicos son “rows” y “cols” que servirán para definir el tamaño del textarea. Además, no debemos olvidar el atributo “name”, que servirá para definir el nombre de este campo.
Un textarea llamado “comentarios” y con unas dimensiones de 10 filas y de 40 columnas, tendría el código siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe aquí tus comentarios</textarea>
Textos con passwords
En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseñas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es más sencillo de lo que parece.
El siguiente código es de un campo con datos codificados:
<input type="password" name="contraseña">
Listas de opciones
Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinión de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros. Las listas de selección u opciones se escriben gracias a la etiqueta <selection> y a su cierre.
Vamos a ponerte un ejemplo de la lista de opciones básica, la más sencilla. Si queremos preguntar, por ejemplo, cuál es el medio de transporte favorito de nuestro usuarios, el código de la lista de selección podría ser el siguiente:
<select name="transporte">
<option>Coche</option>
<option>Avión</option>
<option>Tren</option>
</select>
Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea más de una opción a la vez en la lista. Para ello utilizaremos “size”, indicando el número de opciones que queremos que se muestren.
En la lista anterior si quisieramos que se vieran dos opciones, deberíamos cambiar el código anterior por el siguiente:
<select name="transporte" size="2">
<option>Coche</option>
<option>Avión</option>
<option>Tren</option>
</select>
También podemos definir si queremos que se pueda elegir más de una opción a la vez mediante las teclas ctrl y shift. Para ello utilizaremos el atributo multiple. Mira primero cómo quedaría nuestro código:
<select name="transporte" size="2" multiple>
<option>Coche</option>
<option>Avión</option>
<option>Tren</option>
</select>
Otra cosa que podemos predefinir es que la opción que aparezca seleccionada al principio no sea la primera que está en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opción que queramos que aparezca como seleccionada. En el código siguiente, queríamos que apareciera seleccionada la opción del tren.
<select name="transporte">
<option>Coche</option>
<option>Avión</option>
<option selected>Tren</option>
</select>
Por último está el atributo value. Este atributo es muy útil para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un número o una letra a cada opción.
El atributo se escribe dentro de cada opción y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podríamos valorar nuestras opciones de la siguiente manera:
<select name="transporte">
<option value="1">Coche</option>
<option value="2">Avión</option>
<option value="3">Tren</option>
</select>
Y en el supuesto de seleccionar por ejemplo la opción del avión, al programa (o al correo electrónico) le llegaría el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.
Listas de botones: radio button
A continuación vamos a ver otro tipo de listas de opciones o de selección. Son listas con botones de tipo radio. Estos botones se escriben mediante la etiqueta type=”radio”.
Vamos a transformar la lista anterior en este tipo de lista. Fijaros que a cada opción le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El código nuevo quedaría de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche
<br>
<input type="radio" name="transporte" value="2">Avión
<br>
<input type="radio" name="transporte" value="3">Tren
Por defecto no saldrá ninguna opción activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el código siguiente la lista de opciones tiene activada la opción avión:
<input type="radio" name="transporte2" value="1">Coche
<br>
<input type="radio" name="transporte2" value="2" checked>Avión
<br>
<input type="radio" name="transporte2" value="3">Tren
Listas de cajas: checkbox
Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuación.
El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=“checkbox”.
Otra diferencia es que así como las listas de botones tipo “radio” sólo permitían elegir una opción (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.
Aquí tienes el código de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
<input type="checkbox" name="transporte" value="1">Coche
<br>
<input type="checkbox" name="transporte" value="2" checked>Avión
<br>
<input type="checkbox" name="transporte" value="3">Tren
Botón de envío
Para enviar la información, el formulario necesita de un botón que le indique que el formulario ha concluido y que pueden enviar la información.
Los botones de envío se crean con la etiqueta “input” de tipo “submit”. Además, hay que definir el texto que queremos que esté escrito en el botón. Esto lo conseguimos con el atributo “value”. Así, el código de un botón sencillo de formulario sería el siguiente:
<input type="submit" value="Enviar información">
Botón de resetear la información
Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la información. Para ello es muy útil el botón para borrar la información.
El botón se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es “reset” y cambiando el mensaje interno del botón, o sea, el “value”.
El ejemplo sencillo de este botón tendría el siguiente código:
<input type="reset" value="Borrar información">
El hidden es un atributo que se le pone al tag. Gracias a este atributo estamos enviando al programa de gestión de datos, aparte de los datos enviados por el propio usuario, datos predefinidos por nosotros mismos invisibles para el usuario. Estos datos pueden ser útiles para ayudar al programa en su gestión de los datos del formulario. Lo que hacen es comunicar cierta información al servidor sobre cómo tratar los datos manteniéndose ocultos a la vista de los usuarios.
Este tipo de datos ocultos no se muestran en la página, aunque sí pueden ser detectados solicitando el código fuente. El atributo hidden no se llega a usar en páginas escritas en html, sólo en las que empleen también otro tipo de lenguajes.
Aquí podemos ver el código de un ejemplo:
<form action="mailto: nombredelcorreo@correo.com " method="post" enctype="text/plain" name="mihidden">
<input type="hidden" name="opcion" value="si">
</form>
Input type image
El atributo “image” sirve para personalizar un botón. Es decir, este atributo introduce un botón en una imagen, sustituyendo al formato estándar de botones que ya hemos visto en otros artículos del tutorial.
La función de los botones creados de esta forma es igual que la de submit, pero nos permite personalizar este elemento.
Un ejemplo de este tipo de botones sería este:
<form action="mailto:nombredelcorreo@correo.com" method="post" enctype="text/plain" name="image">
<input type="image" name="boton" src="https://html.hazunaweb.com/html/imagenes/boton.jpg" align="middle">
</form>
Input type file
El atributo file permite al usuario subir archivos. Por supuesto necesitaremos un programa que gestione estos archivos mediante un lenguaje diferente al html.
Aquí te hemos escrito un formulario con este tipo de type (type=“file”) para que veas las diferencias con los otros que habíamos visto hasta ahora.
<form method="post" enctype="multipart/form-data"><br>
<input type=file size=60 name="file1"><br><br>
<input type=file size=60 name="file2"><br><br>
<input type=submit value="subir"><br>
</form><br>
Fíjate como tenemos que cambiar el enctype, la forma de enviar la información, ya que ahora no vamos a enviar texto plano, sino archivos.
Nosotros tenemos que definir el tamaño del campo y su nombre. El botón “Examinar” es creado automáticamente por el navegador. Al pinchar en él, podremos examinar nuestro disco duro para encontrar la imagen que deseemos subir.
Ejemplo de formulario completo
Como ejercicio final hemos hecho un formulario intentando reunir en él todo lo que hemos dado y, sobre todo, todas las opciones que tenemos a la hora de confeccionar un formulario.
Aquí te dejamos el código:
<form action="mailto:emaildelaempresaquehaceelformulario@email.com" method="post" enctype="text/plain">
Nombre: <input type="text" name="nombre" size="25" maxlength="50"><br><br>
Apellidos: <input type="text" name="apellidos" size="35" maxlength="100">
<br><br>
Correo electrónico: <input type="text" value="@" name="correo" size="40" maxlength="100">
<br><br>
Población: <input type="text" name="poblacion" size="15" maxlength="50">
<br><br>
Provincia: <input type="text" name="provincia" size="15" maxlength="50">
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td>Edad:
<br>
<input type="radio" name="edad" value="020"> 0-20
<br>
<input type="radio" name="edad" value="2040" checked> 20-40
<br>
<input type="radio" name="edad" value="4060"> 40-60
<br>
<input type="radio" name="edad" value="60100"> 60-100</td>
<td>¿Cómo nos conociste?<br>
<input type="checkbox" name="conocer">
A través de un amigo.<br>
<input type="checkbox" name="conocer">
A través de un buscador.<br>
<input type="checkbox" name="conocer">
Navegando por la red.<br>
<input type="checkbox" name="conocer">
Otros</td>
</tr>
</table>
Opinión sobre nuestra página web<br>
<textarea cols="40" rows="5" name="opinion">Escriba aquí su opinión...</textarea>
<br><br>
Tiene alguna sugerencia...
<br>
<textarea cols="40" rows="5" name="sugerencias">Escriba aquí sus sugerencias...</textarea>
<br><br>
¿Cúanto navegas por intenet? (Señala la opción que
más se acerque)<br>
<select name="frecuencia" size="2">
<option value="1">2 horas al día.
<option value="2">4 horas al día.
<option value="3">10 horas a la semana.
<option value="4">20 horas al mes.
</select>
<br>
<br>
<table width="50%" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td>
</td> <td>
</td> </tr> </table> </form>
EJERCICIO
Basándote en el código de ejemplo que hemos visto, crea una página web que cumpla con lo que indicamos a continuación:
a) Como título principal de la página debe figurar con etiquetas h1 el texto “Inscripción al Congreso de Medicina Santiago 2048”
b) Debe contener dos formularios: el primero será “Inscripción al Congreso para médicos especialistas” y el segundo “Inscripción al congreso para médicos generalistas”. Estos títulos deben figurar antes del formulario con etiquetas h2.
c) El formulario para médicos especialistas debe solicitar nombre, apellidos, especialidad y año de obtención de la especialidad.
d) El formulario para médicos generalistas debe solicitar nombre, apellidos, centro médico donde ejerce y año de obtención del título.
[…] Tutorial de HTML (XIV) […]
ResponderEliminar[…] Tutorial de HTML (XIV) […]
ResponderEliminar