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.
<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
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.
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
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.
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