<form method="post" action="Servlet">

                        <div class="field half">
                    <!--        <label for="name">Rechercher</label> -->

                            <select id="selected" value=""  name="AttributDeRecherche" onchange="showInput(this);">
                              <option value="Titre">Titre</option>
                              <option value="NumeroProjet">Numero projet</option>
                              <option value="CodeInterne">Code interne</option>
                            </select>

                        </div>

                        <div class="field half" id="Titre" style="display: block;">
                            <input type="Text"  name="Titre" value="Titre" min='1'  placeholder="Entrez le titre" required>
                        </div>


                        <div class="field half" id="NumeroProjet" style="display: none;">
                                                                                <!--le numero du projet est compose de 4/5 chiffres -->
                            <input type="number"  name="NumeroProjet" value="NumeroProjet" min='1'  placeholder="Entrez le numero projet" pattern="[0-9]{5}" required>
                        </div>


                        <div class="field half" id="CodeInterne" style="display: none;">
                                                                        <!--le code interne est compose de 4 chiffres -->
                            <input type="number"  name="CodeInterne" value="CodeInterne" min='1' placeholder="Entrez le code interne"  pattern="[0-9]{4}" required>
                        </div>

                        <input type="hidden" name="pageName" value="RechercherUnOuvrage">
                        <ul class="actions">
                            <li><input id="Submit" value="Rechercher" class="button alt" type="submit" ></li>

                        </ul>


                    </form>

function showInput(that) {
        switch(that.value){
        case "Titre":{
            document.getElementById("Titre").style.display = "block";

            document.getElementById("CodeInterne").style.display = "none";
            document.getElementById("NumeroProjet").style.display = "none";
            break;
        }
        case "CodeInterne":{
            document.getElementById("CodeInterne").style.display = "block";

            document.getElementById("NumeroProjet").style.display = "none";
            document.getElementById("Titre").style.display = "none";
            break;
        }
        case "NumeroProjet":{
            document.getElementById("NumeroProjet").style.display = "block";

            document.getElementById("CodeInterne").style.display = "none";
            document.getElementById("Titre").style.display = "none";
            break;
        }

    }
    }