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

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Animation 3d social icones avec css3

Animation 3d social icones avec css3

ChartJS style01

ChartJS style01

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Form Création de compte style animée

Form Création de compte style animée

Form login 03

Form login 03

Image hover 03

Image hover 03

Responsive image grid

Responsive image grid

Simple Table With UIKIT

Simple Table With UIKIT

Texte Block Posts Style01

Texte Block Posts Style01

Vers le haut

Vers le haut