Tutoriel sur la saisie multiligne HTML

Introduction

La balise HTML <textarea> permet aux utilisateurs d'entrer et de soumettre du texte libre dans un formulaire. Dans ce laboratoire, nous allons créer un formulaire HTML simple avec une entrée <textarea> et appliquer quelques attributs couramment utilisés.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") subgraph Lab Skills html/basic_elems -.-> lab-70860{{"Saisie multiligne HTML"}} html/head_elems -.-> lab-70860{{"Saisie multiligne HTML"}} html/layout -.-> lab-70860{{"Saisie multiligne HTML"}} html/doc_flow -.-> lab-70860{{"Saisie multiligne HTML"}} html/forms -.-> lab-70860{{"Saisie multiligne HTML"}} html/form_valid -.-> lab-70860{{"Saisie multiligne HTML"}} html/form_group -.-> lab-70860{{"Saisie multiligne HTML"}} html/form_access -.-> lab-70860{{"Saisie multiligne HTML"}} end

Créer un squelette HTML

Créez un fichier HTML vide nommé index.html et entrez le code de base HTML5 de base.

<!doctype html>
<html>
  <head>
    <title>Tutoriel sur la balise HTML Textarea</title>
  </head>
  <body>
    <!-- Votre code HTML ici -->
  </body>
</html>

Ajouter un élément de formulaire

Ajoutez un élément <form> au corps HTML. Nous utiliserons ce formulaire pour collecter des informations auprès de l'utilisateur.

<form>
  <!-- Les éléments de formulaire vont ici -->
</form>

Ajouter une entrée de zone de texte

Ajoutez un élément <textarea> à l'intérieur de l'élément <form>. Vous pouvez personnaliser la taille de la zone de texte en définissant les attributs rows et cols.

<form>
  <label for="feedback">Entrez votre feedback :</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Ici, nous avons ajouté une étiquette pour décrire le champ d'entrée (feedback), et une entrée <textarea> avec un attribut id de "feedback". L'attribut name est utilisé pour identifier le champ d'entrée côté serveur.

Ajouter d'autres attributs de formulaire

Nous pouvons ajouter d'autres attributs HTML à nos éléments de formulaire et d'entrée. Par exemple, nous pouvons ajouter un attribut required pour vous assurer que l'utilisateur entre du texte.

<form>
  <label for="feedback">Entrez votre feedback :</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Soumettre le feedback" />
</form>

Ici, nous avons ajouté un élément input de type submit pour permettre à l'utilisateur de soumettre son feedback. Maintenant, l'utilisateur ne peut pas soumettre un formulaire vide car l'attribut required a été ajouté à la zone de texte.

Personnalisation supplémentaire avec CSS

Enfin, vous pouvez appliquer quelques styles CSS aux éléments de formulaire et d'entrée pour rendre le formulaire plus attrayant visuellement.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Ici, nous avons défini une bordure, ajouté du padding et de la marge, et limité la largeur maximale du formulaire. Nous avons également ajusté l'affichage et la largeur des éléments étiquette, zone de texte et bouton de soumission.

Sommaire

Dans ce laboratoire, nous avons appris à créer un formulaire HTML de base avec une entrée <textarea> et à appliquer des attributs couramment utilisés. Nous avons également appliqué quelques styles CSS pour personnaliser l'apparence des éléments de formulaire. Vous pouvez personnaliser davantage les éléments de formulaire et d'entrée selon vos besoins.