양식 태그

# 양식태그

<form> { display: block; }
  웹 서버에 정보를 제출하기 위한 양식 범위를 정의
  * <form>이 다른 <form>을 자식 요소로 포함할 수 없음
  	속성 action - 값 : url
  	    autocomplete - 값 : on, off - 기본값 on
  	    method - 값: get, post - 기본값 get
  	    name - 고유한 양식의 이름
  	    novalidate - 서버로 전송시 양식 데이터의 유효성 검사x
  	    target - 서버로 전송 후 응답받을 방식을 지정 - 값 : _self, _blank - 기본값 _self
  
<input/> { display: inline-block; }
  사용자에게 입력 받을 데이터 양식
  	속성 - autocomplete - 값 : on/off - 기본값 on
  	      autofocus - 페이지가 로드 될 때 자동으로 포커스
	      checked - 양식이 선택되었음을 표시 - type 속성값이 radio나 checkbox일 경우
  	      disabled - 양식을 비활성화
  	      form - <form>의 id 속성값
  	      list - 참조할 <datalist>의 id 속성 값
  	      max - 값 : 숫자 - type 속성값 number일 경우만
  	      min - 값 : 숫자 - type 속성값 number일 경우만
  	      multiple - 둘 이상의 값을 입력할 수 있는지 여부 - type 속성값이 text,search,tel,url,email일 경우만
              name - 양식의 이름
  	      placeholder - 사용자가 입력할 값의 힌트 -type 속성값이 text,search,tel,url,email일 경우만
  	      readonly - 수정 불가한 읽기 전용
  	      step - 유효한 증감 숫자의 간격 - 값 : 숫자 - type 속성값이 number, range일 경우만
  	      src - 값 : url - type 속성값이 image일 경우만
  	      alt - 이미지의 대체 텍스트
  	      type - 입력 받을 데이터의 종류
  	      value 양식의 초기 값
  
<input type=""/>
  type 속성에 입력할 수 있는 값의 목록
  	속성 button
    	    checkbox
  	    color - ie지원불가
  	    email
  	    file
  	    hiddn - 보이진 않지만 전송할 양식 - value 속성으로 값을 지정
  	    image - <img/>처럼 사용
  	    number
  	    password - 가려지는 양식
  	    radio - 같은 name 속성 그룹내 하나만 선택 가능
  	    range - 범위컨트롤 - min, max, step, value(기본값) 속성 사용
  	    reset - 초기화
  	    search - 검섹
  	    submit - 제출 버튼 - 해당 <form> 범위 내 공유한 양식
  	    tel
  	    text
  	    url - 절대 url
  
<label> { display: inline; }
  라벨 가능 요소(labelable)의 제목(caption)
    * for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함
    * 라벨 가능 요소 : <button>, <input>, <progress>, <select>, <textarea>
    	속성 for - 참조할 라벨 가능 요소의 id 속성값

  
<botton> { display: block; }
  선택 가능한 버튼을 지정
  	속성 - autofocus 
  	      disabled - 버튼을 비활성화
  	      form - <form>의 id 속성값
  	      name
  	      type - 값 : button, reset, submit
  
<textarea> { display: inline-block; }
  여러 줄의 일반 텍스트 양식
  	속성 - autocomplete - 값 : on, off
  	      autofocus
  	      disable - 양식을 비활성화
  	      form - <form>의 id 속성값
  	      maxlength - 입력 가능한 최대 문자수 - 값: 숫자
  	      name 
 	      placeholder - 사용자가 입력할 값의 힌트
  	      readonly
  	      rows - 숫자 : 2
  
<fieldset>, <legend> { display: block; }
  같은 목적의 양식을 그룹화<fieldset>하여 제목<legend>을 지정
  <fideldset>
    속성 - disabled - 그룹 내 모든 양식 요소를 비활성화
    	  form - 그룹이 속할 하나 이상의 <form>dml id 속성값
    	  name
    
<select>, <datalist>, <optgroup>, <option>
  옵션(<option>, <optgroup>)의 선택 메뉴<select>나 자동완성<datalist>을 제공
  optgroup, option 
  
<select> { display: inline-block; }
  옵션을 선택하는 메뉴
  	속성 - autocomplete - 값 : on, off - 기본값 on
  	      disabled
  	      form
  	      multiple
  	      name
  	      size - 한번에 볼 수있는 행의 개수 - 값 : 숫자 - 기본값 0  
    
<datalist> { display: none; }
  <input>에 미리 정의된 옵션을 지정하여 자동완성(autocomplete)기능을 제공하는 데 사용
  	* <input>의 list 속성 바인딩
  	* <option>을 포함하여 정의 된 옵션을 지정
  
<optgroup> { display: block; }
  <option>을 그룹화
    속성 - label(필수) - 옵션 그룹의 이름
    	  disabled
    
<option> { display: block; }
  선택 메뉴<select>나 자동완성<datalist>에서 사용될 옵션
  * 선택적 빈태그로 사용 가능
  	속성 - disabled
  	      label - 생략되면 포함된 텍스트를 표시
  	      selected - 옵션이 선택되었음을 표시
  	      value - 양식으로 제출될 값 - 생략되면 포함된 텍스트를 값으로 사용
  
<progress> { display: inline-block; }
  작업의 완료 진행률을 표시
  	속성 - max - 작업의 총량 - 값 : 숫자
  	      value - 작업의 진행량 - 값 : 숫자 - max 속성을 생략할 경우 0~1 사이의 숫자