[생활코딩/2015 HTML 수업 : WEB1 아님! 혼동 주의!] Form 배우기. 선택? (dropdown list / radio / checkbox)

3. 선택
1) 여러 폼 태그 중 'dropdown list' : 제한된 공간 안에서 여러개의 선택지를 선택할 수 있도록 하는 형태.

ex) 사용자가 정해져 있는 색상 중 하나를 선택한다고 할 때라고 가정,
이때, <select> </select> 라는 부모 태그 - <option> </option>이라 하는 자식 태그를 사용하여 '선택지'를 만들 수가 있다!

 

<form action="http://localhost/color.php">

                <h1>색상</h1>
                <select>
                    <option>붉은색</option>
                    <option>검은색</option>
                    <option>파란색</option>
                <input type="submit">

</form>

 

이라 설정하고, 제출을 하게 되면 또 문제가 발생한다. 왜? select라 하는 것의 이름이 정해지지 않았으니까 제대로 전달되지 못한다. 그래스 <select name="color">처럼 이름을 설정해주어야 한다. 이름을 설정한 상태로 다시 제출 버튼을 누르게 되면 주소 창에 color=검은색 or 붉은색 처럼 제대로 정보가 전송되었음을 나타내준다. 

 

★ 근데 이렇게 보이는 것은 어디까지나 사용자가 보기 편한 형태이고, 만약, 컴퓨터가 인식하기 좋은 형태로 보내고 싶다면?? <option> 태그의 속성 value를 사용해주면 된다. 즉, 예를 들어

 

<form action="http://localhost/color.php">

            <h1>색상</h1>
            <select name="color">
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
</form> 

 

위의 예시대로 value 값을 "red", "black" 등으로 설정해주면, 그 색에 맞는 값을 제출 즉, 
전송해주면 아래와 같은 사진으로 나타나게 된다.

한글이 아닌 color='red' 즉, 영어로 저장.

☆ 이제 여러 색상을 다중선택하고 싶다면 어떻게 만들까? ex)

<form action="http://localhost/color.php">

            <h1>색상</h1>
            <select name="color">
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>

            <h1>색상2 (다중선택)</h1>
            <select name="color2" multiple>
                <option value="red">붉은색</option>
                <option value="black">검은색</option>
                <option value="blue">파란색</option>
            </select>
            <input type="submit">
        </form>

 

select의 name 역시 똑같으면 정보에 구별되지 않으니 색상2에 대해선 "color2"로 이름을 지정한다.
그 다음 속성인 <multiple>은 속성값이 없다. <multiple>을 설정하면, 한꺼번에 여러 값을 선택하여 전송할 수 있게 된다. 한번에 여러 값을 선택하는 방법은 '컨트롤'키를 누른 상태로 여러개를 클릭하면 된다. 

 

근데 이런 방식은 비효율적이기 때문에, 다음 강의를 학습하자. (radio / checkbox : 2번째 강의 참조) opentutorials.org/course/2039/10955

선택 - 생활코딩

★★★ 근데 뭐 이런 거 다 외울 필요가 없다. 왜냐? 아톰에서 추천해주니까 설명을 읽든 직접 적용해보면 되니께 일단 배우고 넘어가자. 

 

2) radio, checkbox 버튼
: <input type="radio">
  <input type="radio"> 이런식으로 2개의 버튼만 만들었다면 2개 다 클릭이 가능한 상태로 만들어진다.

 

★ 근데 우리는 여러개 중 하나만 클릭되는 형태로 만들고 싶다면! 얘네 둘의 name을 같은 이름으로 지정해주면 된다! 
예를 들어, 
<input type="radio" name="color">
<input type="radio" name="color"> 이렇게. 즉, "radio"는 name이 같은 것들끼리 '그룹핑'이 된다!
뭔 소리냐면, 그룹핑된 버튼들 중 하나가 선택되면 나머진 버튼이 해제된다고 생각하자.

 

아까와 마찬가지로, 
           <p>
                붉은색 : <input type="radio" name="color" value="red">
                검은색 : <input type="radio" name="color" value="black">
                파란색 : <input type="radio" name="color" value="blue"> 
           </p>
이렇게 만들었다면 value란 속성을 통해 전달되는 값을 컴퓨터가 이해하기 편하게 만들어 줄 수 있다.

 

★ "radio"와 다르게, 같은 그룹일지라도 여러개가 선택되도록 하는 폼을 만들고 싶다면! "checkbox"란 type을 사용하면 된다. <input> 태그에서 checked 속성은 직역처럼 '이미 체크된' 그대로 체크된 채로 나타나게 된다.

즉, 
 <form action="http://localhost/order.php">

            <p>
                <h1>색상(단일선택)</h1>
                붉은색 : <input type="radio" name="color" value="red">
                검은색 : <input type="radio" name="color" value="black" checked>
                파란색 : <input type="radio" name="color" value="blue">
            </p>
            <p>
                <h1>사이즈(다중선택)</h1>
                95 : <input type="checkbox" name="size" value="95">
                100 : <input type="checkbox" name="size" value="100" checked>
                105 : <input type="checkbox" name="size" value="105" checked>
            </p>
            <input type="submit">
</form>

 

★★★ 일단 여기서 멈추고, CSS 들으러 가야겠다. 이런 공부 방식은 어차피 까먹게 되기 마련이다.