Envoyer mail avec bouton

Bonjour à tous !

Je suis débutante en HTML, PHP, etc.. mais j'ai tout de même réussi à créer mon formulaire en HTML !

(Je suis désolée, je n'ai pas réussi à faire fonctionner les balises de code)

Voici le code et les explications plus bas :

index2.php

<style type"text/css">
@import 'style.css';
</style>

<center> Envoi de mail </center>

<form action="/index2.php" method="post">

<div>
<label for="nom">Objet :</label>
<input type="text" id="nom" />
</div>


<INPUT type="checkbox" name="TEST1" value="1" checked> TEST1
<INPUT type="checkbox" name="TEST2" value="2"> TEST2
<INPUT type="checkbox" name="TEST3" value="3"> TEST3



<div>
<label for="debut">Debut de la perturbation :</label>
<input type="text" id="debut" />
</div>


<div>
<label for="fin">Fin de la perturbation :</label>
<input type="text" id="fin" />
</div>

<div>
<label for="message">Description :</label>
<textarea id="messagedescription"></textarea>
</div>

<div>
<label for="message">Incidence :</label>
<textarea id="messageincidence"></textarea>
</div>

<div class="button">
<button type="submit"  onclick='mail($destinataire,$sujet,$header)'>Envoyer</button>
</div>

<div class="button">
<button type="reset">Annuler</button>
</div>

</form>




<?php
$sujet = "test";
//$message = "La perturbation aura lieu de $debut à $fin";

$destinataire ="xxxx@xxx.fr";
$header = "From : \"daphmo\"<xxxx@xxx.fr>".$passage_ligne;
$header.= "Reply : \" daphmo\"<xxxx@xxxr.fr>".$passage_ligne;
$header.= "MIME-Version: 1.0".$passage_ligne;


$message = "...";
$message .= "Content-Type: text/html; charset=\"ISO-8859-1\"".$passage_ligne;
$message .= "Content-Transfer-Encoding: 8bit".$passage_ligne;
$message .= "...";

mail($destinataire,$sujet,$message,$header);

?>

style.css :

/* 

Template mail

*/

form {
/* Pour le centrer dans la page */
margin: 0 auto;
width: 500px;
/* Pour voir les limites du formulaire */
padding: 1em;
border: 2px solid #999;
border-radius: 1em;
}

/* Espace les blocs en hauteur */
form div + div {
margin-top: 1em;
}

/* Aligne les étiquettes et leur donne la même dimension */
label {
display: inline-block;
width: 120px;
text-align: right;
}

input, textarea {
/* Pour que tous les champs text utilisent la même police */
fontl: 1em verdana;
/* Pour donner la même dimension à tous les champs text*/ 
width: 300px;
-moz-box-sizing: border-box;
l box-sizing: border-box;
/* Harmoniser l'apparence des bordures des champs text */
border: 1px solid #999;
}

input:focus, textarea:focus {
/* Réhausse les éléments actifs */
border-color: #000;
}

textarea {
/* Pour aligner les champs multilignes et leurs étiquettes */
vertical-align: top;
/* Pour donner assez d'espace pour entrer du texte */
height: 5em;
/* Pour permettre aux utilisateurs de redimensionner un champ horizontalement */
resize: vertical;
}

.button {
/* Pour positionner les boutons de la même manière que les champs text */
padding-left: 117px;
}

button {
/* Cette marge représente approximativement le même espace que celui entre les étiquettes et les champs text */
margin-left: .5em;
/* pour mettre les deux boutons côte à côte */
float: left;
}

Donc je vous explique mon soucis : je voudrai que lorsque j'appuie sur le bouton Envoyer, un message s'envoie en reprenant les valeurs rentrées par l'utilisateur dans les champs. Dans un premier temps, je voudrai juste que ça envoie un mail avec des champs saisis directement dans le code mais même ça, je n'y arrive pas !

Je vous remercie par avance pour votre aide

Daphné