본문 바로가기
경일/HTML & CSS

페이지 이동 원리/form 태그 사용

by dev_kong 2021. 12. 29.
728x90
728x90

0. 목차

1.복습

2. 페이지 이동원리

3. form 태그

4. submit

1.복습

table, tr, td 를 이용하면 표를 만들 수 있는데,

주로 게시판을 만들 때 사용된다.

 

See the Pen Untitled by donghunlee (@dev_kong_dh) on CodePen.

 

 

 

2. 페이지 이동 원리

새로운 주소( href에 할당 해놓은 값)로 이동한다.

주소창의 주소는 서버에 저장되어 있는 경로를 나타낸다.

눈으로 보기에는 페이지를 이동해도 변하지 않는 부분들이 있어서,

변하는 부분만 변경 되는 것처럼 보일 수 있지만,

우리 눈에 고정된것 처럼 보이는 부분들은

이동전 html 과 이동 후 html에 공통적으로 작성된 부분이다.

<body>
    <h1><a href="./index.html">로고</a></h1>
    <table border="1">
      <tr>
        <td>번호</td>
        <td>제목</td>
        <td>작성자</td>
        <td>작성일</td>
        <td>조회수</td>
      </tr>
      <tr>
        <td>1</td>
        <td><a href="./view.html">안녕하세요</a></td>
        <td>web7722</td>
        <td>2021-12-29</td>
        <td>0</td>
      </tr>
      <tr>
        <td>2</td>
        <td><a href="./view.html">안녕하세요2</a></td>
        <td>web7723</td>
        <td>2021-12-29</td>
        <td>0</td>
      </tr>
    </table>
    <a href="./write.html">글쓰기</a>
  </body>

이렇게 html을 짜면

이렇게 랜더링 된다.

여기서 안녕하세요 라는 제목을 클릭하면

 

이 화면으로 이동한다.

우리 눈에는 로고는 그대로 있고

아래의 컨텐트만 변경된 것 처럼 보이지만,

실제로는 로고부터 게시글 내용입니다. 라는 내용이 들어간 새로운 html파일로 이동한 것이다.

<body>
    <h1><a href="./index.html">로고</a></h1>
    게시글 내용입니다.
  </body>

2-1. url과 uri

평소 웹사이트를 이용하다 보면 주소창에 적힌 주소에 ? 라는 특수문자가 들어간 것을 확인할 수 있다.

네이버에서 완두콩을 검색 했을 때의 주소이다.

 

 

주소창에 나타나는 전체 주소가 url

?이후 부분은 uri이다

즉, uri는 url에 포함되어 있다.

uri는 queryString 형태로 이뤄진다.

3.form

form 태그는

하위 엘리먼트 중 input에 입력된 내용(사용자가 입력)을 전송하기 위해 사용 된다.

3-1. form의 속성

아래에서 다룬 것 보다 더더더욱 다양한 속성들이 있다.

그건 mdn에서 찾아보고,

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

 

<form>: The Form element - HTML: HyperText Markup Language | MDN

The <form> HTML element represents a document section containing interactive controls for submitting information.

developer.mozilla.org

수업에서 다룬 내용인 action, name, method 만 정리해 보았다.

<form action="#" id="write" method="get">
...
</form>

 

이 세가지 속성을 이용해서 간단하게 게시판과 글쓰기 게시글내용을 확인 할 수 있는 창을 만들었다.

 <body>
    <h1><a href="./index.html">로고</a></h1>
    <form action="view.html" name="write" method="get">
      <table>
        <tr>
          <td>제목</td>
          <td><input type="text" name="subject" /></td>
        </tr>

        <tr>
          <td>이름</td>
          <td><input type="text" name="writer" /></td>
        </tr>

        <tr>
          <td>비밀번호</td>
          <td><input type="password" name="password" /></td>
        </tr>

        <tr>
          <td>내용</td>
          <td>
            <textarea name="content" id="" cols="30" rows="10"></textarea>
          </td>
        </tr>
      </table>
      <button type="submit">글쓰기</button>
    </form>
  </body>

글쓰기 html 랜더링 화면

<body>
    <h1><a href="./index.html">로고</a></h1>
    게시글 내용입니다.
  </body>

내용을 입력하고 글쓰기를 누르면 위의 html문서로 이동한다.

게시글 확인 html 랜더링 화면

이 중 우리가 봐야할 건 form 태그가 있는 첫번째 html이다.

 

3-1-1. action

<body>
    <h1><a href="./index.html">로고</a></h1>
    <form action="view.html" name="write" method="get">
      ...
    </form>
  </body>

폼을 전송할 목적지 url을 지정한다.

현재 html에선 view.html로 전송하도록 설정했다.

위의 주소창에서 입력한 내용이 uri 에 queryString으로 입력된걸 확인할 수 있다.

3-1-2. name

폼을 식별하기 위한 이름을 지정하는 속성이다.

id로 대체 가능하다.

3-1-3. method

폼을 서버에 전송할 http 메소드를 정한다.

값의 종류로는 get 과 post가 있다.

3-1-3-1. get

url 로 내용을 전달한다. queryStirng

전달된 내용이 url에 보임

모든 브라우저는 값이 get만 랜더링한다.

즉, method get 은 랜더링이 목적으로 사용됨

위의 사진과 동일한 사진이다.

주소창에 input에 입력된 내용들이 모두 표기되고,

화면역시 랜더링이 잘 된걸 확인 할 수 있다.

 

3-1-3-2. post

안보이는 곳에서 내용을 전달 한다.

전달된 내용이 url에 보이지는 않지만,

dev tool network, payload 영역에서 볼수 있다.

post는 랜더링이 목적이 아닌,

데이터 전송이 목적이다.

<body>
    <h1><a href="./index.html">로고</a></h1>
    <form action="view.html" name="write" method="post">
     ...
    </form>
  </body>

method속성을 post로 할당해주면,

페이지가 랜더링 되지도 않고,

입력된 내용이 url에 표기되지도 않는다.

입력된 내용은 dev tool을 열어서 network>payload에서 어렵지 않게 확인할 수 있다.

 

3-1-3-2. get 과 post 의 보안성

get 은 입력된 값들이 주소창에 전부 나타나고

post는 그렇지 않기 때문에,

post의 보안성이 더 강하다. 라고 생각 할 수 있지만,

dev tool만 열어도 쉽게 확인이 가능 하기 때문에,

보안성이 더 강하다고 말하긴 어렵다.

강해봤자 개미 코딱지 만큼 강한것 같다.

4. form 의 단짝 submit

우린 위에서 form의 속성을 이용해 어디로 전송할지, 어떻게 전송할 지는 정해줬지만,

전송하는 기능을 만들어 주지 않았다.

그 기능을 하는 것이 submit 이다.

<body>
    <h1><a href="./index.html">로고</a></h1>
    <form action="view.html" name="write" method="get">
  	  ...
      <button type="submit">글쓰기</button>
    </form>
  </body>

버튼으로도 만들 수 있고,

input으로도 만들 수 있다.

<body>
    <h1><a href="./index.html">로고</a></h1>
    <form action="view.html" name="write" method="get">
      ...
	  <input type= "submit" value="글쓰기" />
    </form>
  </body>

두개다 기능은 똑같이 하지만

단 input은 단일 태그 이기 때문에 value를 이용해서 내부 텍스트를 수정해야 한다는 차이가 있다.

 

728x90
728x90

'경일 > HTML & CSS' 카테고리의 다른 글

하나투어 게시판 클론코딩/ table 완전정복  (0) 2021.12.30
레이어팝업/모달팝업 이용해서 회원가입 창 만들기  (0) 2021.12.28
햄버거 메뉴 만들기  (0) 2021.12.27
html, css 클론코딩  (0) 2021.12.23
block, inline, inline-block차이점/ 자식 element 사용/ html, css 클론코딩  (1) 2021.12.22

관련글

댓글

티스토리툴바