Voici un formulaire HTML que vous pouvez récupérer et placer où vous le souhaitez, par exemple sur un site fonctionnant avec Obsidian.

Présentation :

Texte Simple

Texte Multiligne

Choix multiple sur plusieurs colonnes

Case à cocher sur plusieurs colonnes

Voici un exemple de sélection multiple :

<div style="display: flex; align-items: center; justify-content: space-around;">
  <div style="border: 1px solid black; width: 150px; padding: 10px;">
    <p><input type="checkbox"> Charles</p>
    <p><input type="checkbox"> emile</p>
    <p><input type="checkbox"> VOVOVVKJ</p>
  </div>
  <div style="font-size: 24px; display: flex; flex-direction: column; align-items: center;">
    <span>&#10148;</span> <!-- Unicode character for right arrow -->
    <span>&#10148;</span> <!-- Another right arrow for symmetry -->
  </div>
  <div style="border: 1px solid black; width: 150px; padding: 10px;">
    <!-- Mimic empty selection -->
  </div>
</div>

Bonjour, voici un formulaire HTML que vous pouvez récupérer et placer où vous le souhaitez, par exemple sur un site fonctionnant avec Obsidian.

<form action="/ma_destination">
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<label for="age">Âge:</label>
<input type="text" id="age" name="age"><br><br>
<input type="submit" value="Soumettre">
</form>

Voici un exemple simple de code HTML que vous pouvez utiliser dans votre fichier Markdown pour créer un élément de sélection multiple similaire à celui de l'image :

<form>
  <label for="multiSelect">Sélection multiple</label><br>
  <input type="checkbox" id="filterSelected" name="filterSelected">
  <label for="filterSelected">Filtrer les sélectionnés</label><br>
  <input type="checkbox" id="charles" name="person" value="Charles">
  <label for="charles">Charles</label><br>
  <input type="checkbox" id="emile" name="person" value="emile">
  <label for="emile">emile</label><br>
  <input type="checkbox" id="vovovvkj" name="person" value="VOVOVVKJ">
  <label for="vovovvkj">VOVOVVKJ</label>
</form>

Pour intégrer ce code HTML dans un fichier Markdown, vous pouvez simplement le placer là où vous voulez que le formulaire apparaisse. Markdown prend en charge l'intégration de balises HTML directement dans le texte. Voici comment vous pourriez l'écrire :

Voici un exemple de sélection multiple :

Ce code HTML et CSS créera deux boîtes (rectangles) avec des cases à cocher à l'intérieur de la première boîte. Des flèches sont placées entre les deux boîtes pour simuler un transfert ou une action entre les deux. La deuxième boîte est vide, simulant l'état où aucun élément n'a été sélectionné ou transféré.

Explication des styles :

• Flexbox est utilisé pour aligner les éléments horizontalement et centrer les flèches verticalement.
• Les flèches sont des caractères Unicode, faciles à utiliser et ne nécessitant pas d'images ou d'icônes supplémentaires.
• Les boîtes ont une bordure simple pour les délimiter visuellement.

Assurez-vous que l'endroit où vous intégrez ce Markdown supporte les balises HTML et CSS pour voir le rendu comme prévu.

Pour créer une maquette de formulaire qui ressemble concevoir quelque chose de purement visuel en HTML et CSS qui simule l'apparence sans fonctionnalité interactive. Voici comment tu peux structurer cela :

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    width: 200px;
    height: 150px;
    border: 1px solid #ccc;
    padding: 8px;
    margin: 10px;
  }
  .arrow {
    font-size: 24px;
    padding: 0 20px;
  }
</style>

<div class="container">
  <!-- Premier rectangle avec des options -->
  <div class="box">
    <p><input type="checkbox" id="charles"> <label for="charles">Charles</label></p>
    <p><input type="checkbox" id="emile"> <label for="emile">Émile</label></p>
    <p><input type="checkbox" id="vjvjvvkj3"> <label for="vjvjvvkj3">VJVJVVkJ3</label></p>
  </div>

  <!-- Flèches entre les boîtes -->
  <div class="arrow">→</div>
  <div class="arrow">←</div>

  <!-- Deuxième rectangle pour montrer la sélection -->
  <div class="box">
    <!-- Tu peux ajouter du texte ou des éléments statiques ici pour simuler la sélection -->
  </div>
</div>

Explication du Code :

1. Style CSS :

   • .container utilise flex pour aligner horizontalement les éléments.
   • .box définit l'apparence des rectangles.
   • .arrow pour les flèches entre les boîtes.

2. HTML :

   • Deux boîtes (div.box) simulent les zones de liste avec des cases à cocher.
   • Les flèches entre ces boîtes sont purement décoratives et n'offrent pas de fonctionnalité de déplacement d'éléments.

Si tu places ce code dans un bloc HTML dans Obsidian et que le rendu HTML est activé, tu devrais obtenir une maquette qui ressemble visuellement à ce que tu as décrit, même si elle ne sera pas interactive.

Pour créer un équivalent programmé de ce que tu recherches, nous allons utiliser du HTML et du CSS pour styliser un champ de texte qui ressemble à un bloc pour signatures et un champ pour saisir du texte multiligne avec les caractéristiques que tu as décrites.

1. Bloc Signature

Voici comment tu peux créer un champ de signature qui comprend le mot "Signature" écrit de manière semi-transparente et grise en haut à gauche :

<style>
  .signature-box {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    position: relative;
    padding: 10px;
  }
  .signature-watermark {
    position: absolute;
    top: 10px;
    left: 10px;
    color: gray;
    opacity: 0.5;
    font-size: 24px;
    z-index: -1;
  }
  .signature-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
  }
</style>

<div class="signature-box">
  <div class="signature-watermark">Signature</div>
  <input type="text" class="signature-input" placeholder="">
</div>

2. Bloc Texte Multiligne

Pour créer un bloc de texte multiligne similaire à l'exemple "VOS MOTIVATION", avec l'inscription "Texte Multiligne" en haut à gauche non centré, tu peux utiliser ce code :

<style>
  .multiline-box {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    padding: 10px;
    position: relative;
  }
  .multiline-label {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
    color: black;
  }
  .multiline-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    padding-top: 30px; /* Espace pour le label */
  }
</style>

<div class="multiline-box">
  <label for="multiline" class="multiline-label">Texte Multiligne</label>
  <textarea id="multiline" class="multiline-input" placeholder=""></textarea>
</div>

Fonctionnement de ces codes :

• CSS: Les styles sont définis pour positionner le texte de manière absolue à l'intérieur des boîtes et pour ajuster l'opacité du texte "Signature".
• HTML: Un input pour la signature et un textarea pour le texte multiligne, chacun positionné dans une div qui sert de conteneur.

Ces blocs de code HTML et CSS peuvent être insérés directement dans un fichier HTML ou utilisés dans des systèmes qui permettent l'intégration HTML/CSS pour personnaliser l'interface utilisateur. Ils simuleront l'apparence et la disposition que tu as demandée.

.
.
.
.
.
.
.
.
.
.