< form > = 폼 만들기(폼을 만드는 가장 기본적인 태그 form 태그 사이에 여러 폼 요소와 관련된 태그를 넣는다)
<--기본형-->
<form [속성="속성 값"]> 여러 폼 요소 </form>
autocomplete = 자동 완성 기능(기본값 on)
<--속성 off로 지정해 끄는 방법-->
<form action="register.php" autocomp="off">
...
</form>
< label > = 폼 요소에 레이블 붙이기(레이블이란 입력 창 옆에 아이디 나 비밀번호 처럼 붙여 놓은 텍스트)
<--기본형-->
<label [속성="속성 값"] > 레이블 <input ....> </label>
또는
<label for="id이름"> 레이블 </label>
<input id="id이름" [속성="속성 값"]>
< fieldset >, < legend > = 폼 요소 그룹으로 묶기(하나의 폼 안에서 여러 구역을 나누어 표시하려고 할 때 사용, fieldset = 외곽선, legend = 제목을 붙여줌)
<--기본형-->
<fieldset [속성="속성 값"]> ... </fieldset>
< input > = 입력 항목 만들기(한 줄짜리 텍스트나 비밀번호 같은 부분)
<--기본형-->
<input type="유형" [속성="속성 값"]>
<--기본형-->
<input type="hidden" name="이름" value="서버로 넘길 값">
<--기본형-->
<input type="text" [속성="속성 값"]>
text에서 사용할 수 있는 속성
name(텍스트 필드를 구별할 수 있도록 이름을 붙인다),
size(텍스트 필드의 길이를 지정),
value(텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 표시될 내용),
maxlength(입력 최대 문자 개수 지정)
<--기본형-->
<input type="password" [속성="속성 값"]>
"search","url","email","tel" = 분화된 텍스트 필드
"number" = 숫자 입력하기
"range" = 슬라이스 막대로 숫자 지정하기
<--기본형-->
<input type="number" [속성="속성 값"]>
<input type="range" [속성="속성 값"]>
사용할 수 있는 속성
min(최솟값, 기본값 1),
max(최댓값, 기본값 100),
step(짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정,기본값 1,생략가능).
value(필드에 표시할 초기값)
<--기본형-->
<input type="radio" [속성="속성 값"]>
<input type="checkbox" [속성="속성 값"]>
사용할 수 있는 속성
name(서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정),
value(선택한 라디오 버튼이나 체크박스를 서버로 알려줄 때 넘길 값 지정,영문이나 숫자 이여야 하며 필수 속성),
checked(기본으로 선택해 놓을 항목이 있다면 사용).
<--기본형-->
<input type="color" [value="기본 색" [속성="속성 값"]>
<--기본형-->
<input type="date(날짜) | month(월,연도) | week(주,연도)" [value="기본 값" [속성="속성 값"]>
<--기본형-->
<input type="time | datetime | datetime-local" [value="기본 값" [속성="속성 값"]>
공통으로 사용하는 속성
min, max, stop(스핀박스의 화살표를 누를 때마다 얼마나 조절할지를 지정),
value(화면에 표시할 초기값을 지정)
time = 00:00 ~ 23:59, 나머지는 날짜 다음 T를 쓰고 24시간제로 시간을 지정
<--기본형-->
<input type="submit | reset" [value="버튼 내용" [속성="속성 값"]>
<--기본형-->
<input type="image" src="경로" a|t="대체텍스트" [속성="속성 값"]>
<--기본형-->
<input type="button" [value="버튼 내용"] [속성="속성 값"]>
<--기본형-->페
autofocus = 입력 커서 표시하기(페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스커서를 표시할 수 있다)
placeholder = 힌트 표시하기(사용자가 텍스트를 입력할 때 도움이 되도록 입력란에는 적당한 힌트를 표시하고 있다가 클릭하면 내용이 사라지도록 만들 수 있다)
readonly = 읽기 전용 필드 만들기(사용자에게 내용을 보여 주기만 하고 입력은 할 수 없다, true 나 false 중 하나만 사용한다)
required = 필수 필드 지정하기(필드를 비워 놓고 버튼을 눌러 전송할 경우 오류메세지를 표시한다)
< select >, < optgroup >, < option > = 드롭다운 목록 만들기(클릭했을 때 옵션들이 요소 아래쪽으로 펼처진다, select = 드롭다운 시작과 끝 표시, option = 원하는 항목들 추가, optgroup = 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 사용)
<--기본형-->
<select 속성="속성 값">
<option vlaue="값" [속성="속성 값"]> 내용1 </option>
<option vlaue="값" [속성="속성 값"]> 내용2 </option>
<option vlaue="값" [속성="속성 값"]> 내용3 </option>
</select>
select 속성
= size(지정한 개수보다 하나 더 많은 옵션이 표시됨)
multiple(ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다)
option 속성
= vlaue(서버로 넘겨질 값을 지정)
selected(화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정)
< textarea > = 여러 줄 입력하는 텍스트 영역 만들기(폼에서 텍스트나 항목을 선택하는 것이 아니라 직접 여러줄의 텍스트를 입력하는 영역을 만든다)
<--기본형-->
<textarea [속성="속성 값"]>내용</textarea>
속성
= name, colsm rows
< button > = 버튼 넣기(input 태그로 삽입했던 것과 비슷하지만 button 태그를 이용해도 폼을 전송하거나 리셋 할 수 있다)
<--기본형-->
<button [type = "submit", "reset", "button"]> 내용 </button>
submit = 서버로 전송
reset = 입력한 모든 내용 초기화
button = 버튼 형태만 만들 뿐 자체 기능은 없음
< output > = 계산 결과(일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹브라으저가 정확히 인식할 수 있다)
< progress > = 진행 상태 보여주기(작업 진행 상태를 나타낼 때 사용한다, 얼마나 진척되었는지 숫자로 표한한다)
<--기본형-->
<progress value="값" [max="값"]></progress>
< meter > = 값이 차지하는 크기 표시(progress 태그를 사용했을 때과 화면이 거의 같기 때문에 혼동되기도 하지만 meter 태그는 전체 크기 중에서 얼마나 치지하는지를 표현할 때 사용(사용량,투표율))
<--기본형-->
<meter value="값" [속성="속성 값"]></meter>
속성
= min,max, value, low, high, optimum