form 태그

서버, 클라이언트

• 서버는 정보를 제공하는 쪽
• 클라이언트는 정보를 제공 받는 쪽
• 웹 브라우저 주소창에 http://www.naver.com을 입력하면,
  웹 브라우저는 www.naver.com에 해당하는 컨텐츠를 웹서버에 요청

폼(form)

• 사용자의 데이터를 서버에 전송하는 방법
• 사용
  • 로그인 → ID & Password를 입력
  • 회원가입 → 개인정보 입력
  • 블로그 or 게시판 글 작성시/파일 전송시

<form [속성="속성값"]> 내부 폼 요소</form>

폼 태그 속성

• get
  • 데이터를 256 ~ 4096 byte까지 서버로 넘길 수 있음
  • 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있음
• post
  • 입력한 내용의 길이에 제한받지 않고 사용자가 입력한 내용도 드러나지 않음
• name
  • 폼 제어시 폼 이름 지정
• action
  • 폼 태그 내의 내용 처리해 줄 서버 프로그램 지정
  • ex)  → 서버로 전송 시 서버에 있는 register.php를 실행
• target
  • action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함
• autocomplete : 자동완성 기능
  • on(default) / off
  • ex) <form action=”” autocomplete=”off”>

내부 폼 요소

• input
  • 회원가입/로그인 화면에서 입력 하는 부분에 사용
  • type 속성
    • text, password, emal, checkbox, radio, button 등
    • id/password
      • size : 텍스트, 비밀번호 필드의 길이 지정
        최대 입력 글자 수 10개지만 size=5 지정 시,
        필드 크기는 5개로 맞춰지며 5개의 글자는 보이지 않음
      • value : 텍스트 필드 부분에 보여지는 내용(defalut “”)
        비밀번호 필드에는 사용하지 않음
      • maxLength : 텍스트 필드 내 작성할 수 있는 최대 문자 길이
    • checkbox/radio
      • 속성 : value, checked
      • 라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name값을 동일하게 설정해야 함
    • button
      • button 태그와는 다르게 아이콘을 추가할 수없고 CSS를 꾸밀 수 없음
      • form 태그 내부에서 일반 버튼 만들 때 사용
        • <input type=”button” value=”버튼” />
  • 그외 속성
    • autofocus
      • 페이지를 불러오자마자 원하는 요소에 마우스 포인터를 표시할 수 있음
    • placeholder
      • 힌트 표시
    • readonly
      • 읽기 전용
    • required
      • 필수 입력 필드 지정
• button
  • 버튼 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할 지를 지정
  • input type=”button” 과의 차이점
    • contents를 포함할 수있기 때문에 아이콘 추가 O 및 CSS 꾸미기 O
  • form 태그 내부에 button 태그를 만들 경우 자동적으로 type은 submit 이 된다.
  • type
    • submit(default)
      • ex)폼에 입력한 정보를 서버에 전송 시 이용
      • action 속성에서 지정한 폼 처리 프로그램에 넘겨짐
    • reset
      • 입력된 모든 정보를 재설정해 사용자가 입력한 내용을 모두 지울 때 이용
      • ex)취소하기 버튼 시 이용
• textarea
  • 여러줄 입력하는 영역 생성
  • 속성
    • cols
      • 텍스트 영역의 가로 너비를 문자 단위로 지정
      • ex) cols=”40”
    • rows
      • ~ 세로 너비를 문자 단위로 지정
      • ex) rows=”4”
• select - option
  • 드롭다운 목록 생성
  • 속성
    • select : 첫 번째 항목이 기본적으로 목록에 보이도록 설정
    • value : 서버로 넘겨줄 값 지정

    <select>
      <option value="값1">내용1</option>
      <option value="값2">내용2</option>
      ...
    </select>

• datalist - option
  • 데이터 목록 생성(드롭다운과 유사)
  • 텍스트 필드에 값을 직접 입력하지 않고 미리 만들어 놓은 값들 중 선택 가능

<input type="text" list="데이터 목록 id"> 
<datalist id = "데이터 목록 id"> 
  <option value="서버로 넘길 값1">선택 옵션1</option> 
  <option value="서버로 넘길 값2">선택 옵션1</option> 
  ... 
</datalist>