Form contatti

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>

    <label for="subject">Messaggio</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Invia">

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; }