HTML form 태그로 데이터 입력받기

폼태그

폼태그를 사용하면 사용자의 입력을 받을 수 있다.

태그

<input> 태그를 이용하면 버튼, 텍스트입력, 라디오버튼, 체크박스 버튼 등 다양한 속성을 입력받을 수 있고

<select>속성으로 선택지 중 1가지를 선택하는 기능을 넣을 수 있다.

<textarea> 태그는 여러 줄을 입력할 수 있는 텍스트박스를 생성하는 기능이다.

여기서 input 타입의 submit 속성은 입력받은 정보들을 action에서 설정한 url로 보내는 기능을 하고

reset 속성은 말 그대로 리셋하는 기능이다.

form 태그 예시

예시 결과

각 태그에 속성으로 name 과 value값은 각각 변수와 변수에 저장된 값이라 생각하면 되겠다.

다만 button, submit, reset의 속성에서 value는 버튼안에 들어갈 말을 지정해 주는 것이라 생각하면 된다.

select태그에서 selected 속성은 초기값으로 지정해둘 값을 설정해두는 것이다.

 

전송 버튼을 누르면 위 작성한 내용들을 action에 설정한 result.html로 보내는데 result.html이 존재하지 않으므로

전송 결과

이러한 창이 뜬다. 하지만 위 주소를 보면 앞에서 작성한 내용들이 잘 전달되었음을 알 수 있다.