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);
  })();
Convertir une div en image

Convertir une div en image

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Google Style Login

Google Style Login

Image hover 01

Image hover 01

Input range slider HTML style04

Input range slider HTML style04

Lightbox gallery style01

Lightbox gallery style01

Pagination with Jquery

Pagination with Jquery

Scroll down button 01

Scroll down button 01

Vidéo background en html5 style01

Vidéo background en html5 style01

Vidéo background en html5 style02

Vidéo background en html5 style02

texte animate css

texte animate css

up down tr in table with js

up down tr in table with js