[HTML] form tag, input 태그 속성

input 태그

• checkbox와 listbox는 ``html <input ... name="key[]">``로 지정하면 서버에서 배열로 받을 수 있다.
• HTML5에서 input에 type이 많이 추가되었으니 참고할 것.(tel, email, url, date, ...) 이를 사용하면 좀 더 semantic하게 나타낼 수 있다.
• HTML5에서 input에 placeholder 등의 attribute가 추가되었으니 참고.

아무것도 입력 안하는 상태를 방지하려면 `` required`` 추가. 다른 길이 제한 속성을 쓰더라도, 별개로 써줘야 함.

입력되는 문자의 최대 길이를 제한하려면 `` maxlength``

입력되는 문자의 최소 길이를 제한하려면 `` maxlength``

입력되는 문자의 패턴을 제한하려면 `` pattern``(정규표현식) - 근데 maxlength처럼 강제로 문자의 최대 길이를 막지는 않는다.

``py type="number"``도 있는데, 이건 말그대로 숫자 데이터일 때. "바코드"같이 숫자로 이루어진 데이터에는 pattern을 써야하고, "나이"같은 것에는 number를 쓴다.

기타 속성들 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

input 태그에 있는 값을 가져와서 ajax 요청에 사용할 때, tag validation 적용하기 - 그냥 라이브러리 쓰자.

일단, <form>으로 감싸지 않은 상태에서 input 태그만 가지고 native validation UI를 trigger하는 것은 불가능하다.

그래서 HTML5 native validation을 사용할거라면 form으로 감싸주고, submit event를 다른 것으로 바꿔주는 방법을 사용한다.

```js

const form = document.querySelector("#product-code-form");

form.addEventListener("submit", function (e) {

    e.preventDefault();

    // do something

});

```

근데 <form>으로 감싸게 되면 문제가, validation을 위해  <form>을 쓰자니 안에 또 <form>이 들어가야 하는 경우 등 다양한 상황에 대응이 안된다.

그래서 단순히 버튼을 눌렀을 때 조건에 맞지 않으면 경고를 띄워주는건 1. js와 css로 직접 간단히 짜거나 2. 라이브러리를 이용하는데, 그냥 직접 짜는게 훨씬 깔끔하고 컨트롤하기도 편하고 시간도 적게 든다.

1. js와 css로 직접 간단히 짜는 방법

```css

input.invalid {

    border-color: red;

}

```

```js

const amount_to_pay = document.querySelector("#amount-to-pay");

isValid(amount_to_pay);

function applyValidation(dom) {

    if (!dom.checkValidity()) {

        dom.classList.add("invalid");

        return false;

    }

    else {

        dom.classList.remove("invalid");

        return true;

    }

}

```

이런 식으로 ``js .checkValidity()`` 메서드를 사용하면 HTML 태그에 지정되어 있는 required 등에 알맞게 validation check를 할 수 있다!

form tag

method를 설정하지 않으면 기본값 GET으로 설정된다.

```html

<form method="POST" id="my-form" action="index.php">

    <label for="name">이름</label></br>

    <input type="text" name="name" id = "name" /></br>

    <label for="pass">비밀번호</label></br>

    <input type="password" name="pass" id="pass" /></br>

    <input type="hidden" name="hide" value="01" />

    <input type="submit" value="제출"/>

</form>

```

submit 버튼을 누르면 자동으로 입력 양식을 제출하고 페이지를 새로고침한다. 

GET은 query string으로, POST는 form data로 보내게 되는데 

데이터를 보내는 형식은 `` name="name_value*" value="value_value*"`` 이면

`` name_value1=value_value1&name_value2=value_value2...`` 로 GET이나 POST나 동일하다.

태그에 ``name`` attribute가 설정되어 있다면 ``key=value`` 쌍이 생성되어 전송된다.

그래서 전송하고 싶은 데이터가 있다면 ``name``과 ``value`` attribute를 추가하면 된다.

``name``이 설정되지 않으면 어떤 태그든지 ``key=value`` 쌍이 생성되지 않으니 전송되지 않는다.

security

1. ``html <input type="password">``에 입력하는 데이터도 query string이나 form data에 plain text로 노출된다. hidden도 마찬가지.

2. url에 바로 노출되는 GET보다야 POST가 낫겠지만 form data도 마음만 먹으면 확인할 수 있기 때문에 근본적으로는 차이가 없다.

3. POST도 클라이언트 단에서 ``html <form method=post>``로 폼 추가하고 전송하면 그냥 전송할 수 있다.

그래서 인증을 담당하는 페이지는 https로 구성해야 한다.

확인해보니 n사 인증 페이지는 https, POST로 전송하고, 클라이언트에서 JS로 encryption해서 전송하기 때문에 아이디와 패스워드가 그대로 body에 노출되지 않는다. 패스워드는 encpw로 encryption되어 전송되는 것 같은데 아이디도 같이 encryption되는 것으로 추정. (해시를 클라이언트서 하는지 서버에서 하는지는 자세히 안봤다. 아마 클라이언트에서 하겠지.)

ID/PW를 같은 값으로 입력해도 매번 encpw값이 다르다. encnm을 같이 전송하는 것으로 보아 이를 salt로 사용하는 듯.

이런 식으로 JS를 이용해 전송되는 데이터 자체도 암호화하는 것이 좋다.