<div id="scode">
<form method="post" action="index.php">
<fieldset>
<legend>sCode</legend>

        <!-- Les liens javascript pour inserer les balises -->
       
        <!-- Titre et sous titre -->
        <div id="sujet">
                <div class="input"><label>Titre : <input type="text" name="titre" /></label></div>
                <div class="input"><label>Sous titre : <input type="text" name="sous_titre" /></label></div>
        </div>
       
        <!-- Police -->
        <div id="police">
                <a href="#" onclick="javascript:scode('<gras>', '</gras>');return(false)"><img src="images/scode/gras.jpg" alt="Gras" title="Gras" /></a>
                <a href="#" onclick="javascript:scode('<italique>', '</italique>');return(false)"><img src="images/scode/italique.jpg" alt="Italique" title="Italique"/></a>
                <a href="#" onclick="javascript:scode('<souligne>', '</souligne>');return(false)"><img src="images/scode/souligne.jpg" alt="Souligne" title="Souligne"/></a>
                <a href="#" onclick="javascript:scode('<barre>', '</barre>');return(false)"><img src="images/scode/barre.jpg" alt="Barre" title="Barre"/></a>
        </div>
       
        <!-- Interactivité -->
        <div id="interactivite">
                <a href="#" onclick="javascript:scode('<citation>', '</citation>');return(false)"><img src="images/scode/citation.jpg" alt="Citation" title="Citation" /></a>
                <a href="#" onclick="javascript:var adresse = prompt('Adresse de l\'image');scode('<image>'+adresse+'', '</image>');return(false)"><img src="images/scode/image.jpg" alt="Image" title="Image" /></a>
                <a href="#" onclick="javascript:var adresse = prompt('Adresse du lien'); var nom = prompt('Nom du lien');scode('<lien='+adresse+'>'+nom+'', '</lien>');return(false)"><img src="images/scode/lien.jpg" alt="Lien" title="Lien" /></a>
                <a href="#" onclick="javascript:var adresse = prompt('Adresse du lien'); var nom = prompt('Nom du lien');scode('<mail='+adresse+'>'+nom+'', '</mail>');return(false)"><img src="images/scode/mail.jpg" alt="Mail" title="Mail" /></a>
        </div>
       
        <!-- Position -->
        <div id="position">
        <select name="position">
                <span class="titre_option"><option value="position" selected="selected">Position</option></span>
                <option value="position_gauche" onclick="javascript:scode('<texte=gauche>', '</texte>');this.parentNode.selectedIndex=0;">Gauche</option>
                <option value="position_milieu" onclick="javascript:scode('<texte=milieu>', '</texte>');this.parentNode.selectedIndex=0;">Milieu</option>
                <option value="position_droite" onclick="javascript:scode('<texte=droite>', '</texte>');this.parentNode.selectedIndex=0;">Droite</option>
                <option value="position_justifie" onclick="javascript:scode('<texte=justifie>', '</texte>');this.parentNode.selectedIndex=0;">Justifié</option>
        </select>
        </div>
       
        <!-- Taille -->
        <div id="taille">
        <select name="taille">
                <span class="titre_option"><option value="taille" selected="selected">Taille</option></span>
                <option value="minuscule" onclick="javascript:scode('<taille=minuscule>', '</taille>');this.parentNode.selectedIndex=0;">Minuscule</option>
                <option value="tres_petit" onclick="javascript:scode('<taille=tres_petit>', '</taille>');this.parentNode.selectedIndex=0;">Très Petit</option>
                <option value="petit" onclick="javascript:scode('<taille=petit>', '</taille>');this.parentNode.selectedIndex=0;">Petit</option>
                <option value="moyen" onclick="javascript:scode('<taille=moyen>', '</taille>');this.parentNode.selectedIndex=0;">Moyen</option>
                <option value="grand" onclick="javascript:scode('<taille=grand>', '</taille>');this.parentNode.selectedIndex=0;">Grand</option>
                <option value="tres_grand" onclick="javascript:scode('<taille=tres_grand>', '</taille>');this.parentNode.selectedIndex=0;">Très Grand</option>
                <option value="enorme" onclick="javascript:scode('<taille=enorme>', '</taille>');this.parentNode.selectedIndex=0;">Enorme</option>
        </select>
        </div>
       
        <!-- Couleur -->
        <div id="couleur">
        <select name="couleur">
                <span class="titre_option"><option value="couleur" selected="selected">Couleur</option></span>
                <option value="blanc" style="color:white;" onclick="javascript:scode('<couleur=blanc>', '</couleur>');this.parentNode.selectedIndex=0;">Blanc</option>
                <option value="argent" style="color:silver;" onclick="javascript:scode('<couleur=argent>', '</couleur>');this.parentNode.selectedIndex=0;">Argent</option>
                <option value="gris" style="color:grey;" onclick="javascript:scode('<couleur=gris>', '</couleur>');this.parentNode.selectedIndex=0;">Gris</option>
                <option value="noir" style="color:black;" onclick="javascript:scode('<couleur=noir>', '</couleur>');this.parentNode.selectedIndex=0;">Noir</option>
                <option value="rouge" style="color:red;" onclick="javascript:scode('<couleur=rouge>', '</couleur>');this.parentNode.selectedIndex=0;">Rouge</option>
                <option value="marron" span style="color:maroon;" onclick="javascript:scode('<couleur=marron>', '</couleur>');this.parentNode.selectedIndex=0;">Marron</option>
                <option value="vert_citron" style="color:lime;" onclick="javascript:scode('<couleur=vert_citron>', '</couleur>');this.parentNode.selectedIndex=0;">Vert Citron</option>
                <option value="vert" style="color:green;" onclick="javascript:scode('<couleur=vert>', '</couleur>');this.parentNode.selectedIndex=0;">Vert</option>
                <option value="vert_eau" style="color:teal;" onclick="javascript:scode('<couleur=vert_eau>', '</couleur>');this.parentNode.selectedIndex=0;">Vert Eau</option>
                <option value="jaune" style="color:#EDD42D;" onclick="javascript:scode('<couleur=jaune>', '</couleur>');this.parentNode.selectedIndex=0;">Jaune</option>
                <option value="olive" style="color:olive;" onclick="javascript:scode('<couleur=olive>', '</couleur>');this.parentNode.selectedIndex=0;">Olive</option>
                <option value="bleu" style="color: blue;" onclick="javascript:scode('<couleur=bleu>', '</couleur>');this.parentNode.selectedIndex=0;">Bleu</option>
                <option value="bleu_fonce" style="color:navy;" onclick="javascript:scode('<couleur=bleu_fonce>', '</couleur>');this.parentNode.selectedIndex=0;">Bleu Foncé</option>
                <option value="bleu_claire" style="color:aqua;" onclick="javascript:scode('<couleur=bleu_claire>', '</couleur>');this.parentNode.selectedIndex=0;">Bleu Claire</option>
                <option value="rose" style="color:fuchsia;" onclick="javascript:scode('<couleur=rose>', '</couleur>');this.parentNode.selectedIndex=0;">Rose</option>
                <option value="violet" style="color:purple;" onclick="javascript:scode('<couleur=violet>', '</couleur>');this.parentNode.selectedIndex=0;">Violet</option>
        </select>
        </div>
       
        <!-- Titre -->
        <div id="titre">
        <select name="titre">
                <span class="titre_option"><option value="titre" selected="selected">Titre</option></span>
                <option value="taille1" onclick="javascript:scode('<titre=1>', '</titre>');this.parentNode.selectedIndex=0;">Taille 1</option>
                <option value="taille2" onclick="javascript:scode('<titre=2>', '</titre>');this.parentNode.selectedIndex=0;">Taille 2</option>
                <option value="taille3" onclick="javascript:scode('<titre=3>', '</titre>');this.parentNode.selectedIndex=0;">Taille 3</option>
                <option value="taille4" onclick="javascript:scode('<titre=4>', '</titre>');this.parentNode.selectedIndex=0;">Taille 4</option>
        </select>
        </div>
       
        <!-- Parti du formulaire : Textarea, div pour apercu et bouton pour soumettre -->
        <div id="block_scode">
                <div><textarea name="textarea_scode"><? if (!empty($_POST['textarea_scode'])){echo $_POST['textarea_scode'];}?></textarea></div>
                <div class="button"><input type="button" value="Aperçu" onclick="javascript:previsualisation();return(false)"/></div>
                <div id="apercu"></div>
                <div class="submit"><input type="submit" value="Envoyer" /></div>
        </div>
       
</fieldset>
</form>
</div>
 

/* Fichier css styblue */

/* Formulaire sCode */
#scode{
        width:90%;
        margin: auto;
}

#scode fieldset{
        border: 1px solid black;
}

#scode legend{
        border: 1px solid black;
}