[HTML+CSS3] 입력 양식 태그

08.  입력양식태그

· 입력양식태그

입력양식태그는 사용자가 정보를 입력받는 공간을 말한다.   
클라이언트(Client)와 서버(Server)와의 관계에 대해 이해해야함 ( 하단 설명 참고 )

입력 양식은 form 태그를 사용해서 전체를 감싼다.    
form 태그는 서버와 관련된 내용이 있다.   
클라이언트가 입력 양식에 데이터를 입력하고, submit 버튼을 클릭하면 지정된 방법으로   
지정된 파일에 데이터를 저장한다.   
※ action 속성 : 데이터를 전달한 파일을 지정한다.   
※ method 속성 : 데이터를 전달하는 방식 (post, get)을 지정한다.

· 클라이언트(Client)와 서버(Server)와의 관계

서버(제공자)는 웹페이지를 제공해주는 대상이고 클라이언트(고객)는 웹 페이지를 받는 대상이다.   
               Client                          -------------> (request)            Web Server
 (사용자 컴퓨터 브라우저)         <------------- (request)              (웹 서버)
클라이언트의 요청은 크게 두가지로 나뉜다.   
클라이언트의 요청
1. 웹페이지를 요청하는 것   
2. 데이터 처리를 요청하는 것
클라이언트가 서버로 데이터를 전달할 때 사용하는 가장 기본적인 방법은
입력 양식을 사용하여 클라이언트로부터 데이터를 입력받아 보내는 것이다.   

· 입력양식태그를 사용한 예제

<form name="form_id" action ="jsp/writeproccess.jsp" method = "post">  
    <!-- Post : 많은 데이터를 한번에 받을 때 / get -  한두개의 데이터를 받을 때 -->
    <ul> <!-- input 태그가 inline이기 때문에 블록박스로 감싸준다. {inline형 : 좌 > 우} -->
      <li><input type="text"name="id" placeholder="아이디 입력"></li>
       <!-- text 는 문자열 데이터를 받는다. --> <!-- value="값" 지정과 placeholder="값" 차이점 확인 -->
      <li><input type="password" name="pwd" placeholder="비밀번호 입력"></li> 
      <!-- password 는 문자열 데이터를 받는데, 별이나 원모양의 기호로 표시된다. -->
      <li><input type="button" name="btn" value="버튼"></li>
      <!-- button 은 버튼을 생성한다. value 속성값이 버튼에 표시된다. -->
      <li><input type="file" name="file"></li>
      <!-- 파일 입력폼으로 파일 업로드 컨트롤을 생성한다. -->
      <li>
          <input type="checkbox" name="hobby" value="농구" checked>농구 &nbsp;&nbsp;
          <input type="checkbox" name="hobby" value="만화" >만화
          <!-- &nbsp : 두번띄우기 -->
          <!-- name 속성의 값 (=변수명)이 같아야함 -->
      </li>
      <!-- 체크박스 생성 : 여러개의 항목을 선택할 수 있음 -->
      <li>
        <input type="radio" name="gender" value="남자" checked>남자 &nbsp;&nbsp;
        <input type="radio" name="gender" value="여자" > 여자
        <!-- name 속성의 값 (=변수명)이 같아야함 -->
      </li>
      <!-- 라디오 버튼 생성 : 단일 선택 -->
      <li><input type="submit" value="전송"></li>
      <!-- submit 은 버튼을 생성한다. value 속성값이 버튼에 표시된다. 입력폼에 작성한 데이터를 서버로 전달한다. -->
    </ul>
  </form>

>>>>>>>>>>>>>>>>> 결과 <<<<<<<<<<<<<<<<<

입력양식태그 예제 결과

08. 입력 양식 태그

· input type="hidden"

보이지 않는 입력양식 : 사용자로 부터 데이터를 입력받지 않고 서버로 데이터를 전달할 때 필요하다.

<form name="form_id" action ="jsp/writeproccess.jsp" method = "post">  
	<input type="hidden" name="name" value="hidden">

· input type="reset"

입력폼에 입력한 데이터를 모두 초기화 한다.

<li><input type="reset" value="리셋"></li>

>>>>>>>>>>> 결과 <<<<<<<<<<<

초기화 버튼 선택

09. 입력 양식 태그

· label 태그

label 태그는 input 태그를 설명하며, 항목이나 파일을 식별하기 위해 사용하는 제목이나 이름을 말한다.

<table>
    <tr>
      <td><label for="username">이름</label></td>
      <td><input id="username" type="text" name="username"></td>
    </tr>
    <tr>
      <td>성별</td>
      <td><input id="man" type="radio" name="gender" value="m">
             <label for="man">남자</label>
             <!-- id와 for 속성값이 같아야함-->
             <input id="woman" type="radio" name="gender" value="w">
             <label for="woman">여자</label>
      </td>
    </tr>
    <tr>
      <td>좋아하는 음식</td>
      <td>
        <!-- BO에 데이터를 저장하기 위해 변수 지정 필요 (name)-->
        <select name="food">
          <option value="김밥" selected>김밥</option>
          <option value="떡볶이" >떡볶이</option>
          <option value="순대">순대</option>
          <option value="어묵">어묵</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>좋아하는 음식</td>
      <td>
        <select name="food" multiple> <!-- multiple : 항목 중 여러 개를 선택-->
          <option value="김밥" selected>김밥</option>
          <option value="떡볶이" >떡볶이</option>
          <option value="순대">순대</option>
          <option value="어묵">어묵</option>
          <option value="어묵">튀김</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>교육 내용</td>
      <td>
        <label for="프론트엔드">프론트엔드</label>
        <select id="프론트엔드" name="edu">
          <optgroup label="기본"> 
            <!-- optgroup : 선택하는 항목이 많을 경우에 사용자가 선택하기 편하도록 선택 항목을 구분한다. -->
            <!-- name(edu) 으로 변수 지정 해주면 선택한 값을 담기위해 value(html,css3 ...) 값 지정해줘야함 -->
            <option value="HTML5" selected>HTML5</option>
            <option value="CSS3">CSS3</option>
            <option value="JS">JavaScript and jQuery</option>
          </optgroup>
          <optgroup label="고급">
            <option value="Ajax">Ajax</option>
            <option value="node">node.js</option>
            <option value="React">React.js</option>
          </optgroup> 
        </select>
        <label for="백엔드">백엔드</label>
        <select id="백엔드" name="back-edu">
          <optgroup label="기본"> 
            <option value="JAVA" selected>JAVA</option>
            <option value="DB">DataBase</option>
            <option value="SQL">SQL</option>
          </optgroup>
          <optgroup label="고급">
            <option value="JSP">JSP(자바 웹 프로그래밍)</option>
            <option value="Spring">Spring framework (스프링)</option>
          </optgroup> 
        </select>
      </td>
    </tr>
    <tr>
      <td><input type="submit" value="전송"></td>
      <td><input type="reset" value="초기화"> <input type="button" value="버튼"></td>
    </tr>
  </table>

>>>>>>>>>>> 결과 <<<<<<<<<<<