[ Web & Mark UP ] HTML 입력 양식들.-[1]

 

 

[ Web & Mark UP ] HTML 입력 양식들. - [1]

 

---

◆ 폼 구성하기.

 

     - 폼(Form)이란 

        HTML에서 유저와 상호작용해서 정보를 입력 받고 서버로 전송하기 위한 양식을 의미합니다.

👉 SSR에서는 일반적으로 form 제출과 같은 HTML 기반의 동작을 필요로 할 때 
<form> 태그를 사용하는 것이 좋습니다.


CSR과 SPA의 기반으로하는 리액트와 같은 모던 프론드엔드에서는
<form> 태그를 사용하지 않고도 폼 데이터를 처리 할 수 있습니다.

 

 

 

---

∇ form 태그

---

<form action="처리할페이지주소" method="get|post"></form>

         - form 태그는 action과 method 속성을 함께 사용합니다.

 

 

       □ action 속성.

            - action 속성에는 폼 요소에서 

               "사용자와 상호작용으로 입력 받은 값들을 전송할 서버의 URL 주소를 적습니다.

 

       □ method속성.

            - 입력 받은 값을 서버에 전송 할 때 송신할 방식을 적습니다.

              속성값으로 get 또는 post를 사용 가능합니다.

 👉 GET 방식은 주소에 데이터(data)를 추가하여 전달하는 방식입니다.

데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적입니다.

따라서 검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용합니다.

POST 방식은 데이터(data)를 별도로 첨부하여 전달하는 방식입니다.

데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없습니다.

따라서 보안성 및 활용성이 GET 방식보다 좋습니다.

 

 

∇ input 태그

---

   - 로그인 페이지 등에서 아이디와 비밀번호를 입력받는 것처럼,  데이터를 입력받는 요소를 생설할 때는

         input 태그를 사용합니다.

 

<input type="종류" name="이름" value="초기값">

 

 

       □ type 속성.

            - "input" 태그의 'type' 속성은 입력 요소의 타입을 지정합니다.

            - 다양한 타입의 입력 요소를 만들기 위해 'type' 속성값으로 다음과 같은 값을 사용 가능합니다.

 

 

              1. text : 텍스트 입력란을 만듭니다.

              2. password: 비밀번호 입력란을 만듭니다.

              3. checkbox : 체크박스를 만듭니다.

              4. radio : 라디오 버튼을 만듭니다.

              5. submit: 제출 버튼을 만듭니다.

 

              6. reset: 리셋 버튼을 만듭니다.

              7. button:  노멀한 버튼을 만듭니다.

              8. hidden : 뷰에 보이지 않는 숨겨진 입력란을 만듭니다.

              9. date : 날짜 입력 요소를 만듭니다.

              10. time: 시간 입력 요소를 만듭니다.

 

              11. datetime: 날짜와 시간 입력 요소를 만듭니다.

              12. email: 이메일 입력 요소를 만듭니다.

              13. file : 파일 업로드 입력 요소를 만듭니다.

              14. image : 이미지를 나타내는 입력 요소를 만듭니다.

              15. month: 월 입력 요소를 만듭니다.

 

              16. number: 숫자 입력 요소를 만듭니다.

              17. range: 범위를 선택하는 입력 요소를 만듭니다.

              18. search : 검색 입력 요소를 만듭니다.

              19. tel : 전화번호 입력 요소를 만듭니다.

              20. url:  url 입력 요소를 만듭니다.
              21. week: 주 단위 입력 요소를 만듭니다.

              22. color: 색상 선택 입력 요소 만듭니다.

 

<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="check">
<input type="radio" name="radio" value="1">
<input type="submit" value="제출">

<input type="reset" value="초기화">
<button type="button">버튼</button>
<input type="hidden" name="hidden_input">
<input type="date" name="date_input">
<input type="time" name="time_input">

<input type="datetime" name="datetime_input">
<input type="email" name="email_input">
<input type="file" name="file_input">
<input type="image" src="image.jpg">
<input type="month" name="month_input">


<input type="number" name="number_input">
<input type="range" name="range_input">
<input type="search" name="search_input">
<input type="tel" name="tel_input">
<input type="url" name="url_input">
<input type="week" name="week_input">
<input type="color" name="color_input">

 

---

∇라디오 타입

---

                - 여러 항목 버튼들 중 하나만 선택하도록 합니다.

 

                     - name : name의 값이 같은 것 중에서 하나를 선택합니다.

                        ( 여러개의 라디오 버튼에 대해서 연동하기 위해서 동일이름으로 사용해야 함 )

                     - value : 선택했을 때 전달될 값.  ( 서로 다른 값을 가져야 합니다 )

                     - checked : 선택된 상태로.

                     - for  &  id 는 HTML에서 라벨 요소와 다른 요소를 연결하는데 사용되는 속성입니다.

 

👉 HTML에서 큰따옴표 (””)는 문자열을 나타내는 기호이며, 속성값을 의미 하기도 합니다.

<form action="#">
    <label for="male">남성</label>
    <input type="radio" name="gender" id="male", value="남자">
    <label for="female">여성</label>
    <input type="radio" name="gender" id="female", value="여자">   
</form>

 

 

       □ name 속성.

 

                 - name 속성에는 입력 요소의 이름을 작성 합니다.

                 - 입력 요소가 form 태그에 의해 서버로 전송 될 때, name 속성에 적힌 값이 이름으로 저장 됩니다.

                - 서버에서는 지정된 이름으로 입력 요소를 식별 가능합니다.

                

 

 

       □ value 속성.

                - value 속성에는 입력 요소의 초기값을 작성합니다.

                    입력 요소는 보통 사용자의 입력을 받지만, 초기값을 지정할 수도 있습니다.

 

 

 

 

 

---

∇label 태그 ( 폼 요소에 레이블을 붙이는 태그 )

---

     - form 태그 안에서 사용하는  "상호작용 요소에 이름을 붙일 때 사용" 합니다.

 

     - 시각 장애인이 웹을 탐색할 때

        웹접근성(스크린 리더) label 태그로 연결된, 상호작용 요소를 읽어주는 요소로 사용됩니다.

   

 

    - 사용자가 아이디를 입력하는 폼 요소의 앞뒤에 <label> 과 </label> 태그를 붙여 작성합니다.

<label>아이디<input type="text"></label>

           <label> 태그와 폼 요소를 따로 사용하고, 

           <label> 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결합니다.

 

    - 폼 요소의 id 속성값을 <label> 태그의 for 속성에게 알려주는 방법을 사용 합니다.

<label for="user-id">아이디(6자리 이상)</label>
<input type="text" id="user-id">

 

---

∇ fieldset & legend 태그.

---

      - form 태그 안에 사용된 다양한 상호작용 요소도 fieldset 태그를 사용해서 그룹화 할 수 있습니다.

      - fieldset 태그로 그룹을 지으면,  그룹별로 박스 모양의 테두리가 생깁니다.

 

<body>
    <form>
      <fieldset>
        <legend>기본 정보</legend>      
        <p>
          <label for="userid">아이디</label>
          <input type="text" id="userid">
        </p>
        <p>
          <label for="passwd">비밀번호</label>
          <input type="password" id="passwd">
        </p>
      </fieldset>
      <fieldset>
        <legend>선택 정보</legend>
        <p>
          <label for="age">나이</label>
          <input type="number" id="age">
        </p>
        <p>
          <label for="recommender">추천인</label>
          <input type="text" id="recommender">
        </p>
      </fieldset>
    </form>
   </body>

 

 

---

∇ textarea 태그.

---

 

     - 여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 " textarea " 태그를 사용 합니다.

 

     - 웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성 합니다.

<textarea>초기값</textarea>

 

<body>
    <form action="#" method="post">
      <fieldset>
        <legend>블로그 글쓰기</legend>
        <p>
          <label for="title">제목
            <input type="text" id="title" name="title">
          </label>
        </p>
        <p>
          <label for="desc">내용
            <textarea id="desc" name="desc" readonly></textarea>
          </label>
        </p>
      </fieldset>
    </form>
</body>

 

---

∇ select, option, optgroup 태그

---

        - select 태그를 사용하면, 콤보 박스를 생성 가능합니다.

 

        - 콤보 박스에 항목 하나를 추가할 대는 option 태그를 사용하고,

                       여러 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용합니다.

 

        - option 태그는 서버에 전송할 값을 value 속성으로 지정 가능한데,

                     속성을 생략하면 option 태그의 컨텐츠로 적은 텍스트가 값으로 전송됩니다.

 

       - optgroup 태그로 항목들을 그룹 지을 때, 반드시 label 속성으로 그룹명을 지정해야 합니다.

 

 

＠select 태그와 option 태그를 사용.

<body>
    <!-- select & option 태그만 사용 -->
    <form action="#" method="post">
      <fieldset>
        <legend>개인 정보 입력</legend>
          <label for="city">지역</label>
          <select name="city" id="city">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </select>
          <input type="submit" value="등록">
      </fieldset>
    </form>
  </body>

 

 

 

＠ optgroup 태그 사용.

<body>
  <!-- select & option & optgroup 태그 사용-->
  <form action="#" method="post">
    <fieldset>
      <legend>개인 정보 입력</legend>
        <label for="city">지역</label>
        <select name="city" id="city">
          <optgroup label="서울시">
            <option value="강북구">강북구</option>
            <option value="강남구">강남구</option>
            <option value="서초구">서초구</option>
          </optgroup>
          <optgroup label="경기도 성남시">
            <option value="중원구">중원구</option>
            <option value="분당구">분당구</option>
          </optgroup>
        </select>
        <input type="submit" value="등록">
    </fieldset>
  </form>
</body>