(Do it! HTML5 + CSS3) 04. 폼 관련 태그들

04-1 폼 만들기

1.<form>태그: 폼 만들기

1)form 태그의 속성

<form>태그를 이용해 폼이 들어갈 부분을 만들었다면 태그 사이에 여러 폼 태그들을 삽입하면서 원하는 폼 형태를 만들 수 있다.

2) autocomplete 속성: 자동 완성 기능

검색창이나 로그인 창에 내용을 입력할 때 이전에 입력했던 내용이 아래에 표시되는 것을 '자동 완성 기능'이라고 한다.
기본 값은 "on"이다.

2.<label>태그: 폼 요소에 레이블 붙이기

폼 요소에 레이블을 붙이기 위한 것이다.
레이블이란 입력 창 옆에 '아이디'나 '비밀번호'처럼 붙여 놓은 텍스트를 말한다.
<label>태그를 사용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있다.

기본형)
<label>레이블 <input ...> </label>

<label for="id이름">레이블</label>
<input id="id이름">

<label>태그를 이용해 라디오 버튼이나 체크박스에 텍스트를 연결해 놓았따면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 사용이 쉬워진다.

ex)

<ul>
  <li>
    <label><input type="radio" name="subject" value="eng">영어회화</label>
    </li>
      <li>
    <label><input type="radio" name="subject" value="ch">중국어회화</label>
    </li>
      <li>
    <label><input type="radio" name="subject" value="jp">일어회화</label>
    </li>
</ul>

3.<fieldset>, <legend>태그: 폼 요소 그룹으로 묶기

하나의 폼 안에서 여러 구역을 나누어 표시하려고 할때 사용한다.
<fieldset>태그는 폼들을 하나의 영역으로 묶고 외곽선을 그려주고 <legend>태그는 묶은 그룹에 제목을 붙여 준다.

ex)

<form>
  <fieldset>
    <legend>개인 정보</legend>
    <ul>
      <li>
        <lavel for="name">이름</label>
        <input type="text" id="name">
      </li>
      <li>
        <label for="mail">메일 주소</label>
        <input type="text" id="mail">
     </li>
     </ul>
  </fieldset>
</form>

04-2 사용자 입력을 위한 <input> 태그

1.<input>태그 살펴보기
폼에서 사용자 입력을 받기 위해 사용하는 태그이다.

2.<input>태그: 입력 항목 만들기
웹에서 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있다.
사용자가 내용으 ㄹ입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 <input>태그이다.

ex)<input type="text" id="user-name" size="10">

1)<input>태그의 type 속성에서 사용 가능한 유형

유형	설명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.
search	검색 상자를 넣습니다.
tel	전화번호 입력 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	메일 주소를 입력할 수 있는 필드를 넣습니다.
password	비밀번호를 입력할 수 있는 필드를 넣습니다.
datetime	국제 표준시 (UTC)로 설정된 날짜와 시간(연, 우월, 일, 시, 분, 초, 분할 초)를 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
date	사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다.
month	사용자 지역을 기준으로 날짜(연, 월)를 넣습니다.
week	사용자 지역을 기준으로 날짜(연, 주)를 넣습니다.
time	사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣습니다.
number	숫자를 조절할 수 있는 화살표를 넣습니다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.
color	색상 표를 넣습니다.
checkbox	주어진 항목에서 2개 이상 선택이 가능한 체크박스를 넣습니다.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
file	파일을 첨부할 수 있는 버튼을 넣습니다.
submit	서버 전송 버튼을 넣습니다.
image	submit 버튼을 대신 사용할 이미지를 넣습니다.
reset	리셋 버튼을 넣습니다.
button	버튼을 넣습니다.

04-3 <input> 태그의 다양한 속성

1. autofocus 속성- 입력 커서 표시하기
   페이지를 불러오자마자 폼의 요소 중에서 원하는 요소에 마우스 커서를 표시할 수 있다.

2. placeholder 속성- 힌트 표시하기

3. readonly 속성- 읽기 전용 필드 만들기
   사용자가 입력하지 못하고 읽게만 만들 수도 있다.

4. reauired 속성- 필수 필드 지정하기
   필수적으로 입력해야 하는 내용에는 required 속성을 지정해 필수 필드로 만들 수 있다.

5. min, max, step 속성
   min max 속성은 각각 해당 필드의 최솟값과 최댓값을 지정한다.
   step 속성은 허용된 범위 내의 숫자의 일정한 간격을 가리킨다.

6. size, minlength, maxlength 속성- 길이, 최소 길이, 최대 길이 속성
   텍스트 길이도 조건으로 만들 수 있다.
   size 속성은 한 줄 짜리 텍스트와 관련된 필드에서 화면에 몇 글자까지 보이게 할지 지정하고,
   maxlength 속성은 사용자가 최대 몇 글자까지 입력할 수 있는지 지정한다.
   minlength 속성은 최소 몇 글자 이상을 입력해야 하는지 지정한다. 아직까지 minlength 속성은 최신 크롬 브라우저와 안드로이드 브라우저에서만 지원된다.

04-4 여러 데이터 나열해 보여주기

1. <select>, <optgroup>, <option> 태그- 드롭다운 목록 만들기
   사용자가 내용을 입력하는 것이 아니라 여러 옶견 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다.

1-1. <select> 태그의 속성

select 태그의 속성	설명
size	화면에 표시될 드롭다운 메뉴의 항목 개수를 지정한다. (크롬 브라우저의 경우, size에서 지정한 개수보다 하나 더 많은 옵션이 표시된다.)
multiple	브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl 키를 누른 상태로 드롭다운 메뉴에 있는 여러 항목을 선택할 수 있다.

1-2. <option> 태그의 속성

속성	설명
value	옵션을 선택했을 때 서버로 넘겨질 값을 지정한다.
selected	화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정한다.

<label class="reg" for="class">학과</label>
<select size="5" id="class" multiple>
    <option value="archi">건축공학과</option>
    <option value="mechanic">기계공학과</option>
    <option value="indust">산업공학과</option>
</select>

1-3. <optgroup> 태그- 옵션끼리 묶기
드롭다운 목록에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우 사용한다. <optgroup>태그를 사용할 때는 label 속성을 사용해 그룹의 제목을 붙인다.

<label class="reg" for="class">학과</label>
<select id="class">
	<optgroup label="공과대학">
    		<option value="archi">건축공학과</option>
        	<option value="mechanic">기계공학</option>
       		<option value="indust">산업공학과</option>
   	</optgroup>
       <optgroup label="인문대학">
     		<option value="history">사학과</option>
        	<option value="lang">어문학부</option>
   	</optgroup>
</select>

1-4. <datalist>태그, <option>태그
앞에서 배운 드롭다운 목록에서 <select> 태그 대신 <datalist> 태그를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있다. 즉 텍스트 필드에 직접 값을 입력하는 것이 아니라 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 입력되는 것이다.

속성	설명
value	사용자가 레이블을 선택했을 때 서버로 넘겨질 값을 지정한다.
label	사용자를 위해 브라우저에 표시할 레이블이다. 따로 지정하지 않을 경우, value 값을 레이블로 사용한다.

<input type="text" id="interest" list="choices">
<datalist id="choices">
	<option value="grammer" label="문법"></option>
        <option value="voca" label="어휘"></option>
        <option value="speaking label="회화"></option>
</datalist>

2. <textarea> 태그- 여러 줄 입력하는 텍스트 영역 만들기
   한 줄 이상의 문장을 입력할 때 사용하는 폼이다.

속성	설명
name	다른 폼 요소와 구분하기 위해 텍스트 영역의 이름을 지정한다.
cols	텍스트 영역의 가로 너비를 문자 단위로 지정한다.
rows	텍스트 영역의 세로 길이를 줄 단위로 지정한다. 지정한 숫자보다 줄 개수가 많아지면 스크롤 막대가 생긴다.

<textarea name="intro" cols="60" rows="5">
어쩌구 
저쩌구
</textarea>

04-5 기타 다양한 폼 요소들

1. <button> 태그- 버튼 넣기

속성 값	설명
submit	폼을 서버로 전송합니다. <button type="submit">전송하기</button>
reset	폼에 입력한 모든 내용을 초기화시킨다.<button type="reset">다시쓰기</button>
button	버튼 형태만 만들 뿐 자체 기능은 없다.

2. <output> 태그- 계산 결과
   입력하는 값이 계산 결과라는 것을 브라우저에게 알려준다.
   태그로 묶인 부분이 일반 텍스트가 아니라 계산의 겨로가 값이라는 점을 웹 브라우저가 정확히 인식 할 수 있다.

3. <progress>태그- 진행 상태 보여주기
   작업 진행 상태를 나타낼 때 사용하는 태그이다.

속성	설명
value	작업 진행 상태를 나타내며 부동 소수점으로 표현 한다. 이 값은 0보다 크거나 같고 max 값보다 작거나 같아야 한다. 만약 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야한다.
max	작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소수점으로 표현한다. 이 값은 0보다 커야 한다.

4. <meter> 태그- 값이 차지하는 크기 표시하기
   <progress>태그를 사용했을 때오 결과 화면이 거의 같기 때문에 혼동되기도 한다. 하지만 진행 상황을 나타내는 <progress> 태그와 달리 <meter> 태그는 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다.
   작업이 진행된다는 의미보다 하드 디스크 전체 용량 중 현재 얼마나 사용하고 있는지를 나타내는 사용량 처럼 지정된 범위 내에서 해당 값이 어느 정도 차지하고 있는지를 표현한다.

속성	설명
min,max	범위의 최솟값과 최댓값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다.
value	범위 내에서 차지하는 값을 나타낸다.
low	"이 정도면 낮다"라고 할 정도의 값을 지정한다.
high	"이 정도면 높다"라고 할 정도의 값을 지정한다.
optimum	"이 정도면 적당하다"라고 할 정도의 범위를 지정한다.