Seguidores

MIS WEBS



sábado, 6 de abril de 2019

FORMULARIO HTML5

Cómo hacer un formulario en html5

EJEMPLO DE FORMULARIO CON HTML5

En el siguiente ejemplo juntaré varios imputs de un formulario y les daré un diseño. Existen varias formas con las que podemos distribuir nuestro formulario en el panel: utilizando una tabla o utilizando css. A mi personalmente me gusta utilizar Css ya que un formulario no es lo mismo que una tabla. Pienso que si utilizamos la etiqueta table para un uso al que no fue pensada se convierte en un mal uso y confunde al buscador. Se que al principio de html se utilizaba la etiqueta table para diseñar los espacios del body, pero desde la entrada de html5 eso ha canbiado y la etiqueta label representa una tabla.
FORMULARIO PRÁCTICA
Fecha nacimiento
Estado civil
Estado civil hermano
<form method="GET" >
                                    
        <fieldset id="contenedorForm">
                <legend id="TituloFormm">FORMULARIO PRÁCTICA </legend>
                            
                        <div> 
                                <nput placeholder="NOMBRE:" type="text" name="NOMBRE" id="NOMBRE">
                        </div>
                        <div>
                                <input placeholder="APELLIDOS" type="text" name="Apellidos" id="Apellidos">
                        </div>
                        <div>
                             <legend>Fecha nacimiento </legend>
                             <input type="date" name="Edad" id="Edad">
                        </div>
                        <div>
                                <input placeholder="Email@email.com" type="email" name="Email" id="Email">
                        </div>
                        <div>
                                <label for="Apellidos">Chekear: </label> 
                                <input type="checkbox" name="Apellidos" id="Apellidos">
                        </div>
                                <label for="Apellidos">Satisfacción: </label> 
                                <input type="range" name="barra" id="Apellidos">
                        <div>
                                <fieldset id="estado_civil" >
                                        <legend>Estado civil </legend>
                                        <div>
                                                <input type="radio" name="raza" id="raza_1" value="humano" />
                                                <label for="raza_1">Soltero/a </label>
                                        </div>
                                        <div>
                                                <input type="radio" name="raza" id="raza_2" value="elfo" />
                                                <label for="raza_2">CAsado/a </label>
                                        </div>
                                        <div>
                                                <input type="radio" name="raza" id="raza_3" value="enano" />
                                                <label for="raza_3">Divorciado/a </label>
                                        </div>
                                </fieldset>
                        </div>
                        <div>
                                <fieldset id="estado_civil">
                                        <legend>Estado civil herman </legend>
                                                <div>
                                                       <input type="checkbox" name="raza" id="raza_1" value="humano" />
                                                        <label for="raza_1">Soltero/a </label>
                                                        </div>
                                                        <div>  
                                                              <input type="checkbox" name="raza" id="raza_2" value="elfo" />
                                                              <label for="raza_2">CAsado/a </label>
                                                        </div>
                                                        <div>
                                                                <input type="checkbox" name="raza" id="raza_3" value="enano" />
                                                                <label for="raza_3">Divorciado/a </label>
                                                        </div>
                                </fieldset>
                        </div>
                        <div>
                                <datalist id="MiLista">
                                        <option value="0">GRUISTA </option>
                                        <option value="1">fONTANERO </option>
                                        <option value="2">ELECTRICISTA </option>
                                        <option value="3">SOLADOR </option>
                                <option value="4">CHAOADA </option>
                                <option value="5">FERRALLA </option>
                                <option value="6">PERON </option>
                                <option value="7">ENCARGAD </option>
                                </datalist>
                                <input  
                                        id="lista"
                                        type="text" 
                                        name="desplegable" 
                                        list="MiLista"
                                        placeholder="SELECIONA UN OFICO DE LA CONSTRUCCIÓN">
                     </div>
                            
                 <div>
                 <input type="submit" name="ENVIAR_FORMULARIO" id="ENVIAR">  
              </div>
        </fieldset>
    </form> 

Aquí tenemos el Css:

<style rel="stylesheet" type="text/css">          
                #CajaForm{
                        background-color: rgb(82, 59, 126);
                        margin: 5px 2%;
                        width: 55%;
                        padding:5em;
                        border: 5px solid black;
                        border-radius: 20px 10px;
                        box-shadow: rgb(82, 79, 79) 5px 15px 25px;
                    }
                #contenedorForm{margin-left: 1%;}
                #TituloFormm{ margin-bottom: 30px; font-size: 20px;}
                #estado_civil{width: 180px; margin: 15px;float: left;}
                #estado_civil div input {  width: 10%;}
                #estado_civil div label{background: red;width: 50%;}
                form fieldset div{margin: 1em 0;margin-top: 0.25em;}
                #Enviar{clear: both;}
                form fieldset div label{
                    float: left;width: 25%;
                   }
                code#azul{color:rgb(4, 4, 82);
                        font: bolder;  
                        content: '\f3cc'; 
                        font-size: 0.5em;}
                input{font-size:15px;}
                label,legend{color:black;}
                   
                </style>

Segundo ejemplo de formulario

Formulario 2

Este es el CSS con el que hemos hecho el formulario

form#form2 legend{
        background: #5f5e5e;
        width: 33%;
        margin: 10px;
        margin-left: 30%;
        border-radius: 2px 12px;
}form#form2 label{
        float:left; 
        width: 200px;
        padding-right: 24px;
} form#form2 input{
        float:left;
        width: calc(100%-200px);
}  form#form2 input [type=submit]{
        float: right;
        width: calc(100% - 20xpx);
                }
 

FORMULARIO PARA LOGARSE CON HTML Y CSS

En el sigueinte ejemplo hemos utilizado javaScript para que cuando se introduzca el usuario, login y pulsemos Logarse, nos regrese un mesaje con los datos escritos.

EJEMPLO 3 DE FORMULARIO


Con este javaScript conseguimos que nuestro formulario nos regrese un alert con los datos rellenos


<script>   
        window.addEventListener("load", function(){
                var login, user, boton;
                                                                                
                login= document.getElementById("LOGIN");
                user=  document.getElementById("USUARIO");
                boton = document.getElementById("form3")
                boton.addEventListener("submit", validar, false);
                function validar() { 
                        alert("loging:   " + login.value  + "       user:   " + user.value);                                        
                        user.style.background="red";
                        login.style.background="yellow";                             
                };
        }, false);
</script>
                                               
                                               

Con el siguiente script podemos confirmar que no quedan inputs sin rellenar y nos regrese un alert con los datos guardados


window.addEventListener("load", function(){
        var login, user, boton;
                                
                /* nombrar objetos oyentes */
                login= document.getElementById("LOGIN");
                user=  document.getElementById("USUARIO");
                boton = document.getElementById("form3");
                                           
                        /* poner a la escucha los objetos */
                user.addEventListener("input",aviso_relleno, false );
                login.addEventListener("input", aviso_relleno, false);
                boton.addEventListener("submit", validar, false);

                user.style.background="red";
                login.style.background="yellow";
        function validar() { 
                aviso_relleno();
                alert("loging:   " + login.value  + "       user:   " + user.value);  
                };
        function aviso_relleno(){
                if(login.value =="" || user.value==""){
                user.setCustomValidity("falta usuario o login");
                /* setCustomValidity("texto") avisos en formulario */
                }else{
                user.setCustomValidity("");/* reseteamos a no valor el set custom para que nos deje salir */
                user.style.background="green";
                login.style.background="green";
                };
      };
}, false);
                

Formulario con un output que nos regrese el resultado de un <input type="range">

En el siguiente formulario hemos utilizado css para cargarle un fondo y distribuir los elementos igual que en el anterior, luego con javaScrip hemos puesto a la escucha la barra y le hemos indicado que regrese en el output el valor de la barra

EJEMPLO FORM 4
Edad del cliente


 window.addEventListener("load", function(){
                                       
     var form4range;
                form4range= document.getElementById("EdadCL");
                                           
                /* al cambiar el estado del elemento */
                form4range.addEventListener("change", barra, false);
         function barra(){ 
                var salidaDatos= document.getElementById("EdadNumero");
                var edad= form4range.value-20;
   
                                
                

Construir un formulario y conectarlo a un localhost

La función principal de un formulario es la de guardar registros de una forma ordenada.Para ello necesitaremos conectar a una BBFF. En los formularios anteriores henos utilizao tan solo html, css y javaScript (FontEnd). Una vez tengamos alojada nuestra pagina en el servidor, puede ser virtual (en tu propio ordenador, como es mi caso) o de pago.

Porque cuando pulso submit en mi formulario aparece una pagina con el códio php

Php es un lenguaje del lado del servidor(BackEnd)porlo que nuestra pagina ha de estar alojada en el servidor. En mica caso utilizo el paqueta wamp por lo que tengo que buscar en mi ordenador la ruta C:\wamp64\www\ y alojar en esta carpeta mi carpeta con los archivos htlm, css, javaScript y php.En caso de estar la carpeta e un lugar que no sea el servidor no la reconocerá como código php. Una vez alojada tu carpeta en C:\wamp64\www\ tines que habrir tu buscador de internet y cargar en la zona de URL http://localhost/carpetaCreada/.

Una vez hemos creado nuestro formlario con html, css y javaScript

Por supuesto no podreis ver como funciona por detras por que el Backend, esta siempre oculto para el usuario pero os pegare el código php mas abajo por eso se dice que es del lado del servidor.

Formulario que carga con PHP

Este será nuestro CSS:

                /* 

form#form5 input[type="submit"]{width: 80px; margin-left: 40%;  margin-top:20px;}
form#form5{ border: solid 3px  black;
                 border-radius: 5px; width: 80%;  max-width: 550px;
                 height: 260px;   margin-left: 20%;  background: slategray;}
form#form5 label{ float: left; width: 25%;  margin-left: 2%;}
form#form5 input { float:left;   width: 65%;}
form#form5 legend{ text-align: center; margin:5px;}
                        */

Este será nuestro JavaScript con el que llenar la etiqueta datalist, lo podeis alojar en línea con un script dentro del datalist o linkarlo en una hoja de estilos esterna.

   window.addEventListener("load", function(){
                var BoxEstadoCivil= new Array(  'soltero/a', 
                                                'casado/a', 
                                                 'divorciado/a',
                                                 'vidudo/a',
                                                 'separado/a');
                var e_option ='';
                 for(i=0;i<BoxEstadoCivil.length;i++){
                    
                 e_option += '<option value="'+BoxEstadoCivil[i]+'"/>';
                document.getElementById("lista").innerHTML= e_option;
                        }
                    
                        
},false); 

Por ultimo nuestro php para conecta a la BBDD:



                echo "<h1>ESTAS DENTRO GRUAPO</h1>";
   
                                $Nombre= $_POST['Nombre'];
                                $Apellidos= $_POST['Apellidos'];
                                $Email= $_POST['Email'];
                                $EstadoCivil= $_POST['EstadoCivil'];
                            
                            
                             $link= mysqli_connect(
                            
                                $host = 'localhost',
                                $user = 'root',
                                $password = '',
                             );
                             if(mysqli_connect_errno()){
                                 echo "<br><br><h1 style = color: red> No te ha conectado al Host</h1>";
                                 exit();
                               };
                            
                               mysqli_select_db( 
                                   $link,
                                   $dbname= 'cursohtml'
                                )or die ("<h2 style= 'color : red'>upssssss la em fotut no esta la BBDD</h2>");
                                
                            $setquery=mysqli_query(
                                       $link,
                                       $query="INSERT INTO form5 
                                               VALUES('$Nombre',
                                                      '$Apellidos',
                                                      '$Email',
                                                      '$EstadoCivil')"
                                       ) or die ("<br> <h2 style= 'color : red'> la has cagado con tu consulta, hazlo otra vez so torpe");
                            
                                echo
                                " <br><a href='http://localhost/MisPaginasWeb/Practica_4/'
                                >Atras</a>";
                            



No hay comentarios:

Publicar un comentario

Buscar este blog

Sandisk y Western Digital