Formulário de contato com campos obrigatórios, labels associados e atributos de acessibilidade.
<form action="/contato" method="post" novalidate>
<fieldset>
<legend>Fale conosco</legend>
<div class="campo">
<label for="nome">Nome completo <span aria-hidden="true">*</span></label>
<input
type="text" id="nome" name="nome"
autocomplete="name"
required aria-required="true"
placeholder="João Silva"
>
</div>
<div class="campo">
<label for="email">E-mail <span aria-hidden="true">*</span></label>
<input
type="email" id="email" name="email"
autocomplete="email"
required aria-required="true"
placeholder="joao@exemplo.com"
>
</div>
<div class="campo">
<label for="assunto">Assunto</label>
<select id="assunto" name="assunto">
<option value="">Selecione...</option>
<option value="suporte">Suporte</option>
<option value="comercial">Comercial</option>
<option value="outro">Outro</option>
</select>
</div>
<div class="campo">
<label for="mensagem">Mensagem <span aria-hidden="true">*</span></label>
<textarea
id="mensagem" name="mensagem"
rows="5" required aria-required="true"
placeholder="Escreva sua mensagem..."
></textarea>
</div>
<button type="submit" class="btn btn--primario">Enviar mensagem</button>
</fieldset>
</form>