익명의 개발노트

[트위터 미니버전] 트윗화면 div -> form 태그 수정하기. 본문

코딩일기/TIL

[트위터 미니버전] 트윗화면 div -> form 태그 수정하기.

캡틴.JS 2019. 6. 7. 21:25
반응형

1. html

 1) div

<div class="tweet-wrap-input-img-btn">
  <textarea id="tweet-input" type="text" placeholder=" What's happening??"></textarea>
  <div class="tweet-wrap-image-btn">
  <div class="tweet-img">🖼</div>
  <button id="tweet-submit">Tweet!</button>
  </div> 
</div>

 2) form

<form class="tweet-wrap-input-img-btn" method="post">
  <textarea id="tweet-input" type="text" placeholder=" What's happening??"></textarea>
  <div class="tweet-wrap-image-btn">
  <div class="tweet-img">🖼</div>
  <button id="tweet-submit" type="submit">Tweet!</button>
  </div> 
</form>

 form 태그 사용시, 메소드를 post 설정해주고, 버튼은 타입 submit으로 반드시 지정해주어야한다.

 form 태그가 자동으로 서버쪽으로 요청하는데, 해당 버튼 쪽에 버튼 이벤트에 e.preventDefault(); 를 해주어야 새로고침 현상을 막을 수 있다.

반응형
Comments