HTML&CSS - 3

• form 태그
  -> 사용자에게 입력받은 정보를 제출하기 위한 구획

• method 속성
  -> 양식을 제출할 때 사용할 HTTP 메서드

• POST
  -> 양식 데이터를 요청 본문으로 전송
  -> 브라우저에 의해 캐시되지 않고 히스토리에도 남지 않는다.
  -> 데이터 길이 제한 없음.
  -> method의 특성이 POST인 경우 enctype은 양식 제출 시 데이터의 MIME 유형을 나타낸다.
  MIME 타입
클라이언트에 전송된 문서의 다양성을 알려주기 위한 메커니즘
브라우저들은 리소스를 내려받았을 때 해야할 기본동작이 무엇인지 결정하기 위해 사용

• GET
  -> 양식데이터를 action URL 과 ?구분자 뒤에 이어붙여서 전송
  -> GET방식의 HTTP 요청은 브라우저에 의해 캐시되어 저장
  -> 길이에 제한이 있다.
  -> 보안상 취약점이 존재함. 중요한 데이터는 POST 방식 쓸 것.

• name/value
  -> 이름/값의 짝으로 양식과 함께 전송된다.

• action 속성
  -> 양식 데이터를 처리할 URL을 적는다. 즉, 데이터를 어디로 보낼 것이냐.

• autocomplete 속성
  -> 입력요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냄
  -> off(자동입력 X) / on(자동입력 O)-기본값

• label
  -> 사용자 인터페이스의 항목을 나타낸다.
  -> input 과 함께 사용!!(중요!!)

1. for 과 id 를 이용하여 연결

<label for="user-id">아이디</label>
<input id="user-id"> type="text">

2. label 내 input 중첩

<label>
	아이디
  	<input type="text">
</label>

• button
  -> 사용자가 클릭할 수 있는 요소

1. button: 기본 행동이 없다. 클릭해도 아무일이 일어나지 않는다. JavaScript와 연결하여 사용
2. submit: 서버로 양식 데이터를 제출한다.
3. reset: 초기값으로 되돌린다.

• input
  -> 공통속성
  type, name, value, autocomplete, placeholder

두가지 방법이 가능.

1. <input type="button" value="버튼"> / <button type="button">버튼</button>
2. <input type="reset" value="초기화"> / <button type="reset">초기화</button>
3. <input type="submit" value="전송"> / <button type="submit">전송</button>

첫번째 input을 사용할 경우 value 값에 텍스트값밖오 오지 못한다. 하지만 button 태그를 사용할 경우 여러 컨텐츠 삽입이 가능하다.

• text/password/url/search/tel
  -> maxlength : 문자수 최대 길이
  -> minlength : 문자수 최소 길이

• checkbox
  -> 여러개 값을 선택하거나 선택 해제할 수 있는 체크박스

<input type="checkbox" name="html" id="html">
<label for="html">HTML</label>

• radio
  -> 같은 name을 가진 여러 값 중에 하나의 값만을 선택

<input type="radio" name="gender" value="male" id="male">
<label for="male">남성</label>

• number
  -> max : 최대값
  -> min : 최소값
  -> step : 증가값

• fieldset & legend
  -> form 관련요소 들을 묶을 때 사용
  -> legend는 그룹의 이름을 제공한다.