Olá,
O HTML5 traz consigo uma tag com valor semântico para usarmos dentro de formulários.
Diferença entre div e fieldset
A principal diferença entre o uso de
em vez de uma comum dentro de um formulário () está na semântica. Usar fornece um significado semântico claro de que os controles de formulário agrupados estão relacionados de alguma forma, enquanto uma
não possui esse significado semântico.
Logo, o nosso componente CampoTexto ficaria assim:
import './CampoTexto.css';
const CampoTexto = () => {
return (
<fieldset className="campo-texto">
<label className="" htmlFor="#">Nome</label>
<input type="text" placeholder="Seu nome aqui"/>
</fieldset>
)
}
export default CampoTexto;
Essa ação em nada altera a nossa lógica, porém melhora a semântica do nosso HTML.
CSS
No CSS, vamos apenas remover a borda que o fieldset traz por padrão.
.campo-texto { border: none; }
