Ajouter une legende dans un formulaire

<!DOCTYPE html>
<html>
<head>
<title>Formulaire Legend avec validation | par NGLESSON </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keyword" content="Formulaire Legend avec validation">
<meta name="author" content="Mezgani said">
<meta name="copyright" content="NGLESSON">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container mt-5">
    <h2 class="text-center">Formulaire Legend avec validation</h2>
    <fieldset class="scheduler-border">
      <legend class="scheduler-border">Information personnelles</legend>
      <form action="" class="needs-validation" novalidate>
        <div class="form-group">
          <div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="inputgenre" value="m" required>M
            </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="inputgenre" value="mme" required>Mme
            </label>
          </div>
          <div class="form-check-inline disabled">
            <label class="form-check-label">
              <input type="radio" class="form-check-input" name="inputgenre" value="mlle" required>Mlle
            </label>
          </div>   
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>       
        </div>
        <div class="form-group">
          <label for="inputname">Nom complet:</label>
          <input type="text" class="form-control" id="inputname" placeholder="Nom complet" name="inputname" required>
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>
        </div>
        <div class="form-group">
          <label for="inputpays">Pays:</label>
          <input type="text" class="form-control" id="inputpays" placeholder="Pays" name="inputpays" list="listpays" required>
            <datalist id="listpays">
               <option value="Maroc">Maroc</option>
               <option value="France">France</option>
               <option value="Canada">Canada</option>
            </datalist>
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>
        </div>
        <div class="form-group">
          <label for="inputsituation">Situation familiaire:</label>
          <select class="form-control" id="inputsituation" required>
            <option value=""></option>
            <option value="c">Célibataire</option>
            <option value="e">En couple</option>
            <option value="m">Marié</option>
          </select>
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>
        </div>
        <div class="form-group">
          <label for="inputdate">Date de naissance:</label>
          <input type="date" class="form-control" id="inputdate" placeholder="Date de naissance" name="inputdate" required>
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>
        </div>
        <div class="form-group">
          <label for="comment">Comment:</label>
          <textarea class="form-control" rows="10" cols="10" name="comment" id="comment" required></textarea>
          <div class="valid-feedback">valide.</div>
          <div class="invalid-feedback">invalide.</div>
        </div>
        <div class="form-group text-right mt-3">
          <button type="reset" class="btn btn-danger btn-md"><i class="fa fa-times"></i> Annuler</button>
          <button type="submit" class="btn btn-success btn-md"><i class="fa fa-save"></i> Enregistrer</button>
        </div>
      </form>
    </fieldset>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
fieldset.scheduler-border {
  border: 1px groove #ddd !important;
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow:  0px 0px 0px 0px #292929;
          box-shadow:  0px 0px 0px 0px #292929;
}

legend.scheduler-border {
  font-size: 1.2em !important;
  font-weight: bold !important;
  text-align: left !important;
  width:auto;
  padding:0 10px;
  border-bottom:none;
}
  // Disable form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Get the forms we want to add validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
Profile page with b4

Profile page with b4

Planète animée style01

Planète animée style01

Login Bootstrap3

Login Bootstrap3

Input range slider HTML style03

Input range slider HTML style03

Input file style01

Input file style01

Image hover 01

Image hover 01

Créer une input search animée

Créer une input search animée

Carousel Bootstrap3

Carousel Bootstrap3

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table