form 태그 2

HTML label 태그 사용하기

태그label 태그는 form의 다양한 요소들에 대한 부가적인 정보를 제공해주는 태그이다. 본래의 목적은 웹 접근성 향상으로, 예를 들어 이라는 인풋 요소가 하나 있을때 해당 요소를 해당 인풋 요소를 설명해주는 텍스트와 함께 label 태그로 감싸주면 스크린 리더기가 해당 input 창이 어떤 역할을 해주는 창인지를 좀 더 잘 인식하고 설명해줄 수 있다. 이메일을 입력해 주세요!시각 장애가 있는 분들이나, 화면을 눈으로 보고 사용하기 어려운 분들은 웹 사용을 위해 스크린 리더기와 같은 도구들에 의존하게 된다. 그런데, 스크린 리더기 입장에서는 input창의 위치만으로 해당 인터랙션 요소가 어떤 의미를 갖는지 파악하는 데 한계가 있을 것이다. 그렇기 때문에, 웹 접근성 측면에서 사용자와의 상호작용을 ..

HTML-CSS 2024.11.17

Form 태그의 유용한 기능들

form 태그에 이는 여러 기능들을 찾아보면서 사용해 봤다. 사용하면서 유용하다고 생각하게 된 몇 가지 기능들이 있어 내용 정리해 둔다.reset()로그인, 회원가입처럼 하나의 form 태그 안에 여러 input 창들이 있을 경우 submit 이벤트 후 창을 초기화하기 위해 모든 input 창들을 하나씩 선택해 ''으로 초기화해줘야 한다(form 태그의 기본 동작은 input에 들어온 값들을 바로 비워주는 것이지만, 로직 처리를 위해 e.preventDefault()를 사용한 상황을 가정한다). submit 위의 예제에서 form 태그가 속성으로 가지고 있는 ..

HTML-CSS 2024.11.10