input 모드들

: 글자 입력 창

• required : 반드시 입력해야 함
• max : 최대 입력값
• placeholder : 안에 입력값이 아닌 임시 입력값
• type=“submit” : 새로고침 버튼으로 바꾼다
• readonly : 읽기전용

JS 기준 innerText = "제목"; input 을 버튼으로 바꾸었을 경우는 value = "제목"; 이 된다

input 타입별 사용법

• type=“search” : 검색자
• type=“url” : 사이트 주소
• type=“name” : 이름
• type=“password” : 비밀번호용, 숫자 안나옴
• type=“number” : 숫자만 가능, min max 로 숫자제한 가능
• type=“email” : @ 들어간 이메일 형식만 가능
• type=“tel” : 전화번호
• type=“color” : 색깔 선택용,
• type=“date” : 날짜용
• type=“month” : 달
• type=“time” : 시계시간
• type=“datetime-local” : 시간 전체
• : 진행바 만들기

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

• type=“file” : 파일 선택자 예외적으로 값을 선택할 때에 value 가 아닌 .files[0] 로써 선택해야 한다.
• input checkbox

<input type="checkbox" name="c1" checked>1
<input type="checkbox" name="c1">2
<input type="checkbox" name="c1">3
<input type="checkbox" name="c1">4
<input type="checkbox" name="c1">5

여러개를 선택할 수 있는 네모 체크바, 이름은 태그 이후, name 이 같아야 동기화 됨

• input radio

<input type="radio" name="r1" checked>1
<input type="radio" name="r1">2
<input type="radio" name="r1">4
<input type="radio" name="r1">5
<input type="radio" name="r1">5

하나만 선택할 수 있는 원형 체크바, 이름은 태그 이후, name 이 같아야 동기화 됨

• input list

<input list="a">
<datalist id="a">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</datalist>

*타입이 아닌 list 이고 datalist id 와 동기화 시켜야 함 리스트 안은 option 태그 만들고 선택항목은 value 값으로 지정한다

• select

<select name="region">
<optgroup label="수도권">
<option>1</option>
<option>2</option>
<option selected>3</option>
</optgroup>
</select>

이건 아예 인풋도 아니고 select 태그이다 선택항목은 옵션항목 사이 평문으로 넣는다 optgroup 태그로 option 항목들 넣을 수 있고 label 값 넣어 대표명 지정 안에 옵션값으로 선택지를 만들고 해당 선택지를 선택하면 select 의 value 가 변하는 형식이기 때문에 각각 option 항목을 forEach 시킬 필요 없다.
: 글자 적을 수 있는 창 만듦 : input 타입 이미지 창, 클릭 가능 잘 안씀 : submit 저장 : submit 취소

method 값 받기는 주소값 뒤로 받게 된다???????