[HTML] 양식
<form> 입력받은 정보를 웹 서버로 제출
속성 action : 전송받은 정보를 처리할 URL
속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능)
속성 method : 서버로 전송할 HTTP 방식 ex)GET(default)/POST
속성 novalidate : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용)
ex) 이메일의 경우 @ . 이 들어가는 양식인지 검사함
속성 name : 브라우저가 인식할 form 이름
속성 target : 서버로부터 응답받을 방식 지정(현재 탭/새로운 탭)
<input/> 사용자에게 입력받을 양식
속성 autofocus : 페이지가 로드되자마자 자동포커스
속성 autocomplete : 이전에 입력된 값으로 자동처리 할지 여부(자동완성기능)
속성 checked : 서버로 전송할 HTTP 방식 ex)GET(default)/POST
속성 disabled : input type form의 유효성검사를 하지 않는다. (특수 상황이나 test 할때 많이 사용)
속성 form : 브라우저가 인식할 입력값 이름. 없으면 인식못해서 전달 못함
속성 list : 참조할 <datalist>의 id 속성 값
속성 max,min : (type=number) 입력 수 제한
속성 maxlength : 입력 최대 글자수 제한
속성 multiple : (type=file,email) 여러 개 입력
속성 name :
속성 placeholder : 입력할 값을 명시해주는 역할. 포커스 되기 전 표시된다.
속성 readonly :
속성 step : (type=number,range) 몇 배씩 증가할지 정의
속성 src : (type=image) URL
속성 alt : (type=image) 대체 텍스트
속성 type : 데이터 종류
속성 value : 초기값 설정
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Elements</title>
</head>
<body>
<form action="/login" id="login-form" method="GET" autocomplete="off" novalidate target="_blank">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">로그인</button>
</form>
<input type="text" form="login-form" maxlength="6"><!--form id 지정하면 태그 밖이여도 연결가능-->
<form action="/login" method="GET">
<input type="email" name="id"><!--name이 있어야 넘겨줄수있음-->
<input type="password" name="pw">
<input type="submit" value="로그인"><!--서버에 제출시 사용하는 type. button 생성-->
<input type="reset" value="초기화"><!--from 태그 내의 값 초기화-->
</form>
<input type="text">
<input type="number" value="1234" readonly disabled><br>
<input type="number" placeholder="숫자를입력하세요!" max="8" min="4" step="2"><br>
<input type="checkbox" checked><br>
<input type="file" multiple><br>
<input type="radio" name="radio"><!--하나만 선택할 때-->
<input type="radio" name="radio" checked>
<input type="radio" name="radio">
<form action="/login" id="login-form">
<input type="image" src="images/heropy.png" alt="HEROPY"><!--이미지도 제출가능-->
</form>
</body>
</html>
<label> 라벨가능 요소 캡션.
라벨가능요소 : button, input, progress, select, textarea
속성 for :참조할 라벨 가능 요소의 id 값
ex) checkbox id값을 참조한 label 캡션으로 만든 텍스트를 눌러도 checkbox가 체크되거나,
search 를 감싼 label 캡션을 누르면 검색창에 포커스가 되는 등.
<!--라벨 가능 요소를 참조-->
<input type="checkbox" id="user-agreement">
<label for="user-agreement">동의하십니까?</label>
<!--라벨 가능 요소를 포함-->
<label><input type="checkbox">동의하십니까?</label>
<button> 버튼 생성
속성 autofocus : 자동 포커스
속성 disabled : 비활성화
속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)
속성 name : 버튼 이름
속성 type : 버튼 타입 (button, reset, submit)
<textarea> '여러 줄' 일반 텍스트
속성 autocomplete : 자동완성기능(기본값 on)
속성 autofocus : 자동 포커스
속성 disabled : 비활성화
속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)
속성 maxlength : 입력 가능한 최대문자 수
속성 name : 버튼 이름
속성 placeholder : 입력할 값 안내
속성 readonly : 읽기전용
속성 rows : 줄 수(기본값 2)
<input type="submit" value="제출">
<button type="submit">제출</button>
<button onclick="doit()">클릭하세요!</button>
<script>
function doit(){
alert('클릭했습니다!');
}
</script>
<textarea rows="6" placeholder="설명을 입력하세요!"></textarea>
<filedset> 같은 목적의 양식을 그룹화
속성 disabled : 그룹 내 모든 요소 비활성화
속성 form : 그룹이 속하는 하나 이상의 <form>의 id 값
속성 name : 그룹이름
<legend> filedset으로 그룹화 한 양식들의 제목 지정
예제
<select> option의 선택 메뉴 제공
속성 autocomplete : 자동완성기능(기본값 on)
속성 disabled : 비활성화
속성 form : <form>의 id 값(form태그 외부에서도 사용할 수 있게)
속성 multiple : 다중선택 여부
속성 name : 메뉴 이름
속성 size : 한번에 볼 수 있는 행 개수
<optgroup> option을 그룹화
속성 label : 옵션그룹 이름
속성 disabled : 옵션 그룹 비활성화
<option> 선택목록
속성 label : 옵션 제목 표시
속성 disabled : 옵션 비활성화
속성 selected : 옵션이 선택되었음을 표시
속성 value : 값
* 생략되면 포함된 텍스트로 대체 ex) <option>텍스트</option>
*빈 태그 형식으로 사용 시 label과 value 값 필수
<select name="fruits">
<optgroup label="내가 좋아하는 과일">
<option label="Apple" value="Apple"></option>
<option>Orange</option>
<option>Banana</option>
</optgroup>
<optgroup label="내가 싫어하는 과일">
<option selected>Mongo</option>
<option>Fineapple</option>
</optgroup>
</select>
<datalist> input에 option의 자동완성기능 제공.
input의 list값--datalist의 id값 연결
<input type="text" list="email">
<datalist id="email">
<option>naver.com</option>
<option>daum.com</option>
<option>nate.com</option>
</datalist>
<progress> 작업 진행률 표시
속성 max : 작업 총량
속성 value : 작업 진행량 (값이 가변하므로 JS 많이 사용한다고 함)
↓
<progress value="0" max="100"></progress>
<script>
const progress = document.querySelector('progress');
const interval = setInterval(function(){
progress.value += 10;
if(progress.value >= 100) clearInterval(interval);
},1000)
</script>