form - action, method 속성
form 쓸 때 method 속성이 있다. 여기 GET을 주면 url에 input의 name에 입력값이 할당된 형태의 쿼리 파라미터가 들어간 것을 볼 수 있었다.
PW등 보안이 중요한 것들은 GET메소드로 보내면 안되겠다. 본문이 드러나지 않는 POST를 쓴다. 대부분 POST를 쓰게 될 것이다.
label과 input
잘못된 값을 입력받지 않기 위해 label이 필요하다.
MDN을 보면 color, text, file, number 등등의 type 속성 지정이 가능하다.
라벨과 인풋을 연결하는 것은 라벨의 for과 인풋의 id이다. (드물게 라벨의 자식으로 인풋을 넣어주기도 한다.)
id는 한 문서 내에 하나만 가능하다. 하지만 name 같은 경우 한 form 내에서 하나만 가능하다.(name에 할당해서 보내므로)
fieldset, legend
필드셋 속성은 설문조사 같이 시멘틱하게 관련된 요소들을 묶는 용도다.
신기한 것은 저렇게 border로 묶인다.
범례로 legend라는 요소가 있다. 필드셋의 "첫번째" 자식으로 넣어줘야 한다.
필드셋은 div와 같이 block 요소이다. label + input은 플로우 컨텐츠.
input - type 속성 1
text를 주면 엔터 치니 제출된다.
password도 그렇고 둘다 minlength와 maxlength를 줘서 툴팁으로 글자수를 맞추라고 안내해줄 수 있다.
그 밖에 유효성 체크해주는 email, tel도 있다.
input - type 속성 2
number도 있다. 다른 값 들어오면 역시 유효성 검사해서 안내 툴팁을 보여준다.
그 밖에 게이지바를 숫자로 반환시켜주는 range나 캘린더 기능으로 date, month 등이 있다.
input - type 속성 3
reset, submit, button 타입 버튼이 있다.
체크 박스를 만들 때 기본적으로 체크되어있길 바랄 때가 있는데 아래와 같이 checked를 준다.(라디오버튼도 마찬가지)
알다시피 라디오 버튼은 하나만 클릭할 수 있다. 그런데 이걸 묶어주기 위해서는 관련 라디오 버튼들의 name을 일치시켜야 한다. 해당 값을 받는 변수는 value로 구별하면 된다.
input - name, placeholder, autocomplete, required 속성
인풋에 name 속성을 왜 주느냐? form으로 제출하려고 할 때 그 값을 value에 받아준다고 생각하면 된다.
autocomplete는 브라우저에서 유저에게 물어봐서 on시킬 수 있는데 개발자가 off로 줘버리면 불가능해진다.
제출을 강제하고 안내 툴팁을 보여주고 싶다면 required를 넣어주면 된다.
input - disabled, readonly 속성
disabled는 인풋을 못 쓰게 막고 form의 쿼리파라미터에도 포함되지 않게 해버린다.
그럼 이걸 왜 쓰느냐? js로 유동적으로 넣고 뺄 수 있는데 상황에 따라 필요할 때가 있다.
근데 입력은 안되지만 전송은 되게 하고 싶을 때 readonly를 쓴다. 이게 차이점이다. value는 지정해주고 보여줄 수 있으므로 수정만 못하게 막는 것이다.
input - step, min, max
number라는 타입에는 min, max를 주고 유효성 체크를 받을 수 있다.
step은 그 숫자만큼씩 이동하는 용도다. range 타입에도 적용이 가능하다.
button
button과 input type="button" 이 다른 상황은 무엇일까?
input은 자동적으로 텍스트를 "초기화", "제출" 이렇게 넣어준다.
button은 아니다. 넣어줘야 된다.
가장 큰 차이점은 뭘까요? input의 value 속성에다가 문자열만 넣을 수 있다는 겁니다. button의 content에는 자식으로 <strong>버튼</strong>이라든가 svg 아이콘이라든가 스타일링하기 수월합니다.
select, option, optgroup
서버에게 보낼 때 줄 name 속성은 잊지말자.
보낼 때 content가 날라가지만 영어로 된 값이라든가 다른 값 주고 싶을 때 value 속성에 넣어준다.
안내용 옵션을 하나 넣어둘 때가 있다. 근데 서버로 전달할 데이터가 아니므로 required와 value=""로 막아두어야 한다. 해당 문구로 제출을 날리면 빈 문자열이므로 required를 만족시키라고 툴팁이 뜬다.
들어왔는데 중간의 옵션 하나가 자동으로 선택되어 있길 바란다면 selected 속성을 쓴다.
또 사용해본 적 없는 optgroup이라는 태그를 배웠는데 옵션 간의 연관성 있는 그룹을 묶어서 구분감 있게 보여준다. label이라는 속성에다가 그 그룹명을 적는다.
input - list 속성과 datalist
datalist라는 태그? 이거 twitter에서 유용한 html 팁 글로 본 적이 있었다.
input이랑 같이 사용된다.
사용자가 입력하고 싶은 값을 입력하면 되지만(select는 이게 안된다.) 아래에 datalist의 option들에 묶어놓은 (텍스트들의) 리스트를 띄워줄 뿐만 아니라 입력한 데이터와 일치하는 텍스트들을 자동완성해서 보여준다. 간단히 검색창을 구현할 때 유용하다는 생각이 든다.
textarea
내부 컨텐츠는 스페이싱이나 개행이 다 그대로 적용되어 보여진다. 이는 pre 태그랑 비슷하다.
rows와 width로 주로 잡아준다.