[HTML - 8] input의 종류

input 태그 말고도 입력에 대한 태그들도 있습니다. 자주 쓰이는 태그에 대해서 알아볼까 합니다!

1. select (선택 입력)
2. textarea (문장 입력)
3. button (button)
4. submit (전송 입력)
5. fieldset (필드셋)

---

select (선택 입력)

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며,  그중에서 옵션만을 입력받을 수 있습니다.

option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시합니다.

<select name="fruit">
    <option value="apple"> 사과
    <option value="orange" selected> 귤
    <option value="strawberry"> 딸기
    <option value="peach"> 복숭아
</select>

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있습니다.

---

textarea (문장 입력)

textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있습니다.

<textarea name="message" rows="5" cols="30">
    여기에 적으세요.
</textarea>

rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있습니다.

---

submit (전송 버튼)

<input>태그의 type 속성값을 "submit"으로 설정하면,

사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있습니다.

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미합니다.

이러한 폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있습니다.

<form action="/examples/media/request.php">
    어릴 때 자신의 별명을 적어주세요 :
    <input type="text" name="nickname" value="별명">
    <input type="submit" value="전송">
</form>

---

fieldset (필드셋)

fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 합니다.
legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타냅니다.

<form>
    <fieldset>
        <legend>입력 양식</legend>
        이름 :
        <input type="text" name="username">
        이메일 :
        <input type="text" name="email">
        <input type="submit" value="전송">
    </fieldset>
</form>

---

HTML5에서 추가된 다양한 타입의 input 요소

1. datalist 요소
2. keygen 요소
3. output 요소