08. HTML / 요소 - 양식

양식

 

      form 태그 ( 웹 서버에 정보를 제출하기 위한 양식 범위를 정의 )

  

 

 

   -form태그 예시

name을 설정해줘야 form태그에서 login으로 넘어갈 때 이메일과 비밀번호 정보가 넘어 갈수 있다. ( method속성의 GET 방식 주소부분에 정보가 노출 ) (POST 노출 X -> 그러나 찾을려면 찾을 수 있음 일반적으로 POST 많이 사용)

 

 

 

 

 

input 태그 ( 사용자의 입력 받을 데이터 양식 )

form 속성은 input태그가 form태그의 외부에 있을 때 form태그의 아이디를 사용하여 연결이 가능하다.

 

type은 필수 -> 많은 타입이 있다. type의 image 는 이미지 뿐만 아니라 이미지버튼의 기능도 수행이 가능하다.

 

 

radio 타입

name을 동일하게 한 이유는 3개의 radio 버튼중 1개만 선택이 되게끔 하기 위해서.

 

 

 

label 태그 ( 라벨 가능 요소의 제목 ) 

    

첫번째 라벨 기능은 for 속성이 없으면 텍스트를 클릭해도 체크가 안된다.

 

텍스트를 클릭하여도 체크박스가 체크가 된다.

 

 

 

button 태그 ( 선택 가능한 버튼을 지정 )

    - input과 다르게 좀더 특화된 버튼 

button 타입은 일반적으로 안씀

 

 

textarea 태그 ( 여러 줄의 일반 텍스트 양식 (한줄은 input 태그 ) )

    속성은 input 태그와 비슷 다른 속성은 rows 라는 속성인데 화면에 보이는 양식의 줄 수를 설정 할 수 있다.

 

 

 

fieldset, legend 태그 ( 같은 목적의 양식을 그룹화(fieldset) 하여 제목(legend)을 지정

 

select, datalist, optgroup, option 태그 

 

            -select 태그 ( 옵션(안에 option태그)을 선택하는 메뉴 ) 

       optgroup 태그로 래핑하기 

 

 

     -datalist 태그 ( <input> 에 미리 정의된 옵션을 지정하여 자동완성 기능을 제공하는 데 사용 )