input 태그

• text : 일반적인 텍스트를 입력받을 때 사용
• password : 노출되지 않아야하는 비밀번호, 개인정보와 같은 텍스트를 입력받을 때 사용
• sumit : form의 input 태그들의 data들을 전송할 때 사용
• button : 버튼이 필요할 때 사용
• color : 색상 값을 고를 때 사용
• checkbox : 여러개를 중복하여 선택할 수 있는 체크박스가 필요할 때 사용
• radio : 여러개중 유일하게 하나를 선택할 수 있는 체크박스가 필요할 때 사용 (단, name이 동일하여야 합니다. )
• range : 일정 범위 내의 값을 지정할 때 사용

    <input id="userId" type="text" placeholder="아이디"><br />
    <input id="password" type="password" placeholder="비밀번호"><br />
    <input type="checkbox" name="" id="save"><br />
    <input type="range" name="" id="" value="10">
    <input type="color" name="" id="" value="#F0FF0F">
    <input type="button" value="로그인">

label 태그

• for 속성 : input 태그의 id와 맞춰주면 1:1로 매핑이 되며, label 태그를 클릭할 경우 input 태그에 focus가 잡힌다.

    <label for="userId">아이디 : </label><input id="userId" type="text" placeholder="아이디"><br />
    <label for="password">비밀번호 : </label><input id="password" type="password" placeholder="비밀번호"><br />
    <label for="save">저장</label><input type="checkbox" name="" id="save"><br />

select 태그

• ComboBox를 만들 때 사용하며, Item은 option 태그를 통하여 표현할 수 있다

<select name="" id="">
      <option value="">바나나</option>
      <option value="">우유</option>
      <option value="">사과</option>
</select>

option 태그

• select 태그의 자식, ComboBox의 Item을 구성하는 태그

      <option value="">바나나</option>
      <option value="">우유</option>
      <option value="">사과</option>

optgroup 태그

• ComboBox의 Item인 option 태그를 상위 그룹으로 묶어준다 상위 그룹명을 label 속성에 입력하여 준다.

    <select name="" id="">
      <optgroup label="과일"> 
        <option value="">바나나</option>
        <option value="">사과</option>  
      </optgroup>
      <optgroup label="유제품">
        <option value="">우유</option>
      </optgroup>
    </select>

textarea 태그

• 여러 줄의 텍스트를 입력받을 때 사용되며, 입력가능한 너비와 줄은 col, row 속성을 이용하여 설정이 가능합니다.
• 태그의 내용은 한줄 개행까지는 무시하나, 그 이후의 들여쓰기나 개행은 모두 내용에 포함되니깐 주의하여 사용하여합니다.

    <textarea name="" id="" cols="30" rows="10">아아</textarea>

contenteditable 속성

• html5부터는 contenteditable 속성을 주게 되면, 태그의 content를 수정할 수 있다. 따라서 텍스트가 입력이 가능하다고해서 무조건 textarea 또는 input:text 태그가 아니라는 것을 명심