[220907] form의 속성과 전송방식 등

✏️ <form> 요소는 뭐에 쓰는 거지? 어떻게 동작하지?

- 폼은 정보를 입력하는 영역(로그인, 회원가입, 게시판 등등)

- 폼에 입력을 하고 제출(submit)하게 되면

   → 데이터는 서버로 전송
   → 전송한 데이터는 웹 서버가 처리

   → 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송

 

- <input> 태그여야 서버에 제출이 가능한데,
input에 없는 데이터인 경우는 input hidden을 추가해서 데이터를 input에 넣어 제출한다.

 

✏️ <form> 요소의 action 속성의 전송방식

• URL로 데이터를 전달 할거냐 → GET 방식
  - 스니핑 할 수 있다(훔쳐보기가 가능하다는 뜻)
  - URL로 데이터를 전달할 때 사용(file같은 큰 파일은 GET으로 전송하지 않는다. id와 pw같은 민감 데이터X)
  
  
• URL에 데이터가 노출되면 안되는 것이냐 →POST 방식
  - 패킷 안에 데이터를 넣어 전달할 때 사용한다(민감 데이터O, 큰 데이터O)

✏️ <form> 요소의 name 속성이 하는 일

• name : 서버에서 받아서 어떻게 처리할까 이다.
• 데이터베이스로 따지자면, 콜론을 의미한다.
• name의 속성 값이 서버로 전송 → DB에서 검사 → 일치하면 로그인 페이지를 클라이언트에게 보여줌

 

 

✏️ <button>과 <input type=”button”>의 차이

• <button>요소가 CSS가상요소 사용도 가능하고, 스타일 적용하기가 더욱 쉽다.

 

✏️ <fieldset>과 <legend>요소도 새롭게 알게 되었습니다

• <fieldset> 요소를 사용하면, 그 자식 요소로 사용되는 폼 컨트롤들을 그룹화 할 수 있다.
  폼 내용이 방대할 때, 섹션별로 나눌 때 용이하다.
  
  
• <legend> 요소는 폼 그룹의 목적을 나타내는 제목을 의미한다.
  반드시 <fieldset>의 첫번째 자식으로 사용해야합니다.

 

 

✏️ <input> 요소에 라벨링 해주는 방법

<label for=””> 요소를 <input id=””>요소에 달아줄 땐, for의 속성값과 input의 id 속성값을 동일하게 맞춰준다.

 

 

✏️ 데이터를 다루는 <table> 요소는 동적 데이터이다.

• 현황을 계속해서 긁어와야 하니까 바뀌는 수치를 받아올 때 사용하는 편이다.
  그렇다고 <thead>만 놓고, <tbody>를 안만들면 안된다.
  <tbody> 요소를 만들어 둔 채, 자바스크립트로 데이터를 패치 받아와서 연결한다.

<thead>
  <tr>
    <th>통장</th>
    <th>예금액</th>
    <th>이자율</th>
    <th>계좌번호</th>
  </tr>
</thead>

<tbody>
  <!-- 자바스크립트로 데이터 패치 받와서 연결한다. -->
</tbody>

 

 

그 밖의 것들

• colspan → column 방향으로 병합
• rowspan → row 방향으로 병합
• <tfoot>은 필수 권장사항은 아니다
• <form> 속성 중에 number → 스피너 UI 를 만든다.
• UI 업데이트를 신중하게 해야한다.
• 요즘엔 테이블 보단 플렉스, 그리드 사용한다.
• 격자 형태: display: grid
• 단방향: display: flex;

 

 

✏️ 마크업 개행(자바스크립트로 텍스트 노드를 삭제 할 수 있는건가요?)

알아볼것

 

 

 

❓네이버 메일이 table 요소를 사용하는 이유는?

뉴스레터는 옛날 방식의 테이블 레이아웃으로 작성됩니다.
실무에서 뉴스레터 제작했었는데 이게 아웃룩 툴 도구 때문인건지
여러 메일 관련 툴에서 깨지는 현상이 발생해서
계속 옛날 방식으로 테이블 레이아웃형태로 진행되는것 같긴해요.

 

이런걸 대기업에서 제공해주는 이유는? → 우리의 빅데이터를 얻을 수 있다

• 네이버 웹페이지 표준이 나의 웹페이지가 더 노출이 잘 되게 해주는건가?
• [구글애널릭틱스](https://analytics.google.com/analytics/web/provision/#/provision)

 

• [웹접근성 table에서 scope 속성 사용하기](https://webisfree.com/2015-10-12/[%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1]-table%EC%97%90%EC%84%9C-scope-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)

 

• 영상 배속해서 보고 싶을 때

document.getElementsByTagName("video")[0].playbackRate = 2.5;