<form method="post" action="bbcode2.php" " name="formulaire" ">
  <div id="tout">
    <div id="nomsujet"><strong></strong></div>
    <div id="formsujet">
      <div align="center"><span class="gen"> <span class="titrehaut"><strong>.::Poster un nouveau sujet::.</strong> </span></span></div>
    </div>
    <span class="gen">
    <div id="nomsujet"><strong>Sujet :</strong></div>
      <div id="formsujet">
      <div align="center">
        <input name="sujet" type="text" class="post" id="sujet" style="width: 80%; border: 1px dashed #000000;" tabindex="2" value="" size="45" maxlength="60" />
      </div>
      </div>
      <div id="nomsujet"><strong>Corps du message :</strong></div>
      <div id="formsujet">
      <div align="center"> <img src="bbcode/sample/gras.gif" width="35" height="30" border="0" id="Gras" onmouseover="changetext(content[0])" onclick="javascript:bbcode('[b]', '[/b]');return(false)"/><img src="bbcode/sample/italic.gif" onmouseover="changetext(content[1])" alt="Italic" width="35" height="30" onclick="javascript:bbcode('[i]', '[/i]');return(false)"/><img src="bbcode/sample/gauche.gif" onmouseover="changetext(content[3])" width="35" height="30" border="0" id="Gauche" onclick="javascript:bbcode('[align=left]', '[/align]');return(false)" /><img src="bbcode/sample/centre.gif" onmouseover="changetext(content[4])" alt="Centre" width="35" height="30" onclick="javascript:bbcode('[align=center]', '[/align]');return(false)" /><img src="bbcode/sample/droite.gif" onmouseover="changetext(content[5])" alt="Droite" width="35" height="30" onclick="javascript:bbcode('[align=right]', '[/align]');return(false)" /><img src="bbcode/sample/citation.gif" onmouseover="changetext(content[8])" alt="" width="35" height="30" onclick="javascript:bbcode('[citation=AUTEUR]', '[/citation]');return(false)"/><img src="bbcode/sample/image.gif" onmouseover="changetext(content[6])" alt="Image" width="35" height="30" onclick="javascript:bbcode('[image]', '[/image]');return(false)" /><img src="bbcode/sample/lien.gif" onmouseover="changetext(content[7])" alt="Lien" width="35" height="30" onclick="javascript:lien2();" /> <br />
          <span class="genmed">&nbsp;Couleur :
            <select name="select" class="textarea">
            <option selected="selected" style="disabled="disabled="disabled"">Couleur</option>
            <option value="red" style="color: red" id="red" name="red" onclick="javascript:bbcode('[color=red]', '[/color]'               );return(false)">Rouge</option>
            <option value="purple" style="color: orange " id="purple" name="purple" onclick="javascript:bbcode('[color=orange]', '[/color]');return(false)">Orange</option>
            <option value="yellow"  style="color: yellow" id="yellow" name="yellow" onclick="javascript:bbcode('[color=yellow]', '[/color]');return(false)">Jaune</option>
            <option value="lime"  style="color: green" id="green" name="green" onclick="javascript:bbcode('[color=lime]', '[/color]');return(false)">Vert clair</option>
            <option value="green"  style="color: green" id="green" name="green" onclick="javascript:bbcode('[color=green]', '[/color]');return(false)">Vert</option>
            <option value="olive" style="color: olive" id="olive" name="olive" onclick="javascript:bbcode('[color=olive]', '[/color]');return(false)">Vert olive</option>
            <option value="blue" style="color: blue" id="blue" name="blue" onclick="javascript:bbcode('[color=blue]', '[/color]');return(false)">Bleu</option>
            <option value="purple" style="color: pink" id="purple" name="purple" onclick="javascript:bbcode('[color=pink]', '[/color]');return(false)">Rose</option>
            <option value="purple" style="color: fuchsia" id="purple" name="purple" onclick="javascript:bbcode('[color=fuchsia]', '[/color]');return(false)">Rose vif</option>
            <option value="purple" style="color: purple" id="purple" name="purple" onclick="javascript:bbcode('[color=purple]', '[/color]');return(false)">Violet</option>
            <option value="marron" style="color: marron" id="purple" name="purple" onclick="javascript:bbcode('[color=marron]', '[/color]');return(false)">Marron</option>
          </select>
            &nbsp;Taille :
            <select name="select2" style="border: 1px dashed #000000; font-family: Trebuchet MS;" class="textarea" >
              <option selected="selected" disabled="disabled">Taille</option>
              <option value="8" id="8" name="8" onclick="javascript:bbcode('[size=8]', '[/size]');return(false)">8</option>
              <option value="10" id="10" name="10" onclick="javascript:bbcode('[size=10]', '[/size]');return(false)">10</option>
              <option value="12" id="12" name="12" onclick="javascript:bbcode('[size=12]', '[/size]');return(false)">12</option>
              <option value="14" id="14" name="14" onclick="javascript:bbcode('[size=14]', '[/size]');return(false)">14</option>
              <option value="16" id="16" name="16" onclick="javascript:bbcode('[size=16]', '[/size]');return(false)">16</option>
              <option value="18" id="18" name="18" onclick="javascript:bbcode('[size=18]', '[/size]');return(false)">18</option>
              <option value="20" id="20" name="20" onclick="javascript:bbcode('[size=20]', '[/size]');return(false)">20</option>
              <option value="22" id="22" name="22" onclick="javascript:bbcode('[size=22]', '[/size]');return(false)">22</option>
              <option value="24" id="24" name="24" onclick="javascript:bbcode('[size=24]', '[/size]');return(false)">24</option>
            </select>
          </span><br />
          <br />
        <div class="Style4" id="descriptions">
            <div align="center">Astuce : Une mise en forme peut &ecirc;tre appliqu&eacute;e au texte s&eacute;lectionn&eacute;.</div>
        </div>
        <br />
      </div>
      </div>
    </span>
    <div id="nomsujet"><strong>
      <table width="100" border="0" align="center" cellpadding="5" cellspacing="0" id="tablesmileys" style="border: 1px dashed #000000; background-color: #D9F1FF;">
        <tbody>
          <tr align="center">
            <td colspan="4" class="gensmall" style="background-color: #FFFFFF;" ><b>Smileys : </b></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys"><img src="smileys/icon_cool.gif" onclick="javascript:smilies(':cool:');return(false)" alt="" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_cry.gif" onclick="javascript:smilies(':\'(');return(false)" alt="" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_eek.gif" alt="" width="15" onclick="javascript:smilies('8|');return(false)" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_confused.gif" alt="" width="15" height="15" onclick="javascript:smilies(':confused:');return(false)" /></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys"><img src="smileys/icon_evil.gif" alt="" onclick="javascript:smilies('6(');return(false)" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_twisted.gif" alt="" width="15" height="15" onclick="javascript:smilies(':twisted:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_mad.gif" onclick="javascript:smilies('=B');return(false)" alt="" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_neutral.gif" alt="" width="15" height="15" onclick="javascript:smilies(':|');return(false)"/></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys"><img src="smileys/icon_razz.gif" alt="" width="15" height="15" onclick="javascript:smilies('');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_redface.gif" alt="" width="15" height="15" onclick="javascript:smilies(':redface:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_rolleyes.gif" alt="" width="15" height="15" onclick="javascript:smilies(':rolleyes:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_sad.gif" alt="" width="15" height="15" onclick="javascript:smilies(':(');return(false)" /></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys"><img src="smileys/icon_frown.gif" onclick="javascript:smilies('=(');return(false)" alt="" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_idea.gif" alt="" width="15" onclick="javascript:smilies('0-');return(false)" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_mrgreen.gif" alt="" width="15" height="15" onclick="javascript:smilies(':green:');return(false)"/></td>
            <td class="tablesmileys"><img src="smileys/icon_idea.gif" alt="" width="15" onclick="javascript:smilies('0-');return(false)" height="15" /></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys"><img src="smileys/icon_smile.gif" alt="" width="15" height="15" onclick="javascript:smilies(':)');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_surprised.gif" alt="" onclick="javascript:smilies(':surprised:');return(false)" width="15" height="15" /></td>
            <td class="tablesmileys"><img src="smileys/icon_exclaim.gif" alt="" width="15" height="15" onclick="javascript:smilies(':!:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_question.gif" alt="" width="15" height="15" onclick="javascript:smilies(':?:');return(false)" /></td>
          </tr>
          <tr align="center" valign="middle">
            <td class="tablesmileys" height="25"><img src="smileys/icon_arrow.gif" alt="" width="15" height="15" onclick="javascript:smilies(':arrow:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_arrowd.gif" alt="" width="15" height="15" onclick="javascript:smilies(':arrowd:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_arrowl.gif" alt="" width="15" height="15" onclick="javascript:smilies(':arrowl:');return(false)" /></td>
            <td class="tablesmileys"><img src="smileys/icon_arrowu.gif" alt="" width="15" height="15" onclick="javascript:smilies(':arrowu:');return(false)" /></td>
          </tr>
        </tbody>
      </table>
    </strong></div>
    <div id="formsujet">
      <div align="center">
        <textarea cols="75" rows="10" id="textarea" name="textarea" class="textarea" style="border: 1px dashed #000000; width: auto; font-family: Trebuchet MS;" ></textarea>
      </div>
    </div>
            <div id="nomsujet"><strong></strong></div>
      <div id="formsujet" align="center">
        <img src="bbcode/sample/previsu.gif" alt="" width="86" height="19" onclick="apercu('prev');" />
                          <input name="auto" id="auto" type="checkbox" onclick="automatique()" />Pr&eacute;visualisation automatique
</div>
<div id="prev"></div>
  </div>
</form>

<style>
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.tablesmileys:hover {
background-color: #FFFFFF; }
#tout {
width: 75%;
margin-left: auto;
margin-right: auto;
border: 1px dashed #000000;
overflow:hidden;
}
#titre {
width: 100%;
font: 14px;
padding-bottom: 10px;
padding-top: 10px;
}
#sujet {
width: 100%
}
#nomsujet {
width: 15%;
padding-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
float:left;

}
#formsujet {
margin-left: auto;
margin-right: auto;
padding-left: 1%;
padding-top: 1%;
padding-bottom: 1%;
width: 80%;
float:left;  }
.titrehaut {
font-size: 14px; }
.textarea {
background-color: #D9F1FF;
border: 1px dashed #000000;
width: auto;
font-family: Trebuchet MS; }

.textarea:hover {
background-color: #FFFFFF;
border: 1px dashed #000000;
width: auto;
font-family: Trebuchet MS; }
.Style4 {font-size: 10px}
div#legende {
width: auto;
padding-left: 22%;
padding-top: 5px;
height: 30px;
}
#prev {
        height: 300px;
        overflow: auto;   
    margin-left: 5px;
        border: 1px dashed #000000;
    margin-right: 5px;}

</style>