HTML은 놀랍습니다. 실제로 JavaScript가 필요하지 않은 세 가지 일반적인 UI 구성 요소는 다음과 같습니다.

프로그래밍의 위대한 패러다임은 "바퀴를 재발명하지 말라"입니다. 이러한 정서의 구현은 종종 도서관 사용의 형태를 취합니다. 오해하지 마세요. 라이브러리는 훌륭하고 매우 귀중할 수 있지만 여기에 문제가 있습니다. 라이브러리가 항상 필요한 것은 아닙니다.

자바스크립트는 멋지지만 저는 여전히 울타리 안에 있습니다. HTML은 실제로 매우 놀랍고 종속성 지옥에 갇히지 않고도 작업에 완전히 적합한 도구가 될 수 있습니다.

부풀려진 라이브러리를 사용하는 대신 바닐라 HTML이 제공하는 기능을 사용해 보는 것은 어떻습니까? 다음은 JavaScript로 구현된 UI 디자인의 상위 세 가지 구성 요소이지만 실제로는 좋은 바닐라 HTML과 함께 작동하며 JavaScript 없이 대화형 HTML 요소를 만드는 데 사용할 수 있습니다.

드롭다운

<select> 요소는 일반적으로 양식에 사용되지만 약간의 상상력을 발휘하면 다른 많은 용도로 사용할 수 있습니다. 언어 선택기, 페이지 전환기 또는 설명서 페이지의 버전 메뉴는 어떻습니까?

<select>
    <option value="en">English</option>
    <option value="sv">Swedish</option>
    <option value="es">Spanish</option>
    <option value="fr">French</option>
    <option value="de">German</option>
</select> 

검색 가능한 입력

보시다시피 선택 요소는 선택 항목을 미리 정의된 목록으로 제한하려는 경우에 유용하지만 옵션 목록이 많을 때는 상당히 압도적일 수 있습니다.
<datalist> 요소를 사용하여 브라우저가 자동 완성에 사용할 수 있는 값 집합을 만들 수 있습니다.

<input type="text" list="common-search-values" placeholder="Search...">
<datalist id="common-search-values">
    <option>George Orwell</option>
    <option>Daniel Handler</option>
    <option>Neil Gaiman</option>
    <option>Ernest Hemingway</option>
    <option>Virginia Woolf</option>
</datalist>

바닐라 HTML 날짜/시간 선택기

이것은 내가 가장 좋아하는 것입니다. HTML에 이미 날짜/시간 선택기가 있다는 사실을 깨닫기 전에 JavaScript 날짜/시간 선택기를 시도하는 데 너무 많은 시간을 소비합니다. 다음 스니펫만 있으면 됩니다.

<input type="datetime-local">

더 알아보기

CodePenhttps://codepen.io/stresseddev/pen/zYRGgrN에서 여기에 표시된 모든 예제를 시도할 수 있습니다.

다음은 MDN 리소스에 대한 링크입니다.

Dropdowns

Search with autocomplete

Date picker

가장 좋아하는 HTML 요소는 무엇입니까? 언제 JavaScript를 사용하는 것이 합리적이며 언제 HTML을 고수하는 것이 가장 좋습니까? 댓글로 알려주세요!