form
-
[React] 제어/비제어 컴포넌트React 2022. 7. 10. 19:37
폼 엘리먼트 HTML 폼 엘리먼트(input, textrea,select)는 사용자 입력을 기반으로 폼 엘리먼트 자체의 내부 상태를 관리하고 업데이트한다. Name: 예를 들어, 위의 폼은 사용자에게 name을 입력받도록 되어있다. 대부분의 경우 폼의 제출 버튼을 클릭하게 되면 함수로 처리하기 때문에 사용자가 폼에 입력한 데이터에 접근하도록 하는 것이 편리하다. 데이터에 접근하는 방식에서 제어 컴포넌트와 비제어 컴포넌트 방식으로 나누게 된다. 제어 컴포넌트 => React에 의해 값이 제어되는 입력 폼 엘리먼트 비제어 컴포넌트 => React에 의해 값이 제어되지 않는 입력 폼 엘리먼트 제어 컴포넌트 (Controlled Component) React에 의해 값이 제어된다는 뜻은 React가 사용하는 s..
-
[HTML] form 태그와 웹접근성HTML 2022. 7. 7. 00:10
🏷️ 태그 사용하지 않더라도 필수로 과 같이 빈값으로 속성을 넣어줌 🏷️ 태그 폼 요소에 레이블을 붙이기 위한 태그 태그 사용시 폼 요소와 레이블 텍스트가 서로 연결되어 있는 점을 브라우저에게 알림 태그 사용 1. 명시적 작성 방법 요소와 폼 요소를 따로 사용하고 의 for 속성과 폼 요소의 id 속성을 이용해 연결 레이블 2. 암시적 작성 방법 태그 안에 폼 요소를 넣는 방법 레이블 placeholder 속성을 label로 사용? placeholder는 label을 대신하여 제공할 수 없다. 입력 시 내용의 사라짐 스크린리더에서 읽히지 않을 수 있음 번역 시 브라우저에서 건너뜀 디자인 상의 이유로 label를 화면에 명시하지 못할 경우 title 속성 활용 스크린리더는 label과 title을 둘 다 ..