[HTML] elements and attributes 2

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

🔮 양식

form과 속성

<form> 웹서버에 정보 제출하기위한 양식 범위 </form>

<form action='정보처리URL' method='http방식(GET, POST)' 
			autocomplete='이전의 입력값 자동완성(on, off)' name='고유이름'
			novalidate '전송시 데이터 유효성 검사하지 않도록 지정'
			target='전송후 응답받을 방식(_self, _black)'>
			<!-- something code -->
</form>

input과 속성

<input/> 사용자에게 입력 받을 데이터 양식

<input autocomplete='이전에 입력값 자동완성(on, off)'
	 name='양식의 이름'
	 value='양식의 값'
	 checked='양식이 선택되었음을 표시'
	 disabled='양식 비활성화(boolean)'
	 autofocus='페이지로드될 때 자동으로 포커스(boolean)' 
	 readonly='수정불가 읽기전용(boolean)'
	 form='form의 id값, form의 후손이 아닐 경우만'
	 list='datalist의 id값'

	 type='입력받을 데이터 종류'
	 max='지정 가능한 최대값(number), type이 number일 경우만'
	 min='지정 가능한 최소값(number), type이 number일 경우만'
	 maxlength='입력 가능한 최대 문자수(number), type이 text, email, password, tel, url일 경우만'
	 multiple='둘이상의 값을 입력 할 수 있는지(boolean), type이 email, file일 경우만'
	 placeholder='입력할 값의 힌트, type이 text, search, tel, url, emai일 경우만'
	 src='이미지URL, type이 image일 경우만'
	 alt='이미지의 대체 텍스트, type이 image일 경우만'
/>

type에 따라 위의 속성이 다르게 사용된다.
input type의 종류는 아래와 같다.

<input type='text'/>

<input type='button'/>

<input type='chechbox'/>

<input type='radio'/>  같은 name 속성 그룹 내 하나만 선택 가능

<input type='email'/>

<input type='password'/>  가려지는 양식

<input type='file'/>

<input type='color'/>

<input type='image'/>  이미지 제출 버튼, <img/>처럼 사용

<input type='hidden'/>  보이지 않지만 전송할 양식, value 속성으로 값을 지정

<input type='number'/>

<input type='range'/>

<input type='reset'/>  해당 <form> 범위 내 모든 양식

<input type='submit'/>  해당 <form> 범위 내 고유한 양식

<input type='search'/>

<input type='tel'/>

<input type='url'/>

---

▶input file 일 때, 파일가져오기 버튼 이미지 변경하기 (CSS)
▶input file 일 때, 이미지 미리보기 (JS)
▶input text 일 때, 검색창으로 활용하기 (JS)

---

label과 속성

<label> 라벨 가능한 요소의 제목 (button, input, progress, select, textarea) </label>

<label for='참조할 요소의 id값'> 라벨명 <label>

참조하는 id의 속성을 부여받아서 동일한 기능을 하기도한다.

<!-- 요소를 참조하는 형태 -->
<input type="checkbox" id="user-agreement" />
<label for="user-agreement"> 동의 </label>

<!-- 요소를 포함하는 형태 -->
<label>
	<input type="checkbox" /> 동의
</label>

button과 속성

<button> 선택 가능한 버튼 </button>

<button autofocus='페이지로드될 때 자동 포커스(boolean)'
	disabled='버튼 비활성화(boolean)'
	form='form의 id, 후손이 아닐 경우만'
	name='폼데이터와 함께 전송되는 이름'
	type='버튼타입(button, reset, submit)'> 적용 </button>

button태그 사용시 갑자기 새로고침되는 이유
button 타입의 default가 submit 이기 때문이다.
type을 button으로 작성해주면 된다.

<form action="">
      <input type="text" name="" id="" value="최초값" placeholder="입력해주세요">
      <button type="reset"> reset </button>
</form>

reset 타입은 입력값이 최초값과 다른 경우, 최초값으로 돌아간다.

---

▶input button과 button태그 비교하기

---

textarea와 속성

<textarea> 여러줄의 일반 텍스트 양식 </textarea>

<textarea autocomplete='이전에 입력값 자동완성(on, off)'
	autofocus='페이지로드될 때 자동으로 포커스(boolean)' 
	disabled='양식 비활성화(boolean)'			
	form='form의 id, 후손이 아닐 경우만'		
	maxlength='입력 가능한 최대 문자수(number)'
	name='양식의 이름'
	placeholder='입력할 값의 힌트'
	readonly='수정불가 읽기전용(boolean)'
	rows='양식의 줄 수(number)'></textarea>

---

▶ 텍스트 수 출력하는 방법 (JS)

---

fieldset, legand와 속성

<fieldset> 같은 목적의 양식을 그룹화 </fieldset>

<legand> fieldset의 제목 </legend>

<fieldset disabled='그룹 내 양식 비활성화(boolean)' form='form의 id' name='그룹의 이름'>
    <legend> 과일목록 </legend>
    <label><input type="radio" name="fruits" value="tomato" /> 토마토 </label>
</fieldset>

select, datalist, optgroup, option과 속성

<select> 옵션을 선택하는 메뉴 </select>

<datalist> input에 정의된 옵션으로 자동완성기능을 제공 </datalist>

<optgroup> option을 그룹화 </optgroup>

<option> select 나 datalist에 사용될 옵션 </option>

<select autocomplete='이 전에 입력한 값 자동완성 기능(on, off)'
	disabled='버튼 비활성화(boolean)'
	form='form의 id, 후손이 아닐 경우만'
	multiple='다중 선택 여부(boolean)'
	name='메뉴의 이름'
	size='한 번에 볼 수 있는 행 수(number)'>
</select>

select에서 disabled = true 적용하면 값을 불러오지 못한다.

<option disabled='버튼 비활성화(boolean)'
	label='표시될 옵션의 제목(생략되면 포함된 텍스트를 표시)'
	selected='옵션이 선택되엇음을 표시(boolean)'
	value='양식으로 제출될 값(생략되면 포함된 텍스트를 사용)'>
</option>

select는 CSS 할 수 있지만, option은 시스템 디자인을 사용한다. (구글기준)

---

▶ option CSS 적용하기 (JS)

---

<input type="text" list="fruits">

<datalist id="fruits">
    <option>토마토</option>
    <option>바나나</option>
    <option>파인애플</option>
    <option>딸기</option>
    <option>키위</option>
</datalist>

옵션을 미리 제공하여 자동완성 기능을 갖는다.


progress와 속성

<progress> 작업 완료 진행률 </progress>

<progress value='작업 진행량(number), max생략할경우 0-1 사이의 숫자' max='작업의 총량(number)'></progress>

🔮 전역속성

HTML 요소에서 공통적으로 사용가능한 속성

<div style='css 선언'
	 class='css 혹은 js 선택기로 별칭으로 지정, 공백으로 구분'
	 id='css 혹은 js 선택기로 문서의 고유 식별자'
	 title='요소의 정보, tooltip효과가능'
	 lang='요소의 언어(ko, en, fr..)'
	 data-*='사용자 정의 데이터 속성'
	 draggable='drag and drop 기능 여부(boolean)'
	 hidden '요소를 숨김'
	 tabindex='Tab키로 포커스 순서를 지정(-1 순서제외, 양수의 값은 논리적흐름방해로 비추)'>
 </div>

data-* 와 dataset
데이터 속성은 'data-'시작해야 하며, 브라우저는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.
하나의 HTMl 요소에는 여러 데이터 속성을 동시에 사용할 수도 있다.
dateset은 자바스크립트이기 때문에 속성명을 camelCase로 변환됩니다.

<div id='date' data-create-date='2022-01-01'>  ->  console.log(div.dataset.createDate); 

div.dataset.createDate = '2022-12-31'  ->  <div id='name' data-create-date='2022-12-31'>

div.getAttribute('createDate');  //권장

---

Reference

1) 데이터 속성 사용하기

(HTML) 데이터 속성 사용하기 (data attribute)

2) dataset 속성의 이해

HTML 데이터셋(Dataset, data-*) 속성의 이해