Optimisez l'alignement des zones de texte : rendez votre formulaire plus beau

En utilisant CSS et JavaScript, l'alignement des zones de texte peut être optimisé pour améliorer la lisibilité du formulaire et l'expérience utilisateur. Les méthodes d'optimisation spécifiques incluent : l'utilisation des propriétés CSS text-align et vertical-align pour l'alignement horizontal et vertical. Alignez dynamiquement les zones de texte à l’aide des fonctions JavaScript setSelectionRange et getComputedStyle. Dans des cas pratiques, l'effet d'alignement peut être optimisé en définissant la largeur de la zone de texte, l'alignement central et l'alignement central vertical.

Optimisez l'alignement des zones de texte : rendez vos formulaires plus beaux

Dans les formulaires, l'alignement des zones de texte est crucial pour l'expérience utilisateur et la lisibilité. Un alignement incorrect peut entraîner de la confusion et un fouillis visuel. Cet article présentera comment utiliser CSS et JavaScript pour optimiser l'alignement des zones de texte et fournira un cas pratique à titre de référence.

Aligner les zones de texte à l'aide de CSS

CSS propose plusieurs façons d'aligner les zones de texte :

• text-align : est utilisé pour aligner le texte horizontalement. Il peut être défini sur left, center, right ou justify. left, center, right 或 justify。
• vertical-align：用于垂直对齐文本。它可以设置为 top, middle, bottom 或 baseline

vertical-align :

Utilisé pour aligner verticalement le texte. Il peut être défini sur top, middle, bottom ou baseline.

/* 水平对齐文本框为居中 */
input[type="text"] {
  text-align: center;
}

/* 垂直对齐文本框为顶部 */
input[type="text"] {
  vertical-align: top;
}

Utilisez JavaScript pour aligner la zone de texte

• JavaScript peut aligner dynamiquement la zone de texte :
• setSelectionRange() : est utilisé pour définir la plage de texte sélectionnée dans la zone de texte.

getComputedStyle() :

Utilisé pour obtenir l'attribut de style calculé de l'élément.

// 获取文本框元素
const input = document.querySelector('input[type="text"]');

// 设置文本框光标到开头
input.setSelectionRange(0, 0);

// 获取文本框的内边距
const paddingLeft = parseInt(getComputedStyle(input).paddingLeft);
const paddingRight = parseInt(getComputedStyle(input).paddingRight);

// 计算文本框的可用宽度
const availableWidth = input.clientWidth - paddingLeft - paddingRight;

// 设置文本框文本对齐为居中
input.style.textAlign = availableWidth / 2 > 0 ? 'center' : 'left';

Exemple pratique

Considérons un formulaire avec deux zones de texte :

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" />
  <label for="email">电子邮件：</label>
  <input type="text" id="email" />
  <button type="submit">提交</button>
</form>

En utilisant les techniques décrites ci-dessus, nous pouvons optimiser l'alignement de la zone de texte : 🎜

input[type="text"] {
  text-align: center;
  vertical-align: middle;
  width: 200px;
}

const inputs = document.querySelectorAll('input[type="text"]');
inputs.forEach((input) => {
  input.setSelectionRange(0, 0);
  const paddingLeft = parseInt(getComputedStyle(input).paddingLeft);
  const paddingRight = parseInt(getComputedStyle(input).paddingRight);
  const availableWidth = input.clientWidth - paddingLeft - paddingRight;
  input.style.textAlign = availableWidth / 2 > 0 ? 'center' : 'left';
});

🎜 De cette façon, les zones de texte seront centrées horizontalement et alignées verticalement dans le milieu. Cet alignement améliore la lisibilité du formulaire et l’expérience utilisateur. 🎜

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!