HTML 과 친해지기 (11)

폼(Form) 태그(2) - select,checkbox,radio

checkbox와 radio 버튼

• checkbox: 여러개의 체크박스 중 2개 이상 선택할 수 있습니다.

<ul>
          <li>
            <label for="red">빨강</label>
            <input type="checkbox" id="red" value="red" />
          </li>
          <li>
            <label for="blue">파랑</label>
            <input type="checkbox" id="blue" value="blue" />
          </li>
          <li>
            <label for="green">초록</label>
            <input type="checkbox" id="green" value="green" />
          </li>
          <li>
            <label for="yellow">노랑</label>
            <input type="checkbox" id="yellow" value="yellow" />
          </li>
        </ul>

input태그의 type에 checkbox를 지정해주면 됩니다. 체크박스 선택시 value로 지정한 값이 서버로 전송됩니다.

• radio: 여러개의 라디오 항목 중 1개를 선택할 수 있습니다.

<ul>
          <li>
            <label for="free">무료</label>
            <input type="radio" id="free" value="free" name="delivery" />
          </li>
          <li>
            <label for="pay">유료</label>
            <input type="radio" id="pay" value="pay" name="delivery" />
          </li>
        </ul>

여러개 중 하나를 선택하도록 하려면 그 항목의 name속성에 같은 값을 기입해줍니다. 라디오박스 역시 value속성에 기입된 값이 서버로 전송됩니다.

textarea 태그

• <textarea>: 여러줄의 데이터를 입력받을 수 있습니다.

<textarea name="" id="" cols="40" rows="10">
</textarea>

cols와 rows 속성으로 텍스트 영역의 크기를 조절할 수 있습니다.

Select & Option 태그

<select> 태그는 옵션 메뉴를 제공합니다. <option> 태그로 각 항목을 나타내며 <select> 태그는 <option> 태그를 감싸줍니다.

<select name="goods" id="goods">
              <option value="apple_10kg">사과(10kg)</option>
              <option value="apple_20kg">사과(20kg)</option>
              <option value="apple_30kg">사과(30kg)</option>
              <option value="apple_40kg">사과(40kg)</option>
              <option value="apple_50kg">사과(50kg)</option>
            </select>

datalist

• <datalist>: 추천하는 선택지를 담는 <option> 여럿을 담습니다. 보통 input 태그와 함께 사용하며 input 태그의 list 속성과 option 태그의 id 속성을 일치시켜줘야합니다.

<li>
            <label for="flavor-choice">맛을 선택하세요.</label>
            <input list="flavors" id="flavor-choice" name="flavor-choice" />
            <datalist id="flavors">
              <option value="chocolate"></option>
              <option value="strawberry"></option>
              <option value="blueberry"></option>
              <option value="mint"></option>
            </datalist>
          </li>

Button

-<button>: 요소는 클릭 가능한 버튼을 나타냅니다. <form> 내부를 포함하여 버튼이 필요한 어디에나 배치할 수 있습니다.

<button type="submit">제출하기</button>
<button type="reset">리셋하기</button>
<button type="button" onclick="alert('Hello World!')">버튼</button>

type 속성은 버튼의 행동 양식을 결정합니다.

-<submit>: 버튼이 서버로 양식 데이터를 제출합니다. form 태그의 action 속성에 기입된 uri로 해당 양식을 제출합니다. (기본값)
-<reset>: 모든 입력 필드를 초기값으로 되돌립니다.
-<button>: 기본 행동이 없으며 주로 클릭 후 자바스크립트 측 코드를 명령할 때 사용합니다.