Lien entre un formulaire et un tableau

Solutions (1)
Tags :
  • Cell
  • black
|
bonjour,
Je tiens à préciser que j'ai lu certaines publications allant dans le même sens que mon problème je n'ai trouvé aucune solution me concernant.

Je désire crée un lien entre un formulaire que j'ai crée et un tableau, de tel sorte que lorsque je rentre des informations sur le formulaire et que je clique je clique sur "valider", ses informations s'enregistre directement sur mon tableau.

PS: Je découvre et débute à peine dans CSS3, HTML5, JavaScript, SQL, Notpad++,...

Voici une capture d'écran de mon code pour le formulaire :

<!doctype>
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse:collapse;
}
th, td {
padding:5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Information personnel:</legend>
<br>
Nom :
<input type="text" name="nom">
</br>
<br>
Prenom :
<input type="text" name="prenom">
</br>
<br>
Sexe :
<input type="radio" name="gender" value="masculin" checked> Masculin
<input type="radio" name="gender" value="feminin" checked> Feminin
</br>
<br>
Pays :
<input list="browsers" name="Pays">
<datalist id="browsers">
<option value="Allemagne">
<option value="Benin">
<option value="Chine">
<option value="Danemark">
<option value="Egypte">
<option value="France">
<option value="Gabon">
<option value="Honduras">
<option value="Inde">
<option value="Jamaique">
<option value="Kosovo">
<option value="Libye">
<option value="Monaco">
<option value="Noverge">
<option value="Oman">
<option value="Peru">
<option value="Qatar">
<option value="Russie">
<option value="Suede">
<option value="Tunisie">
<option value="Ukraine">
<option value="Venezuela">
<option value="Yemen">
<option value="Zimbabwe">
</datalist>
</br>
<br>
Date de naissance:
<input type="date" name="date de naissance">
<input type="submit">
</br>
<br>
<input type="submit" value="Entree">
<input type="submit" value="Sortie">
</fieldset>
</form>
<br>


Voici une capture d'écran de mon programme pour le tableau :

<!doctype>
<html>
<head>
<style>
body {
margin:0;
padding:0;
height:100%;
width:100%;
}
table {
border-collapse: collapse;
}
tr {
width: 100%;
}
.outer-container {
background-color:#ccc;
position:absolute;
top:0;
left:0;
right:300px;
bottom:40px;
overflow: hidden;
}
.inner-container {
width:100%;
heigth:100%;
position:relative;
overflow-x:scroll;
overflow-y:hidden;
}
.table-header {
float:left;
width:100%;
}
.table-body {
float:left;
height: 100%;
width: inherit;
overflow-y: scroll;
}
.header-cell {
background-color:green;
color: white;
text-align: left;
height: 40px;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){
background-color: #f2f2f2
}
tr:nth-child(odd){
background-color: #fff;
}
.col1, .col3, .col4, .col5 {
width:120px;
min-width: 120px;
}
.col2 {
width:120px;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<thead>
<tr>
<th class="header-cell col1">Rang</th>
<th class="header-cell col2">Nom</th>
<th class="header-cell col3">Prenom</th>
<th class="header-cell col4">Sexe</th>
<th class="header-cell col5">Pays</th>
<th class="header-cell col6">Date de naissance</th>
</tr>
</thead>
</tbody>
</table>
</div>
<div class="table-body">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
<tr>
<td class="body-cell col1">1</td>
<td class="body-cell col2">Snow</td>
<td class="body-cell col3">jon</td>
<td class="body-cell col4">Masculin</td>
<td class="body-cell col5">Kosovo</td>
<td class="body-cell col6">11/03/1998</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Contenus similaires
Score
0
òh
òi
|
Salut,

Alors avant toute chose il existe plusieurs solutions à ton problème.

Mais ton code pour le formulaire contient des erreurs... Je pense qu'elle ne vont pas impacter le fonctionnement mais ils faudra les régler.

Ensuite sais-tu comment fonctionne un formulaire en html ? Quand tu click sur le bouton envoyé sais-tu ce qu'il ce passe ??
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS