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);
  })();
3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

Arrows Defense Game

Arrows Defense Game

Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Card Bootstrap4 02

Card Bootstrap4 02

Card Profile Style01

Card Profile Style01

Carousel 6 Column Product Slider with B4

Carousel 6 Column Product Slider with B4

Image hover 06

Image hover 06

Image hover 07

Image hover 07

Input file style02

Input file style02

Organization Chart

Organization Chart

Page 404 exemple 01

Page 404 exemple 01

Transitions Animations SVG Style01

Transitions Animations SVG Style01