Ejemplo para crear un form en HTML
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="form-modulo">
<!--action="#" atributo obligatotio, el cual obtiene el file
de las validaciones... ejemplo action="paperino/pluto.php" -->
<form action="#">
<div class="row">
<div class="row-text">
<!--texto-->
<label>Inserire il cognome del cadidato</label>
<!--caja de texto-->
<input type="text"
placeholder="Cognome">
</div><!--end row-text-->
<div class="row-text">
<label>Inserire il nome del cadidato</label>
<input type="text"
placeholder="Nome">
</div><!--end row-->
</div><!--end row-->
<div class="row">
<div class="row-text">
<label>Inserire la mail del cadidato</label>
<input type="text"
placeholder="E-mail">
</div><!--end row-->
<div class="row-text">
<label>Inserire la password del cadidato</label>
<input type="password"
placeholder="Password">
</div><!--end row-->
</div><!--end row-->
<div class="row">
<div class="row-text">
<!--creacion del combo-->
<select>
<option class="combo">--Regione--</option>
<option>Abruzzo</option>
<option>Basilicata</option>
<option>Lazio</option>
<option>Marche</option>
<option>Molise</option>
<option>Puglia</option>
</select>
</div><!--end row-text-->
<div class="row-text">
<!--creacion del combo-->
<select>
<option class="combo">--Comune--</option>
<option>Comune 1</option>
<option>Comune 2</option>
<option>Comune 3</option>
<option>Comune 4</option>
</select>
</div><!--end row-text-->
</div><!--end row-->
<div class="row label-radio">
<!--creacion del radio-->
<div class="row-text">
<!--el id="uomo" y el for="uomo" combina
el label con el input radio-->
<input type="radio" name="genere" id="uomo">
<label for="uomo">Uomo</label>
<input type="radio" name="genere" id="donna">
<label for="donna">Donna</label>
<input type="radio" name="genere" id="sg">
<label for="sg">No genere</label>
</div><!--end row-text-->
</div><!--end row-->
<div class="row">
<div class="row-text">
<!--el textarea debe permanecer sin esapcios-->
<textarea
placeholder="scrivi..."></textarea>
</div><!--end row-text-->
<div class="row-text">
<!--el textarea debe permanecer sin esapcios-->
<textarea
disabled>Testo di prova</textarea>
</div><!--end row-text-->
</div><!--end row-->
<!--texto informativo-->
<!--boton "submit" para pasar la informacion-->
<button type="submit">Registati</button>
<!--limpiar las casillas-->
<button type="reset">Cancella</button>
<!------------otros componentes----------------->
<!--calendario-->
<input type="date">
<!--numero-->
<input type="number"
min="0"
max="4">
<!--otra forma de crear un boton-->
<input type="submit" value="testo del boton">
<!--plantilla de colores-->
<input type="color">
<!--buscar carpetas-->
<input type="file">
<!--barra de seleccion-->
<input type="range">
<!--check-->
<input type="checkbox">
<!--buscar-->
<input type="search">
<!-------------------------------------------->
</form>
</div><!--end form-modulo-->
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
color: #000;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
}
a{
color: #000;
text-decoration: none;
}
ul{
list-style-type: none;
}
label{
/*label se formatea como un texto*/
display: block;/*baja el componente que tiene a su lado*/
}
textarea{
resize: none;/*elimina la opcion de agrandar*/
}
/***/
.form-modulo{
padding: 20px;
width: 1024px;
/*height: 400px;*/
background-color:#A9A9A9 ;
margin: 0 auto;
}
.form-modulo .row-text label{
font-size: 16px;
color: #fff;
background-color:#696969;
padding: 5px 10px;
text-transform: uppercase;/*mayuscula*/
margin-bottom: 10px;
}
/*selector por atritubo*/
/*para dat formato solo a las cajas de textos*/
.form-modulo .row-text input[type="text"],
.form-modulo .row-text input[type="password"]{
background-color: #F5F5F5;
width: 100%;
height: 30px;
padding: 0 10px ;
/*border: none;*//*eliminar borde*/
/*border-color: cadetblue;*//*color de borde*/
border-radius: 10px 0 ;/*redondear bordes*/
}
/*evento del placeholder*/
.form-modulo .row-text input[type="text"]::placeholder,
.form-modulo .row-text input[type="password"]::placeholder{
color: #8B4513;
font-style: italic;
}
/*evento del enfoque*/
.form-modulo .row-text input[type="text"]:focus,
.form-modulo .row-text input[type="password"]:focus,
.form-modulo .row textarea:focus{
background-color:#FFF5EE;
/*outline:none;*//*eliminarborde externo*/
outline-color:#BC8F8F;/*borde externo*/
}
.form-modulo .row{
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.form-modulo .row-text{
width: 45%;
}
/*combo*/
.form-modulo .row-text select{
width: 100%;
height: 30px;
padding: 0 10px ;
background-color: #F5F5F5;
border-radius: 10px 0 ;/*redondear bordes*/
appearance:none;/*quitar la flecha predeterminada*/
/*agregar una imagen para la flecha*/
background-image: url("../img/flecha.png");
background-size:20px;
background-repeat: no-repeat;
background-position: 98% center;
}
/*para ocultar el checked */
.form-modulo .row input[type="radio"]{
display: none;
}
/*para identificar el checked y
cambiar el formato del label*/
.form-modulo .row #uomo:checked + label,
.form-modulo .row #donna:checked + label,
.form-modulo .row #sg:checked + label{
color:#8B4513;
font-style: italic;
background-image: url(../img/checkbox-checked.jpg);
}
.form-modulo .row #uomo:checked + label:hover,
.form-modulo .row #donna:checked + label:hover,
.form-modulo .row #sg:checked + label:hover{
/*quita la decoracion al ser seleccionado*/
text-decoration: none;
}
.form-modulo .row input[type="radio"] + label{
cursor: pointer;/*mostrar el puntero*/
}
/********formato del combo.*************/
.form-modulo .row-text select .combo{
color: #8B4513;
font-style: italic;
}
select { color:#8B4513; }
option { color:#BC8F8F;
background-color:#F5F5F5; }
/**************************************/
.form-modulo .label-radio label{
width: 30%;
background-color: transparent;
background-image: url(../img/checkbox-unchecked.jpg);
background-size: 20px;
background-repeat:no-repeat;
padding-left: 25px;
/* 0 es a la izquierda*/
background-position: 0 center;
}
.form-modulo .label-radio .row-text{
display: flex;
justify-content: space-between;
}
.form-modulo .label-radio label:hover{
text-decoration: underline;/*subrayado*/
text-decoration-color:chocolate;/*color al subrayado*/
font-style: italic;/*cursiva*/
}
.form-modulo .row textarea{
padding: 10px ;
background-color: #F5F5F5;
border-radius: 10px 0 ;/*redondear bordes*/
width: 90%;
height: 100px;
}
.form-modulo button{
width: 100px;
padding: 20px 0;
color:#fff;
background-color: #696969;
cursor: pointer;
border-radius: 10px 0 ;/*redondear bordes*/
}
No hay comentarios:
Publicar un comentario