Form

○ Form

 ▷유저로부터 정보를 수집하는 용도의 일종의 설문지. 서버와 클라이언트간의 커뮤니케이션이 가능

 ▶속성(attribute)

  ▷method : 처리 방식 

   ▷get : 사용자의 입력 데이트를 url에 표시하며, 에티어 크기에 제한이 있고 쿼리 형식임

   ▷post : 데이터 크기의 제한이 없어 많은 양의 데이터를 전달 할 수 있음

  ▷action : 데이터를 넘길 위치

 

 ▷label (<label> ~ </label>)

  ▷Form의 양식에 이름을 붙인다.

  ▶속성(attribute)

   ▷for : 여기의 id와 같은 input과 연결됨  

 

 ▷input (<input>)

  ▷사용자로부터 데이터를 입력받는다. - form handler

  ▶속성(attribute)

   ▷name : 이름 (표시되진 않지만, 편의를 위함)

   ▷id : 고유 id

   ▷placeholder : 안내문 (입력하기전 투명한 회색으로 보이는 글자)

   ▷autofocus : 페이지에 들어올 시 자동으로 커서가 이쪽으로 이동됨.

   ▷required : 입력하지 않으면 제출할 수 없음.

   ▷pattern : 정규 표현식 지정, 지정한 표현식과 일치하지 않으면 제출할 수 없음. (date, email, password, search, tel, text, url)

 

   ▷type : 어떤 형식으로 데이터를 받을 것인지

    ▷"hidden" : 사용자에게 보이지않는 입력 필드. 변경해서는 안 되는 데이터를 함께 보낼 때 사용됨.

    ▷"text" : 텍스트 박스에서 텍스트를 입력받음. (size : 박스 크기, maxlength : 최대 텍스트 길이)

    ▷"submit" : 데이터 제출 버튼 (value : 버튼 이름)

    ▷"reset" : 데이터 리셋 버튼 (value : 버튼 이름)

    ▷"password" : 비밀번호, 입력시 *로 표시된다.

    ▷"checkbox" : 체크박스 (동시에 여러 개 선택가능)

    ▷"radio" : 라디오 버튼 (동시에 하나 선택가능) (checked : 기본적으로 체크되어있음)

    ▷"color" : 색 입력 (Format : #□□□□□□ - 16진수 6자리) 일부 브라우저에서는 색선택 창을 제공한다.

    ▷"email" : 이메일 입력 (Format : ~@~)

    ▷"tel" : 전화번호 입력

    ▷"number" : 수 입력. (min : 최소값, max : 최대값, step : 최소단위, value ; 기본값)

    ▷"range" : 범위 내 값을 선택하는 스크롤 바 (min : 최소값, max : 최대값, value : 기본값)

    ▷"search" : 쿼리에 들어갈 검색 필드 제공 (기능적으로는 text와 동일) (몇몇 브라우저는 필드를 지울 수 있는 x버튼을 제공)

    ▷"url" : URL (Uniform Resource Locator) 입력 (Format : http://www.[deitel].[com])

    ▷"date" : 날짜 입력 (Format : yyyy-mm-dd) (일부 브라우저는 입력창 지원)

    ▷"datetime" : 세계표준시 기준 날짜-시간 입력 (Format yyyy-mm-ddThh:mm:ss.ffTZD - 날짜 | PTDHMS - 기간)

    ▷"datetime-local" : 지역시 기준 날짜-시간 입력 (Format - 위와 같음, TZD부분이 바뀜?)

    ▷"month" : 달 입력 (Format : yyyy-mm)

    ▷"week" : 주 입력 (Format : yyyy-Wnn)

    ▷"time" : 시간 입력 (Format : hh:mm:ss.ff)

   

 ▷textarea(<textarea> ~ </textarea>)

  ▷여러 줄의 텍스트를 입력받을 수 있는 텍스트 박스

  ▶속성(attribute)

   ▷rows : 행, 초과시 스크롤바가 생김

   ▷cols : 열(글자수), 초과시 스크롤바가 생김

   

 ▷select(<select> ~ </select>)

  ▷여러 항목중 하나를 선택가능한 박스. (라디오와 유사)

  ▷option(<option> ~ <option>)

   ▷select의 선택가능한 옵션

 

※internal linking

 ▷a의 href에 #id(이동하고픈 element의 id)를 넣음으로써 id의 위치로 이동가능하다.