- <head>
- <style type="text/css">
- h1 { color: #0000FF;
- text-shadow: 1px 1px 1px #aaa;
- }
- fieldset {
- background-color: cyan;
- border: 0;
- }
- legend {
- background-color: red;
- color: white;
- padding: 5px 10px;
- }
- .amarillo{
- background-color: yellow;
- border-width: thin;
- }
- button {
- background-color: #FFB6C1;
- font-size: 13px;
- }
- input[type='radio'] {
- color:black;
- }
- </style>
- <script type="text/javascript">
- function MostrarValoracion() {
- var Valoracion = document.getElementById("rango").value;
- alert('Has valorado con ' + Valoracion + ' puntos')
- }
- function MostrarCuenta() {
- var cuenta1 = document.getElementById("cuenta1").value;
- var cuenta2 = document.getElementById("cuenta2").value;
- var cuenta3 = document.getElementById("cuenta3").value;
- var cuenta4 = document.getElementById("cuenta4").value;
- var cuenta5 = document.getElementById("cuenta5").value;
- var cuenta6 = document.getElementById("cuenta6").value;
- var str = 'Le informamos que su cuenta bancaria es: ' + cuenta1 + '-' + cuenta2 + '-' + cuenta3 + '-' + cuenta4 + '-' + cuenta5 + '-' + cuenta6;
- alert(str)
- }
- function MostrarDiaSemana() {
- var fecha = new Date();
- //var fecha = document.getElementById("Date").value;
- var semana = new Array();
- semana[0] = "Domingo"
- semana[1] = "Sábado"
- semana[2] = "Viernes"
- semana[3] = "Jueves"
- semana[4] = "Miércoles"
- semana[5] = "Martes"
- semana[6] = "Lunes"
- var n = semana[fecha.getDay()];
- alert('La fecha seleccionada en el elemento de fecha es un ' + n)
- }
- function comprobar(checkbox){
- var checkbox1 = document.getElementById("tv");
- var checkbox2 = document.getElementById("radio");
- var checkbox3 = document.getElementById("internet");
- var checkbox4 = document.getElementById("otros");
- checkbox1.onclick = function(){
- if(checkbox1.checked != false){
- checkbox2.checked = null;
- checkbox3.checked = null;
- checkbox4.checked = null;}
- }
- checkbox2.onclick = function(){
- if(checkbox2.checked != false){
- checkbox1.checked = null;
- checkbox3.checked = null;
- checkbox4.checked=null;}
- }
- checkbox3.onclick = function(){
- if(checkbox3.checked != false){
- checkbox1.checked = null;
- checkbox2.checked = null;
- checkbox4.checked = null;}
- }
- checkbox4.onclick = function(){
- if(checkbox4.checked != false){
- checkbox1.checked = null;
- checkbox2.checked = null;
- checkbox3.checked = null;}
- }
- }
- </script>
- </head >
- <body>
- <h1>Formulario Información Alta Telefónica</h1>
- <form action="./procesarFormulario.php" name="telefonica">
- <fieldset>
- <legend>Datos Personales</legend>
- Nombre: <input type="text" name="nombre"
- maxlength="30" class="amarillo" /><br />
- Apellidos: <input type="text" name="apellidos"
- maxlength="60" class="amarillo"/><br />
- Dirección: <input type="text" name="direccion"
- maxlength="60" class="amarillo"/><br />
- Codigo Postal: <input type="text" name="cpostal"
- pattern="[0-9]{5}" class="amarillo"/><br />
- Localidad: <input type="text" name="localidad" class="amarillo"/><br />
- </fieldset>
- <br />
- <fieldset>
- <legend>Tipo de Contratación</legend>
- <input type="radio" name="tipoc" value="nuevo"
- checked="checked">Nueva Contratación
- <input type="radio" name="tipoc"
- value="porta">Portabilidad
- <input type="radio" name="tipoc"
- value="cambio">Cambio de Contrato <br /><br />
- Elija la compañía actual:
- <select name="origen">
- <option value="movistar">Movistar</option>
- <option value="orange">Orange</option>
- <option value="vodafone">Vodafone</option>
- <option value="yoigo">Yoigo</option>
- <option value="ninguna">
- No tengo ninguna
- compañía
- </option>
- </select>
-
- En caso de portabilidad, elija la nueva compañía:
- <select name="origen">
- <option value="movistar">Movistar</option>
- <option value="orange">Orange</option>
- <option value="vodafone">Vodafone</option>
- <option value="yoigo">Yoigo</option>
- </select>
-
- </fieldset>
- <br />
- <fieldset>
- <legend>Datos Bancarios</legend>
- País: <input type="text" class="amarillo" name="pais" id="cuenta1" value="ES"
- readonly="readonly" /> (sólo válido ES)<br />
- Control IBAN: <input type="text" class="amarillo" name="ciban" id="cuenta2"
- placeholder="XX" pattern="[0-9]{2}" /> (dos dígitos)<br />
- Entidad: <input type="text" class="amarillo" name="enti" id="cuenta3"
- placeholder="XXXX" pattern="[0-9]{4}" /> (cuatro dígitos)<br />
- Sucursal: <input type="text" class="amarillo" name="suc" id="cuenta4"
- placeholder="XXXX" pattern="[0-9]{4}" /> (cuatro dígitos)<br />
- DC: <input type="text" class="amarillo" name="dc" id="cuenta5" placeholder="XX"
- pattern="[0-9]{2}" /> (dos dígitos)<br />
- Cuenta: <input type="text" class="amarillo" name="cuenta" id="cuenta6"
- placeholder="XXXXXXXXXX" pattern="[0-9]{10}" /> (diez dígitos)<br />
- </fieldset>
- <br />
- <fieldset>
- <legend>Datos estadísticos - ¿Cómo nos conoció?</legend>
- <input type="checkbox" id="tv" name="tv" value="TV" onchange = "comprobar(this)">
- <label for="tv"> A través de la TV</label><br>
- <input type="checkbox" id="radio" name="radio" value="Radio" onchange = "comprobar(this)">
- <label for="radio"> A través de la radio</label><br>
- <input type="checkbox" id="internet" name="internet" value="Internet" onchange = "comprobar(this)">
- <label for="internet"> A través de Internet</label><br>
- <input type="checkbox" id="otros" name="otros" value="Otros" onchange = "comprobar(this)">
- <label for="otros"> Otros</label><br>
- <input type="range" name="valoracion" id="rango" min="1" max="5" step="1" value="1">Valoración [1-5] <br />
- Fecha de la encuesta: <input id="Date" type="date" value="2019-01-01"><br />
- </fieldset>
- <input type="submit" value="Enviar Datos" />
- <input type="reset" value="Borrar Datos" /> <br />
- <button onclick="MostrarValoracion()" >Mostrar <br /> Valoración</button>
- <button onclick="MostrarCuenta()">Mostrar <br /> Cuenta</button>
- <button onclick="MostrarDiaSemana()">Mostrar Dia <br /> Semana</button>
- </form>
- </body>
- </html>