LIGHTIXXX

<button> - 선택 가능한 버튼을 만들 때 사용하는 태그

<!-- 자바스크립트를 이용한 기능 구현에 주로 사용 -->
<button type="button"> 버튼 </button>

<!-- 폼의 전송 전송 기능 -->
<button type="submit"> 확인 </button>

<!-- 폼 작성 내용 초기화 기능 -->
<button type="reset"> 다시 쓰기 </button>

<button type="button"> vs <a href="#"> vs <input type="button">

1. <input type="button"> 보다 디자인에 있어서 매우 자유롭고, 태그 안에 다른 태그 삽입도 가능!

일반적인 디자인들을 모두 적용할 수 있어서, 배경에 이미지로 넣을 수 있다.

 2. <a> 태그는 문서간의 연결이 주된 목적이기 때문에 링크에만 사용하고, 기능 구현은 button으로 하는 것이 시멘틱한 마크업!

<textarea> - 여러 줄의 텍스트를 입력받을 때 사용하는 태그

<label for="field"> 자기소개 </label>
<textarea id="field" placeholder="자기소개를 입력하세요"></textarea>

추가 attribute

rows="30" : 양식의 줄 수 (css로 조절 가능)

maxlength="500" : 입력 가능한 최대 문자 수

autofocus : 페이지가 로드될 때 자동으로 포커스시킬 때 사용

placeholder="자기소개" : 기본적으로 안내 문구 제공

disabled : 양식을 비활성화할 때 사용

<select> - 옵션으로 드롭 다운 목록을 작성하는 태그

<form action="" method="GET">

  <label for="hobby">취미</label>
  
  <select name="hobby" id="hobby">
    <option value="design"> design </option>
    <option value="photograph"> photograph </option>
    <option value="videoEditing"> videoEditing </option>
  </select>
  
  <input type="submit" />
</form>

추가 attribute

multiple : 여러가지 옵션을 선택할 수 있게 해줌

size : 한 번에 볼 수 있는 행의 개수

disabled : 선택 메뉴를 비활성화