1. 양식이란 ?
사용자의 입력을 처리하는 버튼, 텍스트, 선택 등을 의미한다.
2. 양식 제출 및 다양한 요청
버튼과 텍스트 입력창을 만들어도 아무런 action이 일어나지 않는다. 그 이유는 사용자의 인풋을 받는 양식이 필요하기 때문인데 인풋을 받으라는 코드는 바로 <form> 요소이다.
<form action="/" method="get">
<input type="text" /> <button>Submit</button>
</form>
브라우저가 요청하는 모습
하지만 form 요소를 사용해도 아무런 변화를 찾아볼 수 없다. 이런 이유는 동작 방식에서 찾아볼 수 있다.
위 코드에서 브라우저는 서버에게 action을 요청하고 이때 기본 방식은 GET이다. 서버로부터 action을 받아오는 동작을 실행하는 것이다. 하지만 위에 코드에서는 action을 /로 처리했고 이는 현재 index.html파일의 경로이다.
참고로 action은 브라우저가 서버에게 전달할 url를 적는 곳이다.
개발자도구 네트워크 탭에서 확인할 수 있다.
그럼 post는 무엇일까? 서버에 데이터를 저장하기 전달하기 위해 사용한다.
get일 떄와 다르게 오류가 뜨는데 사용하는 서버가 커스텀 서버이기 때문에 데이터를 받는 기능은 수행하지 못하는 모습이다. 백엔드 개발 부분에서 자세히 다룬다고 하니 동작방식과 의미정도 대략 이해한 뒤 나중에 다시 볼 생각이다.
아직 추상적이라 잘 모르겠음...
3. 라벨 추가하기
<form action="/" method="get">
<label for="username">Username</label>
<input type="text" id="username"/> <button>Submit</button>
</form>
label요소를 통해 라벨을 추가할 수 있다. 이 때 input에 id속성을 부여하고 label에 for 속성을 부여하면 둘을 연결할 수 있는데 이러면 라벨 클릭시 text입력창에 커서가 포커스 되는 기능이 수행된다. 이를 통해 웹사이트 방문자에게 무엇을 해야할지 명시해 줄 수 있다.