2일차 : FORM, INPUT

FORM

GET 방식은 주소창에 입력한 값이 그대로 노출되서 로그인에 적합하지 않다. (정보를 URL에 담아서 보낸다.)

POST 방식으로 해도 완벽하게 숨길 수 없다. 개발자 도구 - network - headers 의 제일 하단에 보면 정보가 입력되있다.

그래서 완벽하게 숨기기 위해는 암호화를 통해서 숨김처리 해야한다.

일반적으로 POST방식을 많이 사용한다.

 

novallidate는 테스트할 때 많이 사용한다.

이메일란에 골뱅이를 안붙여도 로그인을 눌렀을 때 넘어간다.

 

 기본적으로 target="_self"로 되어있어서 로그인을 눌렀을 때 해당페이지에서 변경된다.

_blank로 변경하면 새로운 페이지로 로그인페이지가 뜬다.

 

 

INPUT

FORM 태그 밖에서 연결하려면 id, form을 연결해야 한다.

<form action="/login" id="login-form">
</form>
<input type="text" form="login-form">

 

name속성을 명시해주지 않으면 전달되지 않는다.

확인은 GET방식으로 했을 때 url에서 확인해 볼 수 있다.

<form action="/login" metho="GET">
    <input type="email" name="id">
    <input type="password" name="password">
    <input type="submit" value="로그인">
</form>

 

LABEL

<input type="checkbox" id="cb">
<label for="cb">동의하십니까?</label>

<!-- 아래와 같다 -->
<label><input type="checkbox"/>동의하십니까?</label>

<!-- 검색 예시 -->
<label>
    검색 <input type="search">
</label>

 

BUTTON

<!-- 아래 두개는 같다 -->
<input type="reset" value="초기화">
<button type="reset">초기화</button>

<!-- 아래처럼 사용하기도 한다. -->
<button onclick="doit()">클릭하세요</button>
<script>
    function doit() {
        alert('클릭했습니다.')
    }
</script>

 

FIELDSET, LEGEND

같은 목적의 양식을 그룹화(fieldset)해서 제목(legned)를 지정

<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
  </fieldset>
</form>

 

 

class, id

class는 중복 가능, id는 고유.

아래 코드는 선택하는 예시.

const section = document.querySelector('.section');
const sectionId = document.getElementById('section');

 

 

TITLE

마우스를 올렸을 때 설명 나오게 할 수 있다.

<h2 title="이 부분은 제목">제목</h2>
<a href="naver.com" title="네이버">네이버</a>
<div title="div 태그입니다.">DIV</div>

 

 

data-*

html에 javascript에서 이용할 수 있는 데이터를 저장하는 용도로 사용

<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>

const $me = document.getElementById('me');
console.log($me.dataset.myName); // "Heropy"
console.log($me.dataset.myAge); // "851"

 

 

tabindex

대화형 컨텐츠들은 기본적으로 tabindex="0"을 가지고 있는데 tab을 누르면서 진행할 순서를 정할 수 있다.

tabindex="-1"을 이용해서 탭 순서에서 제외할 수도 있다.