[HTML] <form> 태그로 사용자 입력 받기

HTML에서 <form> 태그를 활용하여 사용자 입력 받기

HTML에서 사용자의 입력을 받기 위해서는 어떻게 해야 할까요?

이번에는 HTML에서 사용자의 입력을 받기 위해서 사용하는

<form> 태그에 대해서 알아보도록 하겠습니다.

<form>태그는

사용자로부터 입력값을 전달 받기 위한 태그입니다.

사용자의 입력은 여러가지 형태가 될 수 있습니다.

사용자가 직접 키보드로 타이핑을 해서 정보를 입력할 수도 있고,

셀렉트 박스나, 체크박스, 라디오 버튼 등을 이용해서

주어진 보기 중에서 원하는 내용을 선택 할 수도 있습니다.

각각의 입력 받는 방법은 조금씩 다르지만,

모든 입력의 기본이 되는 것은 <form> 태그입니다.

여기서는,

가장 기본적인 키보드로 텍스트를 입력 받는 예제를 통해서

<form> 태그의 사용 방법을 알아보도록 하겠습니다.

<form> 태그 사용법

<form> 태그는 아래와 같이 <form> 태그 안에 여러가지 입력 구성요소들을 넣어서 사용합니다.

<form>

     여러가지 입력 받을 구성요소들(elements)

</form>

잘 이해가 가지 않는다면, 예제를 볼까요?

See the Pen html example by anna (@hianna) on CodePen.

위의 예제에서는 두개의 정보를 사용자로부터 입력 받습니다.

좋아하는 가수와 좋아하는 노래.

이 두가지 정보를 입력 받기 위해서

<form> 태그 안에 두개의 <input> 태그가 들어가 있는 것을 볼 수 있습니다.

다음 포스팅에서 설명하겠지만

<input> 태그는 여러 형태의 사용자 입력을 처리하는 태그입니다.

<input> 태그 안에는 'type'을 지정할 수 있는데,

사용자의 키보드 입력을 받기 위해서는 'type'을 'text'로 지정해야 합니다.

<form> 태그를 이용하여 사용자의 입력을 받는 방법을 알아보았습니다.

간단한 예제로 알아보았지만, 

<form> 태그 안에 들어가는 element들을 살펴보다 보면,

<form> 태그로 많은 일들을 할 수 있다는 것을 알게 될 것입니다.

다음 포스팅에서는

계속해서 <form> 태그 안에 사용할 수 있는 여러가지 구성요소에 대해서 알아보도록 하겠습니다.