Wednesday_May_13
.
.
.

<form>

form 태그의 목적은
사용자가 정보를 입력하여 보낼 수 있도록 하는 것이다.

form의 속성(attribute)으로는 action과 method가 있다.

action은 form의 정보가 어디로 갈지 결정한다.
method는 form의 정보를 어떻게 전송하고 처리할지 결정한다.

<form action="/example.html" method="POST">
</form>

위의 코드를 보면 action 속성을 이용해 form의 정보가 "/example.html"로 가고,
method 속성을 이용해 form의 정보가 "POST" 방식으로 전송된다.

<input>

input 태그는 사용자가 정보를 입력 할 수 있는 필드를 추가해주고
닫는 태그가 없다.

type 속성을 이용해 선택한 필드로 설정할 수 있다.

!!! 여기서부터는 모두 input 태그의 속성들이다 !!!

type="text"

텍스트 입력을 위한 필드이다.

<form action="/example.html" method="POST">
  <input type="text">
</form>

코드가 너무 길어서 form 태그는 이제 생략을 하겠다.

type="password"

텍스트 필드와 비슷한데, 말 그대로 패스워드를 입력할 때 쓰인다.
여기에 입력되는 모든 텍스트는 검은 점으로 표시된다.
브라우저마다 다르겠죠..??

<input type="password">

type="number"

숫자 입력을 위한 필드이다.

<input type="number">

type="range"

숫자 범위를 선택할 수 있는 슬라이더 필드이다.

<input type="range">

그냥 쓰게 되면 기본값으로 많이 유연하지만,
다른 속성을 줌으로써 좀 더 격(?) 있게 사용할 수 있다.

min & max & step

슬라이더의 최솟값, 최댓값, 한 칸의 크기

  <input type="range" min="0" max="5" step="0.5">

0부터 5까지의 슬라이더이고 한 칸에 0.5라는 크기를 가진다.
마우로 이동시켜보면 더 쉽게 이해가 갈 것이다.
참고로 step 속성을 안 주게 되면 기본값으로 1이 적용된다.

Velog가 뭔가 이상하다 ㅋㅋㅋ 테스트는 각자 컴퓨터에서 해주세요🙏

type="checkbox"

여러 옵션(?)을 선택할 수 있게 해주는 다중 체크 박스라고 생각하면 된다.

<input type="checkbox">pizza
<input type="checkbox">chicken
<input type="checkbox">hamburger

pizza chicken hamburger

type="radio"

하나의 옵션만 고를 수 있다.

<form action="/example.html" method="POST">
  <input type="radio" name="food" id="pizza" value="pizza"><label for="pazza">pizza</label>
  <input type="radio" name="food" id="chicken" value="chicken"><label for="chicken">chicken</label>
  <input type="radio" name="food" id="hamburger" value="hamburger"><label for="hamburger">hamburger</label>
</form>

pizza chicken hamburger

이렇게 코드가 긴 이유는 사실, 원래 위의 checkbox를 할 때 처럼
input만 줘서 했었는데 Velog 사이트 문제인진 몰라도 하나의 선택이 아니라
다중선택이 되었다..ㅠ
그래서 그냥 사이트에 나와있는 예제를 따라 복붙을 했다.
나중에 label에 대해서도 작성을 해야겠다👍