<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
<link rel ="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<form name=frmEsercitazione action=processa.html method=post>
<div class="form-Esercitazione">
<div class="form-h">
<div class="form-d">
<p>Rubrica *:</p>
</div>
<div class="form-s">
<select name=cboRubrica required>
<option value="">-Rubrica-</option>
<option value=1>Rubrica 1</option>
<option value=2>Rubrica 2</option>
<option>
</select>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Comune di <br> ubicazione <br> dell'imombile *:</p>
</div>
<div class="form-s">
<input name="nome" id="txtComune"
type="text" required autofocus="autofocus">
<div><p>Provincia*:</p></div>
<fieldset>
<select name=cboProvincia required>
<option value="">-Provincia-</option>
<option value=1>Provincia</option>
<option value=2>Provincia</option>
<option>
</select>
</fieldset>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Testo annuncio *:</p>
</div>
<div class="form-s">
<textarea id=idTextarea
placeholder="scrivi..." required></textarea>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Telefono *:</p>
</div>
<div class="form-s">
<div class="marg-30">
<input type=textbox
name=txtTelefono
type="tel" required> </div>
<div><p>Email*:</p></div>
<input type=textbox
name=txtEmail type="email"
placeholder="nome@dominio.it" required>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>MQ:</p>
</div>
<div class="form-s">
<div class="marg-30">
<input type=textbox name=txtMQ> </div>
<div><p>Prezzo:</p></div>
<input type=textbox name=txtPrezzo>
</div>
</div>
<div class="form-Esercitazione">
<div class="form-e">
<p >deve essere espresso <br>
in Euro (senza . o ,)</p>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p class="p1">(da inserire per case <br> vacanza)</p>
<p>Posti letto</p>
</div>
<div class="form-s">
<div><input type=textbox name=txtPosti></div>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Foto</p>
</div>
<div class="form-s">
<input type=checkbox name=chkFoto>
<p>Nome Foto:</p>
<input type=textbox name=txtNomeFoto>
<input type="button" value="Sfoglia..."
onclick="document.getElementById('getFile').click();">
<input type="file" id="getFile" hidden>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Numero parole:</p>
</div>
<div class="form-s">
<div><input type=textbox name=txtParole></div>
</div>
</div>
<div class="form-Esercitazione">
<div class="form-centr">
<p >*Campi Obbligatori</p>
<div class="amarillo">
<p>Il presente annuncio sara*
pubblicato sia sul sito che
sull'edizione cartacea</p>
</div>
</div>
</div>
</div>
<div class="bottone">
<div class="bottone-conten">
<div><input type=button value=Preview></div>
<div><button name="commenti" id="commenti">Registra</button></div>
<div><input type=reset value=Cancella></div>
</div>
</div>
</form>
</body>
</html>
CSS:
.form-Esercitazione{
width:700px;
margin: auto;
opacity: 0.7;
background: rgb(242, 243, 245);
}
.bottone{
width:700px;
margin: auto;
display: flex;
justify-content: center;
}
.bottone .bottone-conten{
justify-content: space-around;
width: 250px;
display: flex;
align-items: center;
}
.form-Esercitazione .form-h{
background: #6495ED;
display: flex;
padding: 5px;
}
.form-Esercitazione .form-r{
display: flex;
padding: 5px;
}
.form-Esercitazione .form-d{
width: 200px;
text-align:right;
/* background: green;*/
}
.form-Esercitazione .form-r .form-d .fot{
width: 100%;
height: 100%;
align-items:flex-end;
}
.form-Esercitazione .form-s{
width: 500px;
display: flex;
align-items:flex-end;
}
.form-Esercitazione .form-s input[type="checkbox"]{
height: 20px;
margin-right: 90px;
}
p{
margin: auto 5px;
color: blue;
font-weight: bolder;
}
.form-Esercitazione .form-s input[type="textbox"]{
height: 20px;
}
.form-Esercitazione .form-s textarea{
height: 50px;
width: 70%;
}
.form-Esercitazione .form-e{
margin: 0;
width: 100%;
text-align: right;
}
.form-Esercitazione .form-e p{
margin-right: 100px;
font-size: 12px;
font-weight: bolder;
}
.p1{
font-size: 12px;
font-weight: bolder
}
.marg-30{
margin-right: 50px;
}
.form-centr p{
text-align: center;
margin-bottom: 30px;
margin-top: 30px;
}
.form-Esercitazione .form-centr .amarillo p{
color:rgb(218, 146, 51);
}
No hay comentarios:
Publicar un comentario