Salut voici un exemple.... bon bien sur a toi de refaire le style a ton goût :
<html>
<head>
<style type="text/css">
form
{
margin:0 0 0 0;
padding:0 0 0 0;
}
.Onglet
{
width:250px;
}
.currentOnglet
{
display:block;
text-decoration:none;
border:2px solid;
background:#FFF000;
}
.normalOnglet
{
display:block;
text-decoration:none;
border:1px inset;
background:#FFFFFF;
}
.formOnglet
{
border:2px solid;
width:300px;
}
.tab1
{
background:#00F00F;
}
.tab2
{
background:#0566FA;
}
.tab3
{
background:#FFA234;
}
.tab4
{
background:#FF0000;
}
</style>
<script type="text/javascript">
lastOnglet = '';
currentOnglet = '';
function setOnglet(id,newOnglet)
{
lastOnglet.className = 'normalOnglet';
document.getElementById('formOnglet').innerHTML = document.getElementById(id).innerHTML;
document.getElementById('formOnglet').className = 'formOnglet '+id;
newOnglet.className='currentOnglet';
lastOnglet = newOnglet;
}
</script>
</head>
<body onload="setOnglet('tab1',document.getElementById('defaultOnglet'));">
<div id="loginOnglet" class="OngletLog">
<table class="Onglet">
<tr>
<td>
<a id='defaultOnglet' href=# onclick="setOnglet('tab1',this);return false;" class="normalOnglet">onglet 1</a>
</td>
<td>
<a href=# onclick="setOnglet('tab2',this);return false;" class="normalOnglet">onglet 2</a>
</td>
<td>
<a href=# onclick="setOnglet('tab3',this);return false;" class="normalOnglet">onglet 3</a>
</td>
<td>
<a href=# onclick="setOnglet('tab4',this);return false;" class="normalOnglet">onglet 4</a>
</td>
</tr>
</table>
<div id='formOnglet'></div>
</div>
<div style="display:none;">
<div id="tab1">
<form action=# method="post">
<table>
<tr>
<td>
Onglet 1 login
</td>
</tr>
<tr>
<td>
Login: <input type="text" name="login" size=8>
Password: <input type="text" name="passwd" size=8>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log">
</td>
</tr>
</table>
</form>
</div>
<div id="tab2">
<form action=# method="post">
<table>
<tr>
<td>
Onglet 2 login
</td>
</tr>
<tr>
<td>
Login: <input type="text" name="login" size=8>
Password: <input type="text" name="passwd" size=8>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log">
</td>
</tr>
</table>
</form>
</div>
<div id="tab3">
<form action=# method="post">
<table>
<tr>
<td>
Onglet 3 login
</td>
</tr>
<tr>
<td>
Login: <input type="text" name="login" size=8>
Password: <input type="text" name="passwd" size=8>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log">
</td>
</tr>
</table>
</form>
</div>
<div id="tab4">
<form action=# method="post">
<table>
<tr>
<td>
Onglet 4 login
</td>
</tr>
<tr>
<td>
Login: <input type="text" name="login" size=8>
Password: <input type="text" name="passwd" size=8>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Log">
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Bonne prog @+
-- The Rubik's Man --