Texto de formulário
O Bootstrap oferece a classe .form-text para criar texto de formulário em nível de bloco ou em linha de maneira simples e garantindo uma boa experiência ao usuário.
Associando texto de formulário com controles de formulário
É fundamental estabelecer uma associação clara entre o texto de formulário e o controle de formulário relevante. Isso é alcançado usando o atributo aria-describedby. Ao utilizar essa prática, os leitores de tela podem anunciar o texto de formulário quando o usuário focar ou entrar no controle associado ao texto.
Por exemplo, ao criar um campo de senha:
<label for="inputPassword5" class="form-label">Senha</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Sua senha deve ter de 8 a 20 caracteres, conter letras e números, e não pode conter espaços, caracteres especiais ou emojis.
</div>
Neste caso, o texto de formulário é explicitamente associado ao campo de senha, melhorando a acessibilidade e usabilidade do formulário.
Estilizando texto de formulário abaixo de inputs
É possível estilizar o texto de formulário que aparece abaixo dos inputs utilizando a classe .form-text. Se um elemento em bloco for utilizado, é adicionada uma margem superior para facilitar o espaçamento em relação aos inputs acima.
Por exemplo, na criação de um campo de senha em nível de bloco:
<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>
Caso seja utilizado um elemento inline, como <span>, <small>, entre outro, basta adicionar a classe .form-text a ele.
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Password</label>
</div>
<div class="col-auto">
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
</div>
<div class="col-auto">
<span id="passwordHelpInline" class="form-text">
Must be 8-20 characters long.
</span>
</div>
</div>