Form radio 속성과 Servlet

 

목표

오늘의 운세를 보기 위해 카드를 선택하는 페이지를 만들자.

 

Radio 사용하기

Radio는 여러 항목중에서 단 하나의 값만 선택하도록 합니다.

중요한 점이 있다면 name = "blah" 하면서 모두 같은 값을 넣어주셔야 합니다.

name을 따로 지정하지 않으면 각각을 다른 그룹으로 인식해서 중복 선택이 가능합니다.

또한 servlet에서 값을 받아올때도 복잡해지니 name = ""하면서 같은 이름을 지정해주세요.

메이저 타로 카드는 총 22장입니다.

즉 22개의 radio를 만듭니다.

<form action = "cardSelect">
    <div class = "cardBox">
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Fool"> The Fool</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Magician"> The Magician</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The High Priestess"> The High Priestess</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Emperess"> The Emperess</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Emperor"> The Emperor</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Hieropthont"> The Hieropthont</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Lovers"> The Lovers</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The chariot"> The chariot</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Strength"> The Strength</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Hermit"> The Hermit</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "Wheel of Fortune"> Wheel of Fortune</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "Justice"> Justice</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Hanged Man"> The Hanged Man</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "Death"> Death</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "Temperance"> Temperance</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Devil"> The Devil</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Tower"> The Tower</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Star"> The Star</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Moon"> The Moon</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The Sun"> The Sun</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "Judgement"> Judgement</input></div>
        <div class = "cardItem"><input type = "radio" name = "major" value = "The World"> The World</input></div>
    </div>
    <div id = "cardChoose"><input type="submit" value= "선택"/>
</form>

길어보이지만 전부 22개의 옵션을 만들었을 뿐.. 별거 없습니다.

22개의 항목이 보기 좋게 4행 5열의 형태를 가졌으면 합니다.

그래서 cardBox라는 컨테이너에 grid 속성을 부여합니다.

.cardBox{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gir-template-rows:20px 20px 20px 20px 20px
}

item 끼리도 padding을 주어서 갑갑하지 않게 간격을 둡니다.

값을 servlet으로 넘기기

간단하게 어떤 카드를 뽑았는 지 출력하도록 하겠습니다.

저는 name을 major로 정했습니다.

그러면 request.getParameter("major") 하면 되겠죠?

 

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        
        String inputString = request.getParameter("major");
        out.println("당신이 선택한 카드는 "+inputString+"입니다<br/>");
    }

아무 카드나 선택하고 버튼을 클릭하면 해당 카드 이름이 알아서 들어간답니다.

저번에는 숫자라서 형변환을 했지만 이번에는 String이니까 오히려 더 간편했네요.