Comment créer une zone de saisie sur le front-end Web

Dans le développement Web front-end, la zone de saisie est un composant de base utilisé par les utilisateurs pour saisir du texte, des chiffres et d'autres formes de données. Dans cet article, nous explorerons comment le front-end Web implémente les zones de saisie.

1. HTML

Tout d'abord, nous devons utiliser des balises HTML pour définir la zone de saisie. En HTML, les balises couramment utilisées incluent <input>, <textarea> et <form>, etc. <input>，<textarea>和<form>等等。

<input>标记用于创建单行输入框，例如：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

上面的前两行代码中，<label>标记用于为输入框添加描述，for属性的值应该和<input>标记的id属性值相同。这样在用户单击标签时，输入框就会获得焦点。第三行代码中，type属性的值为"text"，表示我们创建的是一个文本输入框。

<textarea>标记用于创建多行输入框，例如：

<label for="comments">留言：</label>
<textarea id="comments" name="comments"></textarea>

相比于<input>标记，<textarea>标记的可编辑区域更大，可以在其中容纳多行文本。同样可以添加描述标签，为用户提供更好的操作体验。

<form>标记是一个容器，包含了一组输入项和一个提交按钮。例如：

<form action="login.php" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <button type="submit">登录</button>
</form>

上面的代码中，<form>标记的action和method属性用于指定提交的URL和方法。<button>标记用于创建提交按钮，当用户单击按钮时，表单的数据就会被提交到服务器。

2. CSS

使用标准的HTML标记创建输入框的好处在于，我们可以使用CSS来控制输入框的样式，实现更好的用户体验。例如，以下代码可以让输入框自适应父元素的宽度，增加美观程度：

input[type="text"], textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

上面的代码中，box-sizing属性用于控制输入框的尺寸，padding属性用于控制内边距，border属性用于控制边框样式，border-radius属性用于控制边框圆角度数，resize属性用于控制输入框是否可以调整大小。

除了以上属性外，我们还可以使用CSS实现输入框的动画效果，如下：

input[type="text"]:focus,
textarea:focus {
  border-color: #666;
  outline: none;
  box-shadow: 0 0 10px #ccc;
}

当用户单击输入框时，上面的代码将会让输入框产生边框颜色的变化和简短的动画效果。这些样式的添加将会让您的站点更具吸引力，增加用户的参与度。

3. JavaScript

最后，我们可以使用JavaScript来实现输入框的验证、提示以及其他一些交互效果。例如：

const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');

usernameInput.addEventListener('input', () => {
  const value = usernameInput.value.trim();

  if (value === '') {
    usernameInput.setCustomValidity('用户名不能为空！');
  } else {
    usernameInput.setCustomValidity('');
  }

  usernameInput.reportValidity();
});

passwordInput.addEventListener('input', () => {
  const value = passwordInput.value;

  if (value.length < 6 || value.length > 12) {
    passwordInput.setCustomValidity('密码长度必须在6-12个字符之间！');
  } else {
    passwordInput.setCustomValidity('');
  }

  passwordInput.reportValidity();
});

上面的代码中，我们使用了EventTarget.addEventListener()方法，来为输入框添加了一个输入事件的监听器。每当用户在输入框中输入内容时，就会触发这个监听器，我们可以在其中进行一些验证操作，例如检查输入是否为空、长度是否符合要求等等。使用setCustomValidity()方法来设定自定义提示信息，使用reportValidity()

La balise <input> est utilisée pour créer une zone de saisie sur une seule ligne, par exemple :

const searchBox = document.querySelector('#search-box');
const searchResults = document.querySelector('#search-results');

searchBox.addEventListener('input', () => {
  const value = searchBox.value.trim();

  if (value === '') {
    searchResults.innerHTML = '';
    return;
  }

  // 发送搜索请求
  fetch(`/api/search?q=${value}`)
    .then(response => response.json())
    .then(results => {
      // 展示搜索结果
      searchResults.innerHTML = '';
      for (let i = 0; i < results.length; i++) {
        const item = document.createElement(&#39;li&#39;);
        item.textContent = results[i].title;
        searchResults.appendChild(item);
      }
    })
    .catch(err => {
      console.error(err);
      searchResults.innerHTML = '搜索失败！';
    });
});

Dans les deux premières lignes de code ci-dessus, le <label> La balise code> est utilisée pour la zone de saisie pour ajouter une description, la valeur de l'attribut for doit être la même que la valeur de l'attribut id du &lt ;input>. De cette façon, lorsque l'utilisateur clique sur l'étiquette, la zone de saisie gagne le focus. Dans la troisième ligne de code, la valeur de l'attribut type est "text", ce qui signifie que nous créons une zone de saisie de texte.

La balise <textarea> est utilisée pour créer des zones de saisie multilignes, par exemple :

rrreee

Par rapport à la balise <input>, &lt ;textarea> La balise a une zone modifiable plus grande et peut contenir plusieurs lignes de texte. Vous pouvez également ajouter des balises de description pour offrir aux utilisateurs une meilleure expérience de fonctionnement.

La balise <form> est un conteneur qui contient un ensemble d'éléments d'entrée et un bouton de soumission. Par exemple : 🎜rrreee🎜Dans le code ci-dessus, les attributs action et method de la balise <form> sont utilisés pour spécifier le message soumis. URL et méthode. La balise <button> est utilisée pour créer un bouton de soumission Lorsque l'utilisateur clique sur le bouton, les données du formulaire seront soumises au serveur. 🎜

🎜CSS🎜🎜🎜L'avantage d'utiliser des balises HTML standard pour créer des zones de saisie est que nous pouvons utiliser CSS pour contrôler le style de la zone de saisie afin d'obtenir une meilleure expérience utilisateur. Par exemple, le code suivant peut adapter la zone de saisie à la largeur de l'élément parent et augmenter la beauté : 🎜rrreee🎜Dans le code ci-dessus, l'attribut box-sizing est utilisé pour contrôler la taille de la zone de saisie, et padding L'attribut est utilisé pour contrôler le remplissage, l'attribut border est utilisé pour contrôler le style de bordure, le border-radius L'attribut code> est utilisé pour contrôler l'angle d'arrondi de la bordure et <code>resize L'attribut est utilisé pour contrôler si la zone de saisie peut être redimensionnée. 🎜🎜En plus des attributs ci-dessus, nous pouvons également utiliser CSS pour obtenir des effets d'animation de la zone de saisie, comme suit : 🎜rrreee🎜Lorsque l'utilisateur clique sur la zone de saisie, le code ci-dessus fera changer la couleur de la bordure de la zone de saisie. et créez un bref effet d'animation. L'ajout de ces styles rendra votre site plus attrayant et augmentera l'engagement des utilisateurs. 🎜
🎜JavaScript🎜🎜🎜Enfin, nous pouvons utiliser JavaScript pour implémenter la vérification de la zone de saisie, les invites et d'autres effets interactifs. Par exemple : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode EventTarget.addEventListener() pour ajouter un écouteur d'événement d'entrée à la zone de saisie. Chaque fois que l'utilisateur entre quelque chose dans la zone de saisie, cet écouteur sera déclenché et nous pourrons y effectuer certaines opérations de vérification, comme vérifier si l'entrée est vide, si la longueur répond aux exigences, etc. Utilisez la méthode setCustomValidity() pour définir des informations d'invite personnalisées et utilisez la méthode reportValidity() pour faire apparaître la boîte d'invite. 🎜🎜En plus de la vérification, nous pouvons également implémenter d'autres fonctions telles que la recherche et l'association dans la zone de saisie en JavaScript, telles que : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons l'API Fetch pour lancer une requête de recherche au serveur, puis Les résultats de la recherche sont traités dans la fonction de rappel et les résultats sont affichés sur la page. 🎜🎜Résumé🎜🎜Dans cet article, nous avons expliqué comment le front-end Web implémente les zones de saisie. Nous utilisons des balises HTML pour créer la zone de saisie, utilisons CSS pour contrôler le style de la zone de saisie et utilisons JavaScript pour implémenter la validation, les invites et d'autres effets interactifs de la zone de saisie. J'espère que cet article vous sera utile ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!