html <form>, <input>, <label>

1. <form>태그

태그는 웹 페이지에서의 입력 양식을 의미.
로그인 창이나, 회원가입 폼 등이 이에 해당.

- method

get : 서버의 자원의 조회

쿼리스트링(query string)
쿼리스트링은 "?"로 시작된다.

post : 작성, 데이터의 추가, 변경

- name

자바스크립트에서 name값을 가지고 접근이 가능

<form name="frm" method="post" action="ex02.html">

- action

양식 제출 경로

<form method="post" action="경로">

- target

_self : 현재 창(기본값)
_blank : 새창
_parnet : 부모창
_top : 가장 상위 창
iframe : name 속성

- autocomplete

자동완성기능, 기본값 : on

---

2. <input>태그

사용자가 입력할 부분은 주로 <input> 태그를 이용한다.

1. type : 입력받는 다양한 형태를 결정

• hidden : 내부에서만 사용하는 값 서버로 전송
• text : 한줄텍스트 입력
• search
• tel
• url
• eamil : 이메일 전용, 양식 제출시 이메일 형식 체크
• datetime : 날짜와 시간 - UTC
• datetile-local : 날짜와 시간 - 현재 지역의 시간 기준
• date : 날짜(달력이 팝업 노출)
• month :
• week :
• time :
• number : 숫자로 입력을 제한(max,min으로 최소최대 설정)
• range : 범위를 지정(max,min으로 최소최대 설정)
• color : 색상(색상표 팝업 노출)
• checkbox : 체크박스(여러개 중에서 1개 이상 선택)
• radio : 라디오버튼(name 속성이 같은 여러개 중에서 1개 선택)
• file : 파일 선택 버튼(파일탐색기 팝업 노출)(multiple 파일여러개)
• submit : 양식제출버튼
• image : 이미지 형태 제출버튼, src="이미지경로"
• reset : 다시입력버튼
• button : 버튼
  

2. value : <input> 태그의 초깃값을 명시

<input type="submit" value="가입하기">
<input type="reset" value="다시입력">

체크박스나 라디오버튼은 반드시 value값을 지정해야 데이터가 전송된다.

<input type="radio" name="grade" id="grade1" value="1">

3. name : 입력항목

<input type = "text" name="userId">

name이 있어야 데이터가 전송된다

4. 그 외 속성

• autofocus : 자동커서
• placeholder : 값이 없을 때 안내문구
• readonly : 읽기전용(변경불가), 데이터전송 O
• disabled : 비활성화, 데이터전송 X
• required : 필수항복(값이 없으면 제출시 검증)
• checked : radio, checkbox 체크된 상태
• step : setp 1 : 1씩변경
• size : 칸의 갯수
• minlength, maxlength : 최소 최대 글자수

---

3. <button>태그

type : 입력받는 다양한 형태를 결정

`submit` : 제출 버튼(기본값)
`reset` : 다시입력
`button` : 일반버튼

<button type ="reset">다시입력</button>

---

4. <label>태그

<label> 태그를 라디오, 체크박스에 감싸면 - 텍스트만 클릭해도 체크가된다.

<label><input type = "checkbox">취미1</label>

라디오 체크박스의 id속성 값 -> 라벨 태그의 for속성과 동일하게 연결

<input type="radio" name="grade" id="grade1">
<label for = "grade1">1학년</label>

5. <fieldset>, <legend>태그

6. 여러 데이터 나열 태그

(1) <select> 태그

<option value="항복1">항목1</option>
<option value="항복2">항목2</option>
<option value="항복3">항목3</option>

• selected : 초기값
• multiple : 여러개선택
• size : 갯수 만큼 여러개 보이기

(2) <optgroup> 태그

<optgroup label="공과대학">
	<option value="컴퓨터공학">컴퓨터공학</option>
  	<option value="기계공학과">기계공학과</option>
</optgroup>

(3) <datalist>, <optionm> 태그

<datalist id="datalist 아이디값">
  <option value="항목1" label="항목1명칭"></option>
   <option value="항목2" label="항목2명칭"></option>
   <option value="항목3" label="항목3명칭"></option>
</datalist>
<input type="text" list="datalist 아이디값">

(4) <textarea>

여러줄 텍스트 입력

<textarea name="introduce" clos="20" rows="20"></textarea>

기타 다양한 폼 요소들

(1) <output> 태그

결과값

(2) <progrss> <meter> 태그

진행상태

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

그