1_HTML

# 1. HTML attribute

1) Form

유저가 입력한 데이터를 수집하는 태그

<form action="/dropdown.html" method="post">
</form>

action attribute(속성): form을 전송할 URL을 입력한다.

2) Input

• Text

<form>
    <label for="meal">What do you want to eat?</label>
    <input type="text" name="meal" id="meal">
</form>

What do you want to eat?

label의 for값과 input의 id값이 일치해야 한다.

• Radio

<form>
    <input id="yes" name="pizza" type="radio" value="yes">
    <label for="yes">Yes</label>
    <input id="no" name="pizza" type="radio" value="no">
    <label for="no">No</label>
</form>

Yes No

name값이 같으면 중복 선택이 불가능하다.
아래의 예시는 name값을 다르게 입력한 경우이다.

Yes No

• Number

<form>
    <label for="cheese">How many cheese :</label>
    <input id="cheese" name="cheese" type="number" step="1" min="1" max="10">
</form>

How many cheese :

step으로 이동 간격이 조절 가능하다.
min과 max로 최소값과 최대값을 지정할 수 있다.

• Checkbox

<form>
    Choose your pizza toppings :
    <label for="olive">olive</label>
    <input id="olive" name="topping" type="checkbox" value="olive">
    <label for="shrimp">shrimp</label>
    <input id="shrimp" name="topping" type="checkbox" value="shrimp">
</form>

Choose your pizza toppings : olive shrimp

• Dropdown

<form>
    <label for="lunch">What's for lunch?</label>
    <select id="lunch" name="lunch">
    	<option value="선택하세요">선택하세요</option>
            <optgroup label="Italian">		
            <option value="pizza">pizza</option>
            <option value="pasta">past</option>
            </optgroup>
            <optgroup label="korean">			
            <option value="galbi">galbi</option>
            <option value="japchae">japchae</option>
            </optgroup>
    </select>
</form>

• Datalist

<form>
    <label for="dessert">Choose dessert </label>
    <input list="desserts" name="dessert" id="dessert">
        <datalist id="desserts">
            <option value="coffee">coffee</option>
            <option value="cake">cake</option>
            <option value="juice">juice</option>
    </datalist>
</form>

Input list의 값과 Datalist id의 값을 일치시키면 텍스트를 클릭해도 체크가 된다.
datalist는 dropdown과 달리 option값이 없을 경우 유저가 직접 입력할 수 있다.

• Textarea

<form>
  <textarea id="blog" name="blog" rows="1" cols="20">
  </textarea>
</form>