입력관련태그 (form, input)

form 태그

 

- 입력 양식을 작성하는 영역(공간)
 - 내부에 작성된 입력 값을 지정된 공간으로 제출하는 역할

속성
  1. action : 제출된 공간을 지정하는 속성(주소를 작성)
  2. method : 설정된 공간으로 데이터를 전달하는 방식
  3. name : 자바스크립트에서 사용. form의 이름을 지정하는 속성
  4. target : 제출된 페이지를 현재 또는 새 탭으로 열기 설정

 

 

input 태그

 

- 웹문서에서 사용자가 입력할 수 있는 형식을 제공해주는 태그
- 많은 type이 존재하고, input의 변형 형태도 다양하게 존재하고
- name 속성이 99% 이상 필수로 작성되어야 함. 그래야 추후 개발할 때 용이

        name ="변수명" => 추후 개발에서 필요한 변수명을 작성해준 후 기능 연결

- type 속성을 환경에 맞게 설정
- type의 종류
     1. text : 한 줄 텍스트 입력 상자(기본값)
     2. password : 비밀번호 입력상자(모자이크 처리)
     3. url : 주소 설정
     4. search : 검색 기능
     5. tel : telephone 전화번호
     6. email : 모양은 text와 동일하나 email 작성 용도("@", "." 사용했는지 확인)
     7. number : 숫자만 입력가능한 상자
     8. range : 슬라이드바를 이용한 숫자 지정(단독사용 불가. 자바 스크립트랑 같이 사용)
                    *min(최소값) max(최대값) step(숫자가 증가/감소하는 단계) value(기본값 설정)
     9. date, month, week, time, datetime-local : 날짜관련 태그

            input 태그의 경우 한 태그 안에서 열고 닫지만 (<input>)
            예외상황의 경우<input></input> 사용하기도 함

input은 무조건 form 태그 안에서 작성해야하는 건 아니라 단독으로도 사용 가능
추후 id라는 속성을 이용할 것
     * id = 자바스크립트에서 사용할 변수명. label과 연결해주는 기능
     * name = form으로 내용을 제출할 때 사용
name안에 변수명을 작성할 때는 속성이나 예약어는 피해서 작성할 것
      name = id 작성하면 id 속성과 혼동이 올 수 있음
      name = user_id / member_id 처럼 id만 단독으로 사용하는건 방지하는게 좋음
      * placeholder = 사용자가 입력을 해야하는 내용이나 정보를 미리보기처럼 양식을 작성해주는 공간
      * required = form을 제출할 때 필수로 작성해야하는 것으로 지정
        이메일의 경우 "@", "."쓰지 않으면 작성해야한다는 요청메세지가 보임