form

<form>사용자가 입력한 정보를 서버로 전송해주는 태그

<form action="전송할 주소">
...
</form>

뒤에 <input type="submit">이란전송버튼이 나오는데 사용자가 이걸누르게 되면 정보들을 위에 있는 "전송할 주소"에 전송하게 된다.

input

<input>은 쉽게말하면 사용자와 상호작용할수있는 입력박스라고 생각한다.

input type

<input>의 많은 속성 중 type의 값을 정리해봤다.

<input type="text"> 
<input type="password">
<input type="submit">
<input type="button">
<input type="radio"> 단일선택만 가능
<input type="checkbox"> 복수선택 가능
<input type="checkbox">

이런 식으로 다양하게 정보를 입력할수있다.
그러나 이 상태에서 바로 전송할경우 웹페이지 입장에서는 의미없는 텍스트만 받게 된다.
그래서 어떠한 값으로 전송할지 정해야 하는데
name 이란 속성을 사용해서 정보들을 해당 값으로 연결시켜주면 된다.
만약 아래에 같이 로그인 상황이라고 한다면

<input type="text" name="id">
<input type="password" name="password">

이렇게 name을 쓰게 되면 아이디가 "hello", 비밀번호는 world 일 경우
id="hello" password="world"이렇게 연결되어 전송할 수 있게 된다.

raido, checkbox에서는 name으로 묶고 value으로 각각 해당 값을 입력해 주면 된다. 이런 식으로!

<h1>좋아하는 색상</h1>
    빨간색 : <input type="radio" name="color" value="red">
    파란색 : <input type="radio" name="color" value="blue">
    녹색 : <input type="radio" name="color" value="green">
<h1>좋아하는 과일(다중선택 가능)</h1>
    사과 : <input type="checkbox" name="fruit" value="apple">
    포도 : <input type="checkbox" name="fruit"  value="grape">
    바나나 : <input type="checkbox" name="fruit" value="banana">

좋아하는 색상

빨간색 : 파란색 : 녹색 :

좋아하는 과일(다중선택 가능)

사과 : 포도 : 바나나 :