Form contatti
Vediamo come come creare una form per i contatti come potete vedere qui:
Pagina web con form per i contatti
Per ottenere questo risultato nella pagina web bisogna scrivere i seguenti codici html.
Codice HTML
<div class="container">
<form action="action_page.php">
<label for="fname">Nome</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Cognome</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Paese</label>
<select id="country" name="country">
<option value="australia">Italia</option>
<option value="canada">Svizzera</option>
<option value="usa">Altro paese</option>
</select>
<label for="subject">Messaggio</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Invia">
</form>
</div>
Codice CSS
/* Style inputs with type="text", select elements and textareas /
input[type=text], select, textarea {
width: 100%; / Full width /
padding: 12px; / Some padding /
border: 1px solid #ccc; / Gray border /
border-radius: 4px; / Rounded borders /
box-sizing: border-box; / Make sure that padding and width stays in place /
margin-top: 6px; / Add a top margin /
margin-bottom: 16px; / Bottom margin /
resize: vertical / Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
