JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<h1> Formulaire d'inscription au club de Natation de ....</h1>

<form  id="formulaire" method="POST" action="">
    <table>
        <tr>
            <td class="premier">
                <label for='nom'>NOM DE FAMILLE :</label>
            </td>
            <td>
                <input type="text" class="champ" id="nom" placeholder="entrer votre nom de famille" />
            </td>
        </tr>
        <tr>
            <td class="premier">
                <label for='prenom'>PRENOM :</label>
            </td>
            <td>
                <input type="text" class="champ" id="prenom" placeholder="entrer votre prénom " />
            </td>
        </tr>
        <tr>
            <td class="premier">
                <label for='naissance_jour'>DATE DE NAISSANCE :</label>
            </td>
            <td>
                <input type="text" class="champ_naissance" id="naissance_jour" placeholder="jour" />
                <input type="text" class="champ_naissance" id="naissance_mois" placeholder="mois" />
                <input type="text" class="champ_naissance" id="naissance_annee" placeholder="annee" />
            </td>
        </tr>
        <tr>
            <td class="premier_adresse">
                <label for='adresse_principale'>ADRESSE :</label>
            </td>
            <td>
                <input type="text" class="champ_adresse" id="adresse_principale" placeholder="rue " />
                <br/>
                <input type="text" class="champ_adresse" id="adresse_principale_code" placeholder="c.postal " />
                <br/>
                <input type="text" class="champ_adresse" id="adresse_principale_ville" placeholder="ville " />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="checkbox" id="famille" onclick="ma_fonction()" />si famille séparer, cocher la case</td>
        </tr>
        <tr id="deuxieme_adresse">
            <td class="premier_adresse">
                <label...

CSS

table, tr, td {
    border:1px solid #000;
    border-collapse:collapse;
}
.premier {
    width:200px;
    text-align:center;
    padding-right:10px;
}
.premier_adresse {
    vertical-align:middle;
    text-align:center;
}
.champ {
    width : 200px;
}
.champ_naissance {
    width:61px;
}
.champ_adresse {
    width:200px;
}
#adresse_code {
    width:50px;
}
#deuxieme_adresse, #categorie {
    visibility:hidden;
}
#discip {
    text-align:center;
}

#categorie{
    text-align:center;
    vertical-align:middle;
}

JavaScript

function ma_fonction() {
    var x = document.getElementById("famille").checked;
    if (x === true) {
        document.getElementById("deuxieme_adresse").style.visibility = "visible";
    } else {
        document.getElementById("deuxieme_adresse").style.visibility = "hidden";
    }
}

function discipline(id) {
    var choix = document.getElementById(id).checked;
    if (choix === true) {
        document.getElementById("categorie").style.visibility = "visible";
    } else {
        document.getElementById("categorie").style.visibility = "hidden";
    }
}

function radio(){
    var m=0;
    for (i=0;i<6;i++) {
        if (document.forms.formulaire.categorie[i].checked===true) { 
            m=i; 
            var cat ="";
            if(m === 0){cat ="poussin";}
            if(m === 1){cat ="benjamin";}
            if(m === 2){cat ="minime";}
            if(m === 3){cat ="cadet";}
            if(m === 4){cat ="junior";}
            if(m === 5){cat ="senior";}
            
            //alert(m+1 + "C'est le choix "+Number(i+1)+" qui est sélectionné");
            return (cat);
            
        }       
    }
    
}
function valider() {
    var reponse= document.getElementById("rep");
    reponse.innerHTML = "";    
    var nom = document.getElementById("nom").value;
    var prenom = document.getElementById("prenom").value;
    var date = document.getElementById("naissance_jour").value + "/" + document.getElementById("naissance_mois").value + "/" + document.getElementById("naissance_annee").value;
    var adresse = document.getElementById("adresse_principale").value + "<br/>" + document.getElementById("adresse_principale_code").value + "<br\>" + document.getElementById("adresse_principale_ville").value;
    var separation = document.getElementById("famille").checked;
    if (separation === true) {
        var adresse_secondaire = document.getElementById("adresse_secondaire").value + "<br\>" + document.getElementById("adresse_secondaire_code").value + "<br\>" +...