[HTML] Chapter 09. 웹 어플리케이션과 정보를 제출할 땐 form

웹 어플리케이션

웹 페이지라 하는 것은 html, css를 통해서 정적인 콘텐츠를 웹 페이지에 방문하는 사용자들에게 단순히 보여주기만 한다.

그런데 우리가 사용하는 웹 어플리케이션이라고 하는 것은 정적이 아닌 동적인 콘텐츠로서 글에 댓글을 쓴다거나 좋아요를 누르는 등, 사용자와 소통할 수 있는 방법이 있다.

그런 의미에서 우리가 단순하게 콘텐츠를 보여주게 되는 것은 우리의 웹 페이지가 웹 사이트로 분류되고, 우리의 웹 페이지에서 사용자와 소통할 수 있게 되면 그 때부터 웹 어플리케이션이라고 부를 수 있는 것이다.

그래서 필요 시 javascript를 배우는 것이다. 

 

프로그래밍을 배울 때, Front-End 영역이 진입장벽이 낮다, 쉽다 라는 말을 한 번 쯤은 들어본 적이 있을 것이다.

나는 그런말이 나오는 이유 중 하나가 내가 코딩하는 내용을 실시간으로 피드백을 받을 수 있기 때문에 흥미가 떨어질 일이 적어서 Front-End 영역이 배우기 쉽다 라고 생각한다.

그런 의미에서 단순하게 콘텐츠를 배치시키거나 나열하는 것보다는 사용자의 움직임에 따라서 웹 어플리케이션 UI를 변경하거나 혹은 필요하다면 어떤 새로운 콘텐츠를 보여주는 방법도 html과 css를 배우는데 정말 정말 중요한 역할을 하게 될 것이다.

 

 

---

 

폼 (form)

폼(form)이란? 웹 상에서 사용자의 입력을 받아서, 클라이언트에서 서버로 정보를 제출하기 위한 요소(Element)

단순 웹 사이트가 아닌 사용자와 소통할 수 있는 웹 어플리케이션으로 나아가려면 

form 태그가 사용자와 우리의 웹 사이트를 소통할 수 있도록 만들어주는 가장 기본적인 html 태그이다.

 

주요 속성(Attribute)

• action : 폼 데이터를 보낼 URI 지정
  • submit, button 등을 통해 사용자가 데이터를 제출하는 이벤트가 발생했을 때, 입력받은 데이터를 어디로 보낼지 지정
  • 참고) URI란? Uniform Resource Identifier. 리소스의 위치를 식별하기 위한 문자열. (cf- URL은 URI의 하위 개념)
  • 다른 웹 페이지 주소, 서버의 주소, 프로젝트 내 다른 HTML 파일 등
• method : GET, POST 등 양식을 제출할 때, 사용할 HTTP 메소드
  • GET : action에 명시한 URI에 Query Parameter(?뒤로 오는 값)형태로 이어 붙여서 전송(Default, 기본값)
    • 예) http://my-server-host.com?fieldName1=vlaue&fieldName2=value...
    • 그대로 드러나기 때문에 보안에 취약함
  • POST : Request Body에 데이터를 넣어서 전송
    • 백엔드 개밸자와 협의 필요하나, 보통 실무에서는 POST로 보내는 경우가 많음
• id : form의 식별자

<!--
  get : url, ?, &, name=사용자가 입력한 값
  post
-->
<form action="./result.html" method="get">
  <div>
    ID : <input type="text" />
  </div>
  
  <div>
    PW : <input type="password" />
  </div>
  
  <input type="submit" value="로그인" />
</form>

 

사용자가 어떤 정보를 입력하고 정보를 받을 때, 가장 원초적으로 사용할 수 있는 html 태그가 form 태그와 form 태그 안에 자주 사용되는 input 태그이다.

 

input 태그

• <form> 태그는 입력 받을 부분 전체를 감싸는 껍데기 같은 느낌
  
  • <form> 태그 하위에 <input>, <select>, <textarea> 태그를 작성하여 실제 입력을 받음
  • <input> 태그는 가장 대표적인 form 요소
• 주요 속성
  • type : type 속성의 값에 따라 input type이 정해지며, 여러가지 종류의 입력을 받을 수 있다.
    • <input type="text"> (default)
    • <input type="email">
    • <input type="password">
    • <input type="checkbox">
    • <input type="radio">
    • <input type="button">
    • <input type="submit">
    • <input type="date">
    • <input type="file">
    • <input type="number">
    • <input type="color">
  • name : 데이터를 제출하기 위한 이름 지정
  • value : input의 값 지정. 초기값이 있을 때 등 사용 (참고-추후 React, Vue에서는 state 값 등 변수처럼 지정 가능)
  • placeholder : 값이 입력되기 전, 사용자에게 힌트 제공
  • required, disabled, checked 등
• input은 인라인 요소이다