<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<script>
function valita(){
var frm=document.forms['frmEsercitazione'];
if(frm.cboRubrica.value=="1"){
alert('Campo Obbligatorio: Rubrica');
}else if(frm.txtComune.value==""){
alert('Campo Obbligatorio: Comune');
}else if(frm.cboProvincia.value=="1"){
alert('Campo Obbligatorio: Provincia');
}else if(frm.idTextarea.value==""){
alert('Campo Obbligatorio: Testo Annuncio');
}else if(frm.txtTelefono.value==""){
alert('Campo Obbligatorio: Telefono');
}else if(frm.txtEmail.value==""){
alert('Campo Obbligatorio: Email');
}else{
frm.submit();
}
}
</script>
<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>
<option value=1>-Rubrica-</option>
<option value=2>Rubrica 1</option>
<option value=3>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 type=textbox name=txtComune>
<div><p>Provincia*:</p></div>
<select name=cboProvincia>
<option value=1>-Provincia-</option>
<option value=2>Provincia</option>
<option value=3>Provincia</option>
<option>
</select>
</div>
</div>
<div class="form-r">
<div class="form-d">
<p>Testo annuncio *:</p>
</div>
<div class="form-s">
<textarea id=idTextarea placeholder="scrivi..."></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>
</div>
<div><p>Email*:</p></div>
<input type=textbox name=txtEmail>
</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>
<input type="button" value="Registra" onClick="valita();" >
</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