domingo, 2 de octubre de 2011

Profundizando en el trabajo con Formularios


Realiza el siguiente formulario:


EL siguiente código es para realizarlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Encuesta al profesorado</title>
<style>
<!--
BODY{ font-family: Verdana; font-size: 10pt; background-color: rgb(0,128,128) }
LEGEND {font-weight: bold; text-align: center; font-family: Verdana; font-size: 12pt; }
LABEL {color: rgb(0,0,192); font-weight: bold }
FIELDSET {background-color: rgb(192,192,192; margin-bottom:10px; padding: 10 px}
-->
</style>

</head>

<body>
<h1>¡Por favor! Si es usted docente responda a las siguientes cuestiones<br />
</h1>

<input type="text" name="inactivo" size="100" value="Este formulario se visualizará mejor con navegadores de la última generación" disabled readonly>

<form action="mailto:alsastre@redestb.es" method="post" enctype="text/plain">

<input type="hidden" name="tipo" value="Docentes" /><FIELDSET>
<LEGEND ACCESKEY="1">
1. Información personal</LEGEND>
<label for="aa">Apellidos: </label><INPUT NAME = "Apellidos" type="text" size="30" id="aa" tabindex="1" /><label for = "nombre">&nbsp;Nombre: </label><input type="text" name="Nombre" size="20" id = "nombre" tabindex="2" /><br />
<label for = "fn"> Fecha de nacimiento: </label><input type="text" name="nacido" size = "8" id = "fn" tabindex="3" /><label>Sexo: </label><input type = "radio" value="Masculino" tabindex="4" name="sexo" />Hombre
<input type="radio" value="Femenino" tabindex="5" name="sexo" />Mujer</FIELDSET>

<fieldset>
<legend acceskey="2">2. Información de contacto</legend>
<label for = "telefono">Teléfono</label><input name="Telefono" size="10" maxlength="10" id="telefono" tabindex="6">
<label for = "email" >Email : </label><input type="text" name="email" size="15" id="email" tabindex="7">
</fieldset>

<fieldset>
<legend accesskey="3">3. Datos profesionales</legend>
<label for="ct">Centro de trabajo</label><input type="text name="Centro" size = "30" id="ct" tabindex = "12"><label for = "localidad">Localidad</LABEL><input  type="text" name = "localidad" size="30" id ="localidad" tabindex="13"> <br/>

<label for="esfun">¿Es funcionario? </label><input type="checkbox" name="Funcionario" value="ON" id="esfun" tabindex="14"><label for="nrp">NRP: </label><input type="password" name="NRP" size="15" tabindex="15"><label for="sn">Seminario/Nivel:</label>

<select name="Seminario" size="2 id="sn" multiple tabindex="16">
<option>Lengua y literatura</option>
<option>Matemáticas</option>
<option>Geografía e Historia</option>
<option>Biología y geología</option>
<option>Tecnología</option>
<option>Física y Química</option>
<option>Educación Plástica y Visual </option>
<option>Música</option>
<option>Educación Física</option>
<option>Cultura y Lenguas clásicas</option>
<option selected>Ética y Filosofía</option>
<option>Primer ciclo ESO</option>
<option>Segundo ciclo ESO</option>
<option selected>Bachillerato</option>
</select>
</fieldset>

<fieldset>
<LEGEND accesskey="4">4. Por favor, facilítenos la siguiente información: </LEGEND>
<label for = "Vias">¿Cómo llegó hasta aquí?</label>

<SELECT NAME="Vias" id="Vias" size="1" tabindex="17">
<option value="azar">Al azar</option>
<option value="URI">AAlguien le indicó el URI de la página</option>
<option value="Buscador">A través de un programa  buscador</option>
<option value="Enlace"> Mediante un enlace desde otra página</option>
</SELECT>

<p />
<label for="comentarios">Introduzca aquí sus comentarios </label><br />
<textarea name="comentarios" rows="5" cols="60" id="comentarios"tabindex="18"></textarea>
<blockquote>
<label>¿Desearía más información sobre...?</label><br />
<input type="checkbox" name="opcion" value="audio" checked tabindex="19">
Material audiovisual <br />

<input type="checkbox" name="opcion" value="etext" checked tabindex="20">
Libros electrónicos <br />

<input type="checkbox" name="opcion" value="libros"  tabindex="21">
libros de texto <br />

<input type="checkbox" name="opcion" value="diseños" tabindex="22">
Diseños curriculares <br />

<input type="checkbox" name="opcion" value="Leyes"  tabindex="23">
Legislación educativa <p />
</blockquote>
</fieldset>

<BUTTON name="submit" value="submit" type="submit" accesskey="e" tabindex="25">
[E]nviar daros &nbsp;</BUTTON>

<Button name="Reset" type="reset" accesskey="b" tabindex="26">[B]orrar los datos introducidos</Button>
</form>

</body>
</html>

Comprueba que realmente funciona, y que no se visualiza igual en los distintos navegadores.

Saludos,
Alfredo

No hay comentarios:

Publicar un comentario