form 태그

서버에 데이터를 전솔할 때는 form 태그 안에 하위 태그 input,select,
textarea 등을 명시하고 태그에 데이터를 입력해서 전송함.
form 태그 밖에 명시한 태그에 입력된 데이터는 전송되지 않음

💡 예시

<form action="a.jsp" method="get">
   이름 <input type="text" name="name" size="10"
          maxlength="15"><br>
          
   비밀번호 <input type="password" name="password" size="10"
          maxlength="10"><br>
          
  파일업로드 <input type="file" name="image" size="10"
          ><br></form>

📑 결과

이름
비밀번호
파일업로드

💡 예시_#2

<form action="do.jsp" method="get">
     <!-- fieldset : 폼을 그룹핑하는 역할 -->
     <fieldset>
        <!-- legend : 제목 지정 -->
        <legend>프로젝트 정보</legend>
        <ul>
            <li>
                <!-- autofocus : 페이지 로드시 자동 포커스 지정 -->
                <!-- required : 입력 필수 지정 --> 
                <label for="name" >이름</label>
                <input type="text" id="name" name="name"
                 autofocus required>
            
            </li>
            <li>  
                <!-- number : 숫자 필드 -->
                 <label for="hours">예상 시간</label>
                 <input type="number" id="hours"
                 name="esstimated_hours"
                 min="0" max="100">
                 
            </li>
            <li>
                <!-- range : 슬라이드 막대로 표시하는 숫자 필드 -->
                <label for="priority">중요도</label>
                <input type="range" id="priority"
                name="priority" min="0" max="10" value="0"
                oninput="result.value=parseInt(priority.value)">
                <output name="result"></output>
            </li>
            <li>
                <!-- date : 날짜 필드 -->
                <label for="start_date">시작 날짜</label>
                <input type="date" name="start_date" 
                id="start_date">
            </li>
            <li>
                <!-- email : 이메일 필드 -->
                <label for="email">이메일</label>
                <input type="email" name="email" id="email">
            </li>
            <li>
               <!-- url : URL 필드 -->
               <label for="url">URL</label>
               <input type="url" name="url" id="url">
            </li>
            <li>
                     <!-- search : search(검색) 필드 -->
                     <label for="search">검색</label>
                     <input type="search" name="search" id="search">
            </li>
            
            <li>
            <input type="submit" value="전송">
            </li>
            
        </ul>
     </fieldset>
    </form>

📑 결과_#2

form

form의 필드와 속성

프로젝트 정보

• 이름
• 예상 시간
• 중요도
• 시작 날짜
• 이메일
• URL
• 검색

label 태그

label 태그를 이용해 라디오 버튼이나 체크박스에 텍스트를 연결해 놓았다면 텍스트만 터치해도 라디오 버튼이나 체크박스가 선택되어 편리하게 사용할 수 있지만 label 태그를 사용하지 않으면 라디오 버튼이나 체크박스 부분을 정확하게 터치해야 선택됨

💡 예시

<form action="do.jsp" method="get"></form>
  <fieldset>
      <legend>label 테스트</legend> 
       <ul>
          <li>
             <input type="checkbox" name="a" value="korean">국어
             <input type="checkbox" name="b" value="english">영어
             <input type="checkbox" name="c" value="math">수학      
          </li>

          <li>
             <label for="a1"><input type="checkbox"
             name="a1" id="a1" value="grm">문법</label>
             <label for="a1"><input type="checkbox"
             name="a2" id="a2" value="wr">직문</label>
             <label for="a1"><input type="checkbox"
             name="a3" id="a3" value="rd">독해</label>
          </li>
          
       
       </ul>
  </fieldset>

📑 결과

label 테스트

• 국어 영어 수학
• 문법 직문 독해

checkbox 태그

💡 예시

계절<br>
<input type="checkbox" name="season" value="봄">봄
  <input type="checkbox" name="season" value="여름" checked>여름
  <input type="checkbox" name="season" value="가울">가을
  <input type="checkbox" name="season" value="겨울">겨울
  <br>
  <!-- radio 단일 선택 기능 -->
  국적<br>
  <input type="radio" name="country" value="대한민국">대한민국
  <input type="radio" name="country" value="영국">영국
  <input type="radio" name="country" value="프랑스">프랑스
  <br>

📑 결과

계절

봄
여름
가을
겨울

국적

대한민국
영국
프랑스

option 태그

💡 예시

직업<br>
  <select name="job">
  <optgroup label="전문직">
      <option value="의사">의사</option>
      <option value="프로그래머">프로그래머</option>
      <option value="헤어디자이너">헤어디자이너</option>
      <option value="승무원">승무원</option> 
  </optgroup>
  <optgroup label="스포츠선수">
      <option value="농구선수">농구선수</option>
      <option value="야구선수">야구선수</option>
      <option value="축구선수">축구선수</option>
      
  </optgroup>
  </select>
  <br>

📑 결과

직업

의사 프로그래머 헤어디자이너 승무원 농구선수 야구선수 축구선수

tesxtarea 태그

여러줄 입력 태그

💡 예시

내용<br>
  <textarea rows="5" cols="50" name="content"></textarea>
  <br>

📑 결과

내용