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);
  })();
Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Animation 3d social icones avec css3

Animation 3d social icones avec css3

Card Profile Style01

Card Profile Style01

Cards box with title

Cards box with title

Creation dune icone de prechargement avec css

Creation dune icone de prechargement avec css

Form Création de compte style animée

Form Création de compte style animée

Input range slider HTML style05

Input range slider HTML style05

Login Bootstrap3

Login Bootstrap3

Table Responsive with css 01

Table Responsive with css 01

Tablet style code texte

Tablet style code texte

Timeline style05

Timeline style05

Vers le haut

Vers le haut