Etykieta i pole są łatwe; mamy <label>, a następnie odpowiednie pole wejściowe. Ale jaki jest najbardziej semantycznie poprawny element HTML do użycia w przypadku mniejszego tekstu informacyjnego, który trafia pod pole?Jaki jest najbardziej semantycznie poprawny element HTML dla wskazówki pola formularza/notatki?
nie wiem konkretnego elementu lub atrybutu, aby je połączyć, ale można to zrobić za pomocą atrybutu ARIA aria-describedby:
<label for="firstname">First Name</label>
<input type="text" id="firstname" aria-describedby="firstname-explanation" />
<p id="firstname-explanation">e.g. John</p>
Ale w tym wszystkim w label wydaje dobry do mnie albo (także daje dobre możliwości stylizacji, ponieważ masz - semantyczny - pojemnik):
<label>
<span class="form-item-title">First Name</span>
<input type="text" id="firstname" />
<span class="form-item-description">e.g. John</span>
</label>
Możesz nawet zmieszać dwa .
Innym rozwiązaniem może być umieszczenie opisu w title (lub placeholder jak sugeruje @Alohci) atrybut elementu input (semantycznie jest to jeden opisując go), ale w tym przypadku trzeba by wstawić je do znaczników przez Javascript (lub CSS przy użyciu input:after { content : "e.g. " attr(placeholder) } - zasugerowane przez @Alohci).
To może zadziałać. Najpierw zatrzymam się na chwilę, aby sprawdzić, czy wszyscy guru HTML z encyklopedyczną wiedzą o elementach mogą dać ostateczną odpowiedź, zanim oznaczysz tę poprawną. –
aria-opisanoby jest odważną próbą, ale ma kilka problemów. Po pierwsze, specyfikacja HTML5 wyjaśnia, że atrybuty arii są * tylko * dyrektywami przeglądarki, co do tego, w jaki sposób przeglądarka powinna udostępniać treść interfejsowi API dostępności platformy i same nie przekazują informacji semantycznych. Po drugie, przykłady nie są opisami. Idealne rozwiązanie semantyczne może polegać na tym, że przykładowe atrybuty będą zastępcze i będą wyglądać poza polem wprowadzania, jak przedstawiono w pytaniu, ale to dotyczy przyszłości, a nie teraz. Na razie użyłbym drugiego elementu '
@Alohci Zgadzam się z większością rzeczy, które mówisz. Chociaż czasami najlepiej można opisać coś za pomocą przykładu ("symbol zastępczy" nadal jest prawidłowym pomysłem, ale ma taki sam problem jak "tytuł" tutaj). Aby uzyskać najlepsze wyniki, zamiast sugerowanych 2-etykiecie, nadal bym podchodził z jedną "etykietą" wokół całej rzeczy (co jest całkowicie poprawne). – kapa