220210 HTML5 입력양식 태그

 * 입력 양식 태그★
   : 사용자로부터 정보를 입력받는 요소
      <form 어쩌구="" 저쩌구="">
        <input 어쩌구="" 저쩌구="">
      </form>

   <form action="전송 위치"> : 데이터를 전달할 목적지 지정
   <form method="전송 방식">
       - get: 주소에 데이터를 직접 입력해 전달
       - post: 주소 변경 없이, 별도의 방법을 사용해, 비밀스럽게 데이터를 주소로 전달
       (보통 보안 상의 이유로 post를 많이 쓴다고 하네요)

1. input★
     <input type=""> : 입력 속성 지정

 

 * type 종류
    01. 글자 입력★
     - text
     - password : 글자 가려져서 나옴
     - hidden : 화면엔 보이지 않지만 내부적으로 데이터를 전송위치(action)로 보냄
     - 속성
        <size="nn"> : 대략 nn자 들어갈 정도의 박스 크기 (글자수 제한이랑 관련 없음)
        <maxlength="nn"> : 글자수 최대값 제한
        <autofocus="autofocus"> : 커서 깜빡이
        <required="required"> : 입력값 공백 허용 X 무조건 값을 입력해야 함

        <name=""> : 입력 속성의 이름을 정의 ---> 변수 역할. 값을 저장해 전송 위치(action)로 보냄
                        ---> 서버로 넘어가고, request.getParameter(parameterName) 으로 접근 가능
        <id=""> : page 안에서 중복으로 사용할 수 없으며, 주로 CSS, JavaScript 등에서 다루기 위해 지정
                    ---> Server단의 파라미터값으로 넘어가지 않기 때문에, Server단에서 접근이 불가능

        <placeholder="입력"> : 텍스트 박스 안에 힌트 문구 생김
        <value="입력"> : 텍스트 박스 안에 디폴트 문구가 추가됨. 수정/삭제 가능
    ※ value값 고정
        <readonly="readonly"> : 입력 양식 값을 수정할 수 없도록 비활성화, 값을 전송 위치(action)로 보냄
        <disabled="disabled"> : 입력 양식 값을 수정할 수 없도록 비활성화, 값을 server단으로 넘기지 않음

    02. 버튼 입력
     - button : 기본 버튼, 전송 기능 없음
            <input type="button">      +) <button type="button">value</button>
     - submit : 값을 전달 (제출) (한 폼에 하나만 있어도 ㄱㅊ)
            <input type="submit">      +) <button type="submit">value</button>
     - reset : 취소, 초기화, 리셋
            <input type="reset">          +) <button type="reset">value</button>
     - image : 이미지 클릭, 전송 기능 있음
            <input type="image"  src="">
     - 속성
            <value="로그인"> : 버튼에 보이는 이름(값), 한글이나 띄어쓰기 있을 경우 '',"" 안에 넣기
   
    03. 첨부파일 입력
     - file
       <input type=file>

    04. 체크버튼, 라디오
     - radio : 중복 불가 단일 선택 ---> 같은 질문 내 동일한 name 설정하면 그 설정 내 선택지는 하나만 선택 가능
                    <input type=radio name="gender" value="여자">여자
                    <input type=radio name="gender" value="남자">남자
     - checkbox : 중복 쌉가 ---> 동일 name이어도 다중 선택 가능
                    <input type=checkbox name="hobby" value="공부">공부
                    <input type=checkbox name="hobby" value="게임">게임
                    <input type=checkbox name="hobby" value="쇼핑">쇼핑
                    <input type=checkbox name="hobby" value="등산">등산

 

2. textarea : 여러 행의 글자 입력 양식
      <textarea rows="nn"> : 너비 지정
      <textarea cols="nn"> : 높이 지정
      <textarea placeholder="입력"> : 텍스트 박스 안에 힌트 문구 생김

 

3. select : 선택 양식 생성
      <select>
         <option value="값1">이름1</option>
         <option value="값2">이름2</option>
      </select>