Form(form / input / label / optgroup / datalist / progress / title / data)

<form action="" target="_self(기본값)/_blank" autocomplete="on(기본값)/off" novalidate>
</form>

target : submit 시에 action 페이지를 현재 탭(_self)에 띄울지 새로운 탭(_blank)을 띄울지

autocomplete : 이전 입력값을 통한 자동완성 기능을 사용할 것인지 설정

novalidate : input 타입에 따른 유효성 검사를 무효화(test 단계에서 활용)

 

<form action="" id="outForm">
</form>

<input type="file" multiple form="outForm" autofocus autocomplete="off">

type="file" + multiple : 복수의 파일을 입력할 수 있음

autofocus : 페이지가 열렸을 때 자동 focusing(로그인 시 ID에 활용하면 좋을 듯)

form : form 밖에 input을 사용할 경우, id를 명시하여 submit시 같이 전송 / reset 미적용

 

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

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

label : 체크박스와 같은 경우에서 label에 포함되어 있는 text를 선택해도 체크가 되도록 함

 

<select name="fruit">
        <optgroup label="좋아하는 과일">
           <option>apple</option>
           <option>mango</option>
           <option>banana</option>
        </optgroup>
        <optgroup label="싫어하는 과일">
           <option>mandarin</option>
           <option>berry</option>
        </optgroup>
</select>

optgroup : label="분류" 형식으로 select 박스 내의 선택사항을 세분화 가능

 

<input type="text" list="fruits">
   
<datalist id="fruits">
       <option>apple</option>
       <option>banana</option>
       <option>mango</option>
       <option>berry</option>
</datalist>

datalist : 자동완성 및 선택 목록 제공

 

<progress value="70" max="100"></progress>

value값은 보통 js로 컨트롤

max의 기본값은 1 > value 0.3은 30%

 

*전역 속성 : 대부분 요소에서 사용 가능

<a href="https://google.com" title="google.com">Google</a>

title : 마우스 오버 시 요소의 추가 정보를 제공함

 

<div id="me" data-my-name="zester" data-my-country="korea"></div>

<script>
      const me = document.getElementById('me');
      console.log(me.dataset.myName);
      console.log(me.dataset.myCountry);
</script>

data : html상에 js에서 사용할 data를 보관(?)

(hidden 대신 사용 가능할 것 같긴 한데, 더 복잡하려나...)