form태그에 대해 알아봅시다 개발

from태그란 회원가입이나 게시물등을 사용자가 입력하였을때

입력받은 정보를 다른 페이지로 보낼 수 있는 기능입니다

이거랑 앞전에 사용했던 table 태그만 있다면 간단한 게시판정도는 만들 수 있습니다

댓글이나 페이징에 대해서 더 공부해야 하지만 말이죠...

뭐 잡설은 그만 두고 또 허접한 예제를 만들어봤습니다 -_-

정말 줄 맞춤도 없고 뭣도 없는 정말 정말 간단한 예제인데요

그래도 이것저것 기술할건 다 들어갔다고 자부 할 수 있습니다요 -ㅅ-ㅋ

소스가 길어지면 이해하기 힘들어지니까요 ㅋ



<%@page contentType="text/html; charset=EUC-KR"%>
<html>
<head><title>form 태그에 대해 배워봅시다!!!</title></head>
<body>
     <form method="get" action="joinOk.jsp">

          아이디:
                <input type="text" name="id" /><br/>

          비밀번호 :<input type="password" name="password"><br/>

                 <textarea rows="20" cols="30" name="self-introduction"></textarea><br/>

          관심분야:
                 <input type="checkbox" name="language" value="java" id="checkboxId1"><label for="checkboxId1">자바</label>
          <input type="checkbox" name="checkbox2" value="c" id="checkboxId2"><label for="checkboxId2">C언어</label>

                 <input type="hidden" name="hiddenValue" value="joinPage"><br/>

          성별:
                  <input type="radio" name="sex" value="man" id="radioBoxId1"><label for="radioBoxId1">남성</label>
                  <input type="radio" name="sex" value="woman" id="radioBoxId2"><label for="radioBoxId2">여성</label><br/>
     
   폰번호 앞자리
            <select name="phone">
                  <option value="010">010</option>
                  <option value="011">011</option>
                  <option value="017">017</option>
              </select>

         <input type="submit" value="회원가입">
     </form>
</body>
</html>

자 이제 하나하나 걸고 넘어져봅시다

 <form method="get" action="joinOk.jsp">
method란 전송방식입니다 get으로 하면 주소표시줄에 ?와 & 로 입력한 정보가 넘어가게 됩니다


이런식으로 뒤에 값이 붙어서 이동하는거구요
post방식이 따로 있는데 이건 request라는 객체에 담아서 전송하는 방식으로
로그인의 패스워드나 회원가입 정보등은 post방식으로 보내야합니다
주소줄뒤에 붙어서 가는게 아니라 객체에 담아서 보내기때문에 주소줄에 표시되지않습니다 훨씬 보안성이 뛰어나죠
action은 입력한 정보를 어디로 보내는가에 대해 기술하는겁니다
저는 같은 폴더의 joinOk.jsp라는 페이지로 보내기로 하는겁니다.
<input>에는 속성중에 name과 value가 있습니다
?나&에 뭔가 써져있죠???
지정해놓은 이름과 값이 넘어가는겁니다
텍스트입력은 개발자가 입력해놓은 이름(name)과 사용자가 입력한 글씨가 값(value)으로 넘어가게 되는거고
체크박스나 라디오박스의 경우엔 개발자가 지정해놓은 이름과 값이 넘어가게 됩니다 사용자가 선택한 이름으로 말이죠

<input type="text" name="id" />
input이란 사용자가 정보를 입력 할 수 있도록 공간을 할당하겠다고 정의하는건데요
안에 속성이 굉장히 많습니다

text는 한줄짜리 text입력공간을 주겠다는것이고

password는 text와 같지만 입력한 내용이 특수문자로 표기가 됩니다

textarea는 input의 속성처럼 사용되는게 아니라 따로 <textarea>라는 태그가 따로있습니다
text입력 공간이라는건 input태그의 text속성과 비슷하지만 textarea는 가로와 세로의 크기를 정할 수 있습니다
위에서도 자기소개라는 이름으로 만들었는데요 많은 내용이 들어가야할땐 textarea를 사용하시는게 좋습니다

<input type="hidden" name="hiddenValue" value="joinPage">
hidden속성은 사용자가 입력하지 않아도 값을 넘길 수 있는 기술입니다
사용자가 이 페이지가 데이터베이스에서 몇번째 게시물인가에 대해서 알 필요가 없듯이
그런 정보를 몰래까진 아니지만 사용자입력이 없어도 꼭 넘어가야 하는 값이 있다면
hidden으로 넘기는겁니다

checkbox는 인터넷 페이지를 조금만 돌아보신본이라면 아실겁니다 체크박스입니다
checkbox는 옆에 있는 글씨를 눌러도 체크박스가 되게 만들 수 있습니다 대부분 그렇게 만들구요 그 방법은 
<input type="checkbox" name="language" value="java" id="checkboxId1"><label for="checkboxId1">자바</label>
id라는 속성을 지정해두고 labelfor속성을 같은 이름으로 짓는겁니다 그럼 글씨와 체크박스가 혼연일체가 되죠
그러니까 위의 예제처럼 자바라고 되어있는 글씨를 눌러도 체크박스가 눌러지는겁니다
체크박스의 주의점은 id와 for가 같은 값이여야 한다는 점입니다

radiobox는 체크박스랑은 다른모양인데 비슷한 역할을 하는거랄까요???
2개중 한개만 선택하게 만들때랄까요 위의 예제처럼 남자인지 여자인지 둘중 하나만
선택되게 할때 많이씁니다 둘다 체크하면 이상하잖아요 -ㅅ-?
<input type="radio" name="sex" value="man" id="radioBoxId1"><label for="radioBoxId1">남성</label>
<input type="radio" name="sex" value="woman" id="radioBoxId2"><label for="radioBoxId2">여성</label><br/>
이건 설명을 길게 늘어놓으면 헷갈리니 이런식으로 설명하지요
위의 태그에 색이 같은것끼리 같은 값을 지니고 있어야 라디오 박스가 한개만 선택됩니다
여기서도 id와 for는 글씨를 누를때 라디오박스가 눌러져야되기때문에 같아야하고
name같은 경우에는 둘중 하나만 눌러져야하니 같은 이름을 써야합니다

<select name="phone">
<option value="010">010</option>
<option value="011">011</option>
<option value="017">017</option>
</select>
select태그는 많은것중에 한개만 선택할때 사용됩니다
위의 태그처럼 폰번호 앞자리를 입력받을떄 처럼 3개 이상일때 한개만 선택하도록 만들 수 있습니다
phone이란 이름으로 선택된 숫자가 전송되는거죠

 <input type="submit" value="회원가입">
submit속성은 그냥 뭐랠까 정보를 다 쓰고 누르는 회원가입이나 입력완료 버튼이라고 보시면 되겠습니다
value에 쓴 글짜가 버튼위에 표시되게 됩니다


이상입니다 가면 갈수록 글만 길어지고 실속이 없는 거 같아 아쉽네요

1 2 3 4 5 6 7