HTML 태그 FORM, INPUT, SELECT, TEXTAREA

HTML 태그

홈페이지에서 정보를 받아야 하는 경우 이용하게 되는 HTML FORM태그에 대한 정보입니다. form, input, select, textarea 등의 태그에 대해 살펴보았습니다. 홈페이지를 제작하기 위해 알아두어야 하는 태그들이라고 볼 수 있습니다. 

 

 

 

HTML 폼 태그

가끔 인터넷에서 회원가입을 하는 경우가 있죠. 또는 온라인으로 주문을 하기 위해서는 일부 주소 등과 같은 정보를 필요로 하게 됩니다. 그럴 때 필요한 것이 form 태그, 폼 태그입니다. 폼 태그는 사용자의 정보를 입력할 수 있도록 제공하는 기능을 말합니다. 사용자에게 입력할 수 있는 양식 페이지를 제공해주고, 여기에 정보를 입력해주고 나면 이 정보를 처리해주는 페이지를 만들게 됩니다. 그렇게 만들어진 페이지에서 DB를 저장하고 처리할 수 있다면 좋겠지만, 이 부분은 HTML로 한계가 많았던 것이 사실입니다. 주로 다른 언어로 많이 구현해서 활용하었습니다. FORM 폼 태그로는 사용자의 정보를 받아서 전달해주는 요충지에 위치해있어 이용도가 높았습니다. <form>~</form>으로 시작할 때 태그를 사용해주고 종료될 때 /로 닫아줍니다. 그 외에도 INPUT, SELECT, TEXTAREA 등 태그를 활용해서 정보를 받도록 양식을 만들 수 있습니다. 

<form method = post action= "주소 url">
  <input type = "checkbox" name="1번 체크박스"><br>
  <input type = "checkbox" name="2번 체크박스">
</form>

method는 웹서버로 사용자 데이터를 보내는 방법을 지정하기 위해 사용된다. 그런데 post를 사용했지만 get 방식도 있다. 그런데 get을 사용할 경우 입력받은 정보들이 url뒤에 추가로 작성되기 때문에 보안의 취약성이 높아집니다. 보통 post 방식으로 보내게 되는데, http header에 포함해서 보내주기 때문에 url뒤에 노출되는 문제가 없어 보다 높은 보안을 구성할 수 있습니다. 

 

action은 데이터를 보내고 받게 되는 웹서버로 지정하고, name의 경우 각 사용자가 입력한 값을 알아내기 위한 변수 이름으로 지정해줍니다. 

 

 

 

INPUT 인풋 태그

위의 폼 태그에서 입력 type을 지정할 수 있고, 사용자 정보에 대한 여러 입력방식을 제공해줍니다. 타입의 종류에 따라 관련된 속성이 많은데 text, password, checkbox, radio, submit, reset, file, image 등이 있습니다. 

타입 종류	기능
text	일반 텍스트를 입력받을 수 있는 입력박스를 보여줍니다. 한 줄 정도만 입력받을 수 있습니다.  입력박스의 이름은 name으로 표시할 수 있습니다.  값을 입력받기 전에 value로 초기화 해줄 수 있습니다.  size로 입력받기위한 박스의 크기를 조절 할 수 있습니다. maxlength를 통해 최대 글자수를 제한해둘 수 있습니다.
password	패스워드는 비밀번호를 의미하며 값이 노출되지 않도록 *표시를 해줍니다.  name, value, size를 구성할 수 있는데, 이름, 초기화, 크기 등을 조정할 수 있습니다.
checkbox	체크박스를 만들 수 있습니다. 여러 항목을 만들 수 있고, 다수의 항목을 클릭할 수 있습니다.  name, value 값은 동일합니다. 여기서 checked가 있는데, 선택하기 전에 초기 디폴트로 설정되는 값을 의미합니다.
radio	라디오 버튼을 제작해서 여러 가지 중에서 한 가지를 선택할 때 사용할 수 있습니다.  name, value, checked 속성 전부 동일하게 운용 가능합니다.
submit	전송할 수 있도록 버튼을 표시해주고, 입력받은 DB값을 action에서 받기로한 url로 보냅니다.  name, value 값도 동일합니다.
reset	리셋을 시켜줄 수 있는, 기록한 내용을 전부 지워줄 수 있는 버튼입니다.  name, value 속성의 값도 비슷합니다.
file	파일을 찾아 업로드할 수 있도록 찾아보기를 표시해주는 역할을 수행합니다.  name, value 속성 값을 이용합니다.
image	이미지를 보낼 수 있습니다. 입력한 모든 데이터가 같이 전송됩니다. name, src로 그림파일의 위치도 표시됩니다.

인터넷을 이용하다 보면 자주 접해보셨을 것 같습니다. 그리고 또 다른 태그인 select도 있습니다. 

 

SELECT 셀렉트 태그 

보통 물건을 구매하거나 다양한 항목들을 보게 될 때 클릭해서 항목을 스크롤해보게 되는 경우가 있습니다. 그때 이용되는 것이 select 태그입니다. 이용자들에게 목록을 제공해주고 선택하면 액션이 발생하는 구조로 되어 있습니다. name, size, selected, multiple, option, value 등의 값이 있습니다. 

 

여기서 selected는 박스의 초기에 선택되는 상태를 의미하고, multiple은 멀티 여러 가지 항목을 복수로 선택할 수 있다는 것입니다. 

 

TEXTAREA 텍스트 공간 태그

텍스트를 입력받기 위한 공간을 제공합니다. 위에서 보았던 TEXT로도 입력을 받을 수 있지만, 보다 길게 입력되어야 하는 항목의 경우 TEXTAREA로 활용할 수 있습니다. 여러 줄로 입력이 가능해서, 여러 가지 의견을 보내야 하는 경우 또는 질문 답변 등과 같은 경우가 해당될 수 있습니다. TEXTAREA의 겨우 박스의 크기를 표현해주기만 하면 되는데 박스의 행인 가로 값은 rows, 박스의 열인 세로 값은 cols로 조정이 가능합니다. 각 rows, cols는 숫자를 입력해주면 되는데 행과 열의 숫자라고 보시면 좋을 것 같습니다. 

 

form, input, select, textarea 등을 통해 전송, 리셋 등 다양하게 값을 입력받기 위한 부분을 도와줄 수 있게 됩니다. 이상 HTML 태그 종류에 대해 살펴보았습니다.

 

 

 

HTML 이미지 alt 값 입력방법

HTML 태그 기본구조