select, form 태그 [노베이스 게임개발 26일차]

오늘은 어제 배운 입력에 이어서 선택지를 고를 수 있도록 하는 select태그를 알아보았다.

선택지의 각 옵션들은 option태그를 이용한다.

 

select도 name속성을 통한 식별을 할 수 있으며 select로 입력받은 각 옵션에 실제 처리될 값을 정할 수 있는데 이것은 value 속성을 통해 할 수 있다.

 

다음은 여러 줄의 일반적인 텍스트를 입력할 수 있는 textarea이다.

input에는 한 줄밖에 입력할 수 없기 때문에 이러한 태그를 사용한다.

textarea 또한 name속성을 이용하여 식별할 수 있다.

 

이제 예시를 보며 자세히 설명해 보겠다.

 

먼저 select태그 안에 <option> 태그를 넣어 선택지들을 추가해 준다.

이때 각 옵션들에 value 속성을 통해 해당 옵션을 클릭했을 때 컴퓨터가 인식할 수 있도록 하는 값을 넣을 수 있다.

 

select 태그에는 몇몇 속성이 더 있는데

 

먼저 multiple 속성을 넣으면 선택지가 펼쳐져서 나타나게 된다.

 

selected라는 속성을 넣으면 선택이 된 상태가 된다.

설명 예시

그림을 보면 선택지들이 펼쳐져 있고 고양이가 이미 선택되어 있다.

 

그다음으로는 textarea이다.

기본적으로 textarea태그를 사용하면 택스트 박스가 나오는데

이때 속성을 통해서 행과 열을 조절할 수 있다. rows는 행 cols는 열의 크기를 조절할 수 있다.

 

그리고 textarea의 박스는 우측 하단의 빗금을 드래그하면 박스의 크기를 조절할 수 있다.

 

---

 

이번에는 사용자가 입력한 데이터를 서버로 보내기 위해 사용하는 태그인 form태그를 알아보자.

 

이 태그를 사용하면 사용자가 데이터를 입력해서 서버로 보내면 서버는 우리가 원하는 데이터를 우리에게 보여줄 수 있게 된다.

 

form태그는 입력 요소들을 가지고 그 입력값을 서버로 보내게 된다.

지난 시간에 배운 것처럼 입력요소는 텍스트뿐만 아니라 색이나 버튼 날짜등의 20여 가지의 다양한 요소가 있을 것이다.

 

form의 대표적인 두 가지 속성들에 대해 알아보자.

 

action : 입력값을 전송할 서버의 url

method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET or POST)

 

이때 GET과 POST을 알아보면

GET은 서버에 요청을 보내서 응답을 받아오는 것이고

POST는 서버에 요청을 보내서 서버의 데이터를 조작하여 작업을 수행하는 것이다.

 

이제 예시를 보며 자세히 공부해 보자.

 

 

먼저 form태그에 action를 통해 전송할 서버가 있어야 하므로 HTML폴더 안에 exam.php라는 가상의 서버를 만든다.(해당 파일에는 아무 내용도 없다. 이때 php는 서버 프로그램의 양식 중 하나이다.)

 

그런 다음 method를 POST로 하여 데이터를 조작하고자 하였다.

 

이제 form태그 안에 여러 입력값을 넣어준다.

여기서는 text, select, submit의 입력 요소들을 넣어주었다.

 

text로 입력받기 위한 태그에서 placeholder로 NAME을 적어주어 표시가 된 모습이다.

그리고 select로 키우고 싶은 애완동물을 고를 수 있도록 하고

마지막으로 전송 버튼을 누르면 submit 속성에 의해 서버에 제출되게 된다.

 

전송버튼을 누르면 이렇게 서버파일이 열리게 되는데 추후에 서버에 대해 공부하면서 이 상호작용이 어떻게 이루어지는지 공부할 예정이다.

 

후기 : 이제 데이터를 서버에 보내는 방법을 공부하였다. name속성을 이용해 식별하는 방법까지 배웠으니 이것을 어떻게 활용할 수 있을지 뒷 내용이 궁금해진다.

 

*본 포스팅은 학생의 입장에서 쓴 글로 정확하지 않을 수 있으며 댓글로 피드백해 주시면 감사하겠습니다.

클래스 101 유노코딩님의 강의를 통해 학습한 내용을 기반으로 두고 있습니다.