input과 button의 차이 / form, fieldset, legend, label 활용 / select, optgroup option

아래 코드는 동일한 코드다.

submit으로 수정하고 제출로 해봐도 동일하다.

<input type="reset" value="초기화">

<button type="reset">초기화</button>

 

일반적으로 button태그만 쓸 때는

자바스크립트와 연결해서 사용하는 경우가 많다.

<button onclick="doit()">클릭!</button>

<script>

  function doit() {

    alert('클릭했습니다.');

}

</script>

 

---

<form>

  <fieldset>

     <legend>size</legend>

     <label>

       <input type="radio" name="size" value="tall">

     </label>

     <label>

       <input type="radio" name="size" value="grande">

     </label>

     <label>

       <input type="radio" name="size" value="venti">

     </label>

  </fieldset>

</form>

 

---

<select name="fruits">

    <optgroup label="내가 좋아하는 과일>

      <option>사과</option>

      <option>바나나</option>

    </optgroup>

    <optgroup label="내가 싫어하는 과일>

      <option>토마토</option>

      <option>방울토마토</option>

    </optgroup>

</select>