코딩교육 티씨피스쿨

**form : 사용자로부터 입력을 받아 서버로 전송하는 block태그

서버에 전송시 (name, value) ⇒ Key:Value**

<form action="서버주소" method="전송방식" id="">
	<!-- 사용자 입력부분 -->
</form>

1. form 속성

• action : form에서 입력받은 값을 전송할 서버주소 ⇒ URL pattern
• method : 전송방식
  • get : 기본 method. 주소에 데이터를 추가하여 전달(간단한 데이터) 생략가능. 제한적인 크기(사용자 정보가 표시 O). 검색엔진 쿼리에 사용 ⇒ doGet
  • post : 주로 사용하는 method. 데이터를 별도로 첨부하여 전달. 데이터 크기 제한X (사용자 정보가 표시 X). 보안성/활용성 좋음 ⇒ doPost
• name : form의 name ⇒ html5에선 권장하지 않음
• id : 선택자. form의 고유 id
• enctype ⇒ 저장, 전송될 파일의 인코딩 유형

2. 사용자 정보(input type)

• input 속성

  <input type="text" id="userid" name="서버전송 key" class="iclass" maxlength="10" size="10" placeholder="기본표시 텍스트">
  

  • type : input 타입 (필수)
  • ★★ name : 서버에 전송할 key(이름). 서버 전송시 key값이 됨 ⇒ 필수 !
  • id : 고유한 선택자
  • class : 다중선택자
  • size : 길이 ⇒ input 태그의 길이(width) 제한
  • max-length : 입력 글자수 제한
  • placeholder : 기본 표시될 텍스트 ⇒ 실제 입력시 사라짐

• ★type 속성 종류★

  • input type=”text” : 사용자가 직접 텍스트 입력 (입력값 == value)
  • input type=”password” : 비밀번호 등과 같은 **** 형태 입력 (입력값 == value)
  • input type=”file” : 사용자로부터 파일을 수신. accept 속성으로 확장자 선택 가능
  • input type=”radio” : 하나만 선택. 반드시 name이 같아야함(남여, 필수) ⇒ checked
  • input type=”checkbox” : 다중 선택. 반드시 name이 같아야함(취미, 전공) ⇒ checked
  • <select> : 하나만 선택. 콤보박스(드롭다운 리스트). <option>으로 항목 설정 ⇒ selected
  • input type=”reset” : form 입력값 초기화
  • input type=”button” : 이벤트(클릭)발생시, onclick속성으로 지정한 함수를 호출(call)
  • input type=”submit” : 클릭시 form에서 받은 입력값들을 action의 서버주소로 전송(제출)
  • <textarea> : 다중 텍스트(문장) 입력(메모, 자기소개)

3. label ⇒ input요소의 이름

• input 요소의 name과 연관성 있게 for를 이용하여 연결