input 그리고 form에 대해서

<input> 그리고 <form>

input

input form의 가장 중요한 공통점은 이것을을 활용하여 결국 데이터가 백엔드 단으로 흘러 들어간다는 것이다. 그렇기 때문에 프론트엔드 엔지니어로서 이 두가지 태그에 대해서 알아놓는 것이 좋다고 생각한다.

먼저 <input>에 대해서 알아보자, input 태그를 이용해서는 많은 것들을 할 수 있다. 우리가 회원가입 페이지나 뭔가 정보를 입력 받을때 이 input 태그가 사용된다. html 마크업상 간단한 사용 예시는 다음과 같다. 

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

위의 예시를 보면 알 수 있겠지만 input에는 기본적으로 type이라는 어트리뷰트가 추가가 되어야한다. 이 type에는 html에서 제공하는 여러가지 input 형식에 따른 각기 다른 유형의 정보를 넣을 수 있게 되어있는 type들을 적어야한다. 

많은 타입들이 있지만 사실 그렇게 또 엄청나게 많은 것들도 아니기 때문에 다음을 보도록 하자. 

• button - 버튼이다. click이벤트용으로 활용할 수 있다. 
• checkbox - 체크 표시를 남길 수 있는 체크 박스이다. 
• color - 클릭하면 컬러를 선택하는 color picker가 열리게 된다. 컬러 값을 value로 갖는데
• date - 연도-월-일의 날짜를 택할 수 있는  타입이다. 클릭하면 달력같은 것이 나온다. 
• datetime-local - 시간까지 추가된것 날짜 선택 타입
• email - 이메일만 받아들이는 타입이다. 안에서 email형식이 맞는지 검사한다. 
• file - 파일을 선택해서 업로드하는 input이다. 
• hidden - display는 되지 않지만 input태그의value가 서버로 submit 된다. 
• image - 이미지 선택 업로드 타입
• month - 년 월 입력 타입
• number - 숫자만 입력할 수 있다. 숫자를 입력하고나면 숫자에 +1, -1의 화살표가 표시되서 클릭하면 해당 값만큼 빠짐
• password - 패쓰워드 입력인데 사용자에게 site가 보안상의 이슈가 있다면 알려줄 것이다. 
• radio - 여러가지 선택지중에 하나만 선택가능할 경우 checkbox가 아니라 radio를 사용한다. 
• range - range widget을 display해주고 초기값은 가운데 값이고 min또는 max value를 설정할때 쓴다고 한다.
• reset - 누르면 초기화된다. form안에 있는 컨텐트들을 초기화하거나 default 값으로 되돌린다. 추천하지 않음
• search - 검색창, 어떠한 디바이스에서는 search icon이 보여지기도 한다. 
• submit - 제출하는 버튼, 누르면 form을 제출한다. 
• tel - 전화번호 입력 창
• text - 텍스트 입력창
• time - 시간 입력창
• url - url 입력창이다. 안에서 url 형식이 맞는지도 확인한다. 
• week - 몇년도의 몇번째 주인지 선택하는 창

위처럼 약 20가지 정도가 존재한다. 그리고 어떠한 것들은 그것들만 사용하는 어트리뷰트들이 따로 있다. 어트리뷰트까지 모두 외우기보다는 자주 사용해서 익숙해지는 방향으로 공부하는 것이 맞을 것이다.  

form

form 태그를 이용해서 사용자가 입력한 데이터를 수집할 수 있다. input, textarea, button, select, checkbox, radio button, submit, button 등의 입력 양식 태그를 포함할 수 있다. 

form이 가지는 attribute들

• action - 값: URL 설명: 입력 데이터가 전송될 URL 지정
• method - 값: get/post 설명: 입력 데이터(form data) 전달 방식 지정

GET POST는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내고 HTTP request method라고 한다. 

잠깐 GET과 POST에 대해서 얘기를 하자면.. GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다. URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있고 전송할 수 있는 데이터의 한계가 있다. (최대 255자) REST API에서 GET 메소드는 모든 특정 리소스의 조회를 요청한다. POST 방식의 경우 Request Body에 담아 보내는 방식이다. URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다. REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다. 

우리가 위에서 살펴봤던 input태그는 form태그 내에 있어야 서버로 데이터를 전송할 수 있다. 서버로 전송되는 데이터는 name 어트리뷰트를 키로, value 어트리뷰트를 값으로하여 key=value의 형태로 전송된다.