Facebook
From Serena, 3 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 43
  1. <head>
  2.  
  3.      <style type="text/css">
  4.          h1 { color: #0000FF;
  5.              text-shadow:  1px 1px 1px #aaa;
  6.          }
  7.          fieldset {
  8.                     background-color: cyan;
  9.                     border: 0;
  10.                  }
  11.  
  12.          legend {
  13.             background-color: red;
  14.             color: white;
  15.             padding: 5px 10px;
  16.                 }
  17.          .amarillo{
  18.              background-color: yellow;
  19.              border-width: thin;
  20.          }
  21.          button {
  22.              background-color: #FFB6C1;
  23.              font-size: 13px;
  24.      
  25.          }
  26.          input[type='radio'] {
  27.           color:black;
  28.          }
  29.      </style>
  30.      <script type="text/javascript">
  31.          function MostrarValoracion() {
  32.              var Valoracion = document.getElementById("rango").value;
  33.              alert('Has valorado con ' + Valoracion + ' puntos')
  34.          }
  35.            function MostrarCuenta() {
  36.                var cuenta1 = document.getElementById("cuenta1").value;
  37.                var cuenta2 = document.getElementById("cuenta2").value;
  38.                var cuenta3 = document.getElementById("cuenta3").value;
  39.                var cuenta4 = document.getElementById("cuenta4").value;
  40.                var cuenta5 = document.getElementById("cuenta5").value;
  41.                var cuenta6 = document.getElementById("cuenta6").value;
  42.                var str = 'Le informamos que su cuenta bancaria es: ' + cuenta1 + '-' + cuenta2 + '-' + cuenta3 + '-' + cuenta4 + '-' + cuenta5 + '-' + cuenta6;
  43.                alert(str)
  44.          }
  45.  
  46.          function MostrarDiaSemana() {
  47.              var fecha = new Date();
  48.              //var fecha = document.getElementById("Date").value;
  49.              var semana = new Array();
  50.              semana[0] = "Domingo"
  51.              semana[1] = "Sábado"
  52.              semana[2] = "Viernes"
  53.              semana[3] = "Jueves"
  54.              semana[4] = "Miércoles"
  55.              semana[5] = "Martes"
  56.              semana[6] = "Lunes"
  57.              var n = semana[fecha.getDay()];
  58.              alert('La fecha seleccionada en el elemento de fecha es un ' + n)
  59.          }
  60.  
  61.          function comprobar(checkbox){
  62.              var checkbox1 = document.getElementById("tv");
  63.              var checkbox2 = document.getElementById("radio");
  64.              var checkbox3 = document.getElementById("internet");
  65.              var checkbox4 = document.getElementById("otros");
  66.              checkbox1.onclick = function(){
  67.              if(checkbox1.checked != false){
  68.                  checkbox2.checked = null;
  69.                  checkbox3.checked = null;
  70.                  checkbox4.checked = null;}
  71.               }
  72.              checkbox2.onclick = function(){
  73.              if(checkbox2.checked != false){
  74.                  checkbox1.checked = null;
  75.                  checkbox3.checked = null;
  76.                  checkbox4.checked=null;}
  77.               }
  78.              checkbox3.onclick = function(){
  79.              if(checkbox3.checked != false){
  80.                 checkbox1.checked = null;
  81.                 checkbox2.checked = null;
  82.                 checkbox4.checked = null;}
  83.               }
  84.              checkbox4.onclick = function(){
  85.              if(checkbox4.checked != false){
  86.                 checkbox1.checked = null;
  87.                 checkbox2.checked = null;
  88.                 checkbox3.checked = null;}
  89.               }
  90.          }
  91.      </script>
  92.  
  93. </head >
  94. <body>
  95.  
  96.                      <h1>Formulario Información Alta Telefónica</h1>
  97.                      <form action="./procesarFormulario.php" name="telefonica">
  98.                          <fieldset>
  99.                              <legend>Datos Personales</legend>
  100.                              Nombre: <input type="text" name="nombre"
  101.                                             maxlength="30" class="amarillo" /><br />
  102.                              Apellidos: <input type="text" name="apellidos"
  103.                                                maxlength="60" class="amarillo"/><br />
  104.                              Dirección: <input type="text" name="direccion"
  105.                                                maxlength="60" class="amarillo"/><br />
  106.                              Codigo Postal: <input type="text" name="cpostal"
  107.                                                    pattern="[0-9]{5}" class="amarillo"/><br />
  108.                              Localidad: <input type="text" name="localidad" class="amarillo"/><br />
  109.                          </fieldset>
  110.                          <br />
  111.                          <fieldset>
  112.                              <legend>Tipo de Contratación</legend>
  113.                              <input type="radio" name="tipoc"  value="nuevo"
  114.                                     checked="checked">Nueva Contratación &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  115.                              <input type="radio" name="tipoc"
  116.                                     value="porta">Portabilidad &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  117.                              <input type="radio" name="tipoc"
  118.                                     value="cambio">Cambio de Contrato &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />
  119.                              Elija la compañía actual:
  120.                              <select name="origen">
  121.                                  <option value="movistar">Movistar</option>
  122.                                  <option value="orange">Orange</option>
  123.                                  <option value="vodafone">Vodafone</option>
  124.                                  <option value="yoigo">Yoigo</option>
  125.                                  <option value="ninguna">
  126.                                      No tengo ninguna
  127.                                      compañía
  128.                                  </option>
  129.                              </select>
  130.                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  131.                              En caso de portabilidad, elija la nueva compañía:
  132.                              <select name="origen">
  133.                                  <option value="movistar">Movistar</option>
  134.                                  <option value="orange">Orange</option>
  135.                                  <option value="vodafone">Vodafone</option>
  136.                                  <option value="yoigo">Yoigo</option>
  137.                              </select>
  138.                              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  139.                          </fieldset>
  140.                          <br />
  141.                          <fieldset>
  142.                              <legend>Datos Bancarios</legend>
  143.                              País: <input type="text" class="amarillo" name="pais" id="cuenta1" value="ES"
  144.                                           readonly="readonly" /> (sólo válido ES)<br />
  145.                              Control IBAN: <input type="text" class="amarillo" name="ciban" id="cuenta2"
  146.                                                   placeholder="XX" pattern="[0-9]{2}" /> (dos dígitos)<br />
  147.                              Entidad: <input type="text" class="amarillo" name="enti" id="cuenta3"
  148.                                              placeholder="XXXX" pattern="[0-9]{4}" /> (cuatro dígitos)<br />
  149.                              Sucursal: <input type="text" class="amarillo" name="suc" id="cuenta4"
  150.                                               placeholder="XXXX" pattern="[0-9]{4}" /> (cuatro dígitos)<br />
  151.                              DC: <input type="text" class="amarillo"  name="dc" id="cuenta5" placeholder="XX"
  152.                                         pattern="[0-9]{2}" /> (dos dígitos)<br />
  153.                              Cuenta: <input type="text" class="amarillo" name="cuenta" id="cuenta6"
  154.                                             placeholder="XXXXXXXXXX" pattern="[0-9]{10}" /> (diez dígitos)<br />
  155.                          </fieldset>
  156.                          <br />
  157.                          <fieldset>
  158.                              <legend>Datos estadísticos - ¿Cómo nos conoció?</legend>
  159.                          
  160.                              <input type="checkbox" id="tv" name="tv" value="TV" onchange = "comprobar(this)">
  161.                              <label for="tv"> A través de la TV</label><br>
  162.                              <input type="checkbox" id="radio" name="radio" value="Radio" onchange = "comprobar(this)">
  163.                              <label for="radio"> A través de la radio</label><br>
  164.                              <input type="checkbox" id="internet" name="internet" value="Internet" onchange = "comprobar(this)">
  165.                              <label for="internet"> A través de Internet</label><br>
  166.                              <input type="checkbox" id="otros" name="otros" value="Otros" onchange = "comprobar(this)">
  167.                              <label for="otros"> Otros</label><br>
  168.                              <input type="range" name="valoracion" id="rango" min="1" max="5" step="1" value="1">Valoración [1-5] <br />
  169.                              Fecha de la encuesta: <input id="Date" type="date" value="2019-01-01"><br />
  170.                          </fieldset>
  171.                          <input type="submit" value="Enviar Datos" />
  172.                          <input type="reset" value="Borrar Datos" /> <br />
  173.                          <button onclick="MostrarValoracion()" >Mostrar <br /> Valoración</button>
  174.                          <button onclick="MostrarCuenta()">Mostrar <br /> Cuenta</button>
  175.                          <button onclick="MostrarDiaSemana()">Mostrar Dia <br /> Semana</button>
  176.                      </form>
  177. </body>
  178. </html>
  179.  
  180.