HTML 폼(form)

폼(form)

웹페이지에서 검색을 하거나 ID와 password 입력하는 란을 제공하는데 이렇게 무언가를 입력하게 하는 페이지를 만들기 위해서 폼을 사용한다.

 

폼에는 데이터를 전송하는 방식이 GET 방식과 POST 방식이 존재한다.

GET 방식은 내가 입력한 입력값에 의해 보내진 데이터가 URL의 일부(파라미터)로 주소표시줄에 나타나고, 

POST 방식은 URL에 보내진 데이터가 표시되지 않는다.

쉽게 말하면, GET 방식은 우리가 네이버나 구글에서 검색할 때를 생각하면 된다.

네이버에 아무거나 검색을 하면 주소표시줄이 변하고, 입력값에 따라 주소는 조금씩 달라진다.

 

만약 내가 로그인을 했는데 로그인 데이터가 주소표시줄에 나오면 어떻게 될까? 그러면 내 정보에 대한 보안이 굉장히 취약할 수 밖에 없다. 주소표시줄에 나와있는 것을 복사하면 되니.. 위험한 상황이 올 수도 있다. 이런 경우에, POST 방식을 사용한다. 내가 ID 와 password를 넣으면 그 ID 와 password 에 대한 정보가 주소표시줄에 나타나지 않고 로그인이 되는 걸 볼 수 있다. 네이버에서 로그인을 해보면 금방 알 수 있다. 로그인 상태가 되도 네이버의 첫 페이지는 www.naver.com 으로 되어있는걸 볼 수 있다.

 

폼(form) 서식

HTML 에서 폼을 쓸때는, 

<form action='URL' method ="GET">

 

action 에는 데이터를 처리할 URL을 지정한다. 

method 는 GET 방식으로 할지 POST 방식으로 할지 지정한다.

이 명령어는 이제 상대방이 입력을 했을때, 어디로 보낼지를 정하는것인데 현재 입력할곳과 클릭할곳이 없다.

입력할곳과 클릭할곳을 지정해야한다.

 

폼(form) 요소

많은 요소들이 있지만 input type 중 몇가지만 소개한다.

만약에 웹페이지에 위와 같은 양식을 만들어야 한다고 하면,

네모칸에 입력이 되야하고 성별은 한개만 선택이 되고

직업란은 여러가지 선택이 가능해야 하고, 보내기는 버튼으로 해야한다.

 

이런 입력값들을 만드는게 input type 속성이다.

위에 예제를 가지고 하나씩 살펴보자.

 

- Input type : text

<input type ="text"> 

위에 같은 이름 옆에 네모칸에 한줄의 입력값을 쓰게끔 만든다.

 

코드) <p> 이름 : <input type ="text", name="username"></p>

 

 

 

- Input type : password

<input type = "password">

일반적으로 비밀번호는 별표로 표시하게 해야하는데, password 를 통해서 만들수 있다.

 

코드) <p> 비밀번호 : <input type="password", name="password"></p>

 

이런식으로 표현이 된다.

 

 

-Input type : radio

radio 는 여러 항목중에서 한개만 선택하도록 만든다.

 

코드) <p>성별 : <input type ="radio" name="sex" value="남자">남자

<input type = "radio" name="sex" value="여자"> 여자 </p>

 

 

 

-Input type : checkbox

이번엔 여러항목 중에서 여러개를 선택하도록 만들려고 한다. 그러면 checkbox 를 사용하면 된다.

 

코드) <p>직업 : <input type="checkbox" value="학생">학생 input type="checkbox" value ="기타">기타 </p>

 

 

-Input type : button

버튼을 만든다. 버튼을 누르면 수행을 한다.

 

코드)<p><input type = "button"  value='보내기'></p>

 

 

button 은 button 태그가 따로 있어서 그걸 사용하면 더 편리하다.

 

지금까지 한 것은 정말 기초적인 내용이고 나중에 좀 더 정리하기로~!