HTML - <input> 태그와 레이블 요소

<input> 태그는 비밀번호, 날짜, 연락처 등 사용자에게 정보를 입력받을 때 주로 사용한다. 

아래와 같이 input type="" 에 문자를 작성하는 text, 제출버튼인 submit, 항목 선택인 checkbox 등을 할 수 있다. 

 

 

그런데 여기서 끝이 아니라 '제출' 버튼 같은 것을 폼이라고 하는데 웹페이지에서 폼을 나타내려면 html에서 <form>태그를 사용해야 한다. 

*input은 반드시 <form> 태그 안에 작성해야 한다. 

 

 

method에는 post 와 get 방식이 있는데 post 방식이 url 에 데이터가 보이지 않으므로 더 안전한 방식이라고 했다. 

사실 form 태그는 자세한 설명 없이 진행되어 잘 모르겠다. 계속 공부하다보면 알게 되겠지. 

 

required="required" 필수 입력항목으로, 이름 없이 제출 시 아래와 같이 경고팝업이 뜬다.

placehold="" 연한 회색 글씨로 보이며, 데이터를 입력하면 사라진다.   
value는 사라지지 않는다. 
autofocus="autofocus" 마우스 커서 표기

 

<label>은 input 태그에 라벨을 붙이는 것으로, 레이블을 하건 안하건 사용자가 보았을때 달라지는 것은 없다. 

하지만 사용자가 체크박스를 클릭하는 대신, 체크박스 옆에 문구(영화감상, 독서)를 클릭하더라도 체크박스가 선택이 되기 때문에 접근성이 개선된다고 할 수 있다. 

 

 

<input> 태그를 레이블로 감싸거나, input에 id를 부여한 후 label for 로 해도 차이는 없다. (둘 다 가능)

 

input 태그는 아직 완전히 이해했다고 하긴 어렵겠지만, 외국어를 배울때 당장 이해가 안되는 어법, 표현이 있다가도 시간이 지나면 어느 순간 알게 되듯, 컴퓨터 언어도 마찬가지일거라고 스스로를 위안해본다ㅠㅠ