HTML form 관련 요소

form : 사용자에게 정보를 입력하게 하는 것 (대화형)

action

• form data를 서버로 보낼 때 해당 데이터가 도착할 url
  - 절대경로/ 상대경로
  

method

• post : url에 정보가 추가 되지 않음
• get : url에 정보가 추가 됨 ex) 검색
• dialog

label

• form 양식에 이름을 붙임
• 속성

- for : id를 찾아 가리킴

<label for="box"> text </label>
<input type=" " id="box">

- label tag로 input을 감싸면 for 이나 id 사용하지 않아도 됨

<p>
   <label> 
   text
   <input type="box">
   </label>
</p>

input

• name : 서버에 전송하는 데이터의 폼을 구분
• id : 전체 데이터 중 구분

fieldset

• form 요소를 group하는 요소
• block 요소
• 속성

- legend (범례) : 항상 fieldset의 첫번째 자식이어야 함

<fieldset>
  <legend> group_name </legend>
  
  <label for="name"> name : </label>
  <input type="text" id="name">
</fieldset>

group_name name :

select

• 메뉴를 제공 (drop box)
• id와 name을 반드시 명시
• 속성

- option 
	- value를 주면 다른 value 값으로 전송
    - value값이 필요 없을 땐 "blank"로 작성
    
- optgroup

예시)

주문 : 핫 아메리카노 아이스 아메리카노

<form action="  " method=" " id="drink">
    주문 : <input type="text" name="name"> 
    <input type="submit">
</form>

<select name="order" form="drink">
    <option value="americano">핫 아메리카노</option>
    <option value="caffe latte">아이스 아메리카노</option>
</select>

예시2)

핫 아메리카노 아이스 아메리카노 자몽에이드 레몬에이드

<select>
    <optgroup label="커피">
        <option value="hot americano">핫 아메리카노</option>
        <option value="ice americano">아이스 아메리카노</option>
    </optgroup>
    
    <optgroup label="에이드">
        <option value="grapefruit ade">자몽에이드</option>
        <option value="lemone ade">레몬에이드</option>
    </optgroup>
</select>

textarea

• 여러줄의 text를 입력 할 수 있음 ex)댓글
• 속성

- cols : 가로 크기
- rows : 세로 크기

> 하지만, 크기 등 모양은 CSS에서 정하는 게 좋다.

<textarea cols="50" rows="10"></textarea>