-
HTML 기초 - 7 | form 태그프로그래밍 언어/HTML 2020. 5. 18. 01:57
Form 태그
이번 글은 form 에 대해서 알아볼 것이다. form 태그는 백엔드서버에 입력정보를 제출하는 역할을 한다.
우리는 웹페이지의 시각적인 부분인 프런트엔드를 배우고 있기 때문에 이번 글에서는 form 의 기능적인 부분에 대해서는 자세하게 다루지 않을 것이다. 그냥 이런 것도 있구나 하고 넘어가자. 이해를 못하는 게 당연한 파트이다.
(추후에 form 태그의 심화적인 내용을 다루는 글도 써보겠다.)
form 태그의 형태
<form action="URL" method="get" target="_blank"></form>
일반적인 form 은 위와 같은 형태를 가진다.
form 에서 사용할 수 있는 가장 기본적인 속성 몇 가지만 알아보자.
- action : form을 전송할 서버의 URL을 지정한다.
- method : form을 서버에 전송할 Http method 를 지정한다. ( GET / POST )
- target : action에서 지정한 URL을 여는 방법을 지정한다. ( _self / _blank 등 )
이러한 속성들을 이용해 form 태그는 서버에 정보를 전달한다. 그렇다면 form 태그가 전달할 정보를 사용자로부터 입력받는 태그도 있어야 하지 않겠는가?
이제 form 태그 안에서 정보를 입력받는 역할을 하는 input 태그를 알아보자.
Input 태그
위에서 설명했듯이 input 태그는 form 태그가 서버로 보낼 정보를 입력받는 태그이다.
input 태그의 기본적인 구조를 알아보자.
<form> <input type="text" name="q" placeholder="Enter the Text" /> </form>
위에서 보이듯이 input 태그는 여는 태그만 있는 태그이다. input의 모든 기능은 속성에 의해 결정되기 때문에 input의 기본적인 속성에 대해 알아보도록 하자.
- type : input의 타입을 지정한다.
- name : input을 식별하기 위한 이름을 지정한다.
- value : input의 초기값을 지정한다. (웹페이지가 열릴 때 초기값이 입력된 상태로 생성된다.)
- placeholder : input에 입력할 값에 대한 안내문을 설정한다.
- required : 해당 input을 필수 태그로 지정한다. (이 입력란을 입력하지 않으면 제출이 되지 않는다.)
- autofocus : 웹페이지가 로딩됨과 동시에 이 input으로 focus를 이동시킨다. (커서가 깜빡이는 상태가 된다.)
- patterns : 입력받을 내용에 대해 정규표현식을 사용한다.
이 중에서 type 속성은 input 의 타입을 지정하기에 아주 중요하다. 입력받는 데이터가 모두 다른 형태이기에 입력받고자 하는 데이터의 형태에 따라 알맞은 type 속성을 이용해야 한다.
input 태그에는 여러 가지 type 이 있는데, 그중 몇 가지를 알아보도록 하자.
type = "text"
<form> <input type="text" /> </form>
일반적인 문자를 입력받기 위한 input 형태이다.
type="password"
<form> <input type="password" /> </form>
비밀번호와 같은 가려야하는 문자를 입력받기 위한 input 형태이다.
type="radio", type="checkbox"
<form> <input type="radio" name="gender" />남 <input type="radio" name="gender" />여 </form> <form> <input type="checkbox" />1 <input type="checkbox" />2 <input type="checkbox" />3 </form>
체크할 수 있는 체크박스를 만든다. 이때 type="radio" 는 같은 name을 가진 버튼 중 한 가지만 선택할 수 있지만, type="checkbox" 는 여러 선택을 할 수 있다.
type="color"
<form> <input type="color" /> </form>
color 를 선택할 수 있는 형태의 input 이다.
type="range"
<form> <input type="range" min="0" max="100" step="1" value="50" /> </form>
범위를 설정할 수 있는 input 이다.
min 과 max 속성을 이용해 최솟값과 최댓값을 정하고, step 속성을 이용해 한 칸당 얼마씩 값이 올라가고 내려갈지 지정한다.
type="file"
<form> <input type="file" accept="image.*" multiple /> </form>
파일 업로드를 위한 input 형태이다. accept 속성을 이용해 업로드할 파일 형태를 지정하고, multiple 속성을 이용해 파일 다중 선택 가능 여부를 지정한다.
type="submit"
<form> <input type="text" /> <input type="submit" /> </form>
form 을 서버에 전송하기 위한 제출 버튼을 만든다. 물론 이 버튼이 없어도 Enter키 로 제출 가능하다.
Label 태그
label 태그는 input 태그의 양식에 이름을 붙여주는 태그이다. 그냥 양식 입력란만 있으면 사용자들이 그곳에 뭘 입력해야 할지 모르지 않겠는가? 이때 label 태그를 사용하면 사용자들이 쉽게 해당 input 의 용도를 알아챌 것이다.
<form> <label for="userID">ID</label> <input type="text" placeholder="Enter Your ID" id="userID" /> <label for="userPW">PW</label> <input type="password" placeholder="Enter Your Password" id="userPW" /> <input type="submit" value="LOGIN" /> </form>
위와 같이 label 에는 for 라는 속성이 있다. label 은 어떤 input 의 이름을 나타내야 하는지 알기 위해 input 태그의 id 를 이용한다. input 태그의 id 속성과 label 태그의 for 속성이 맞으면 그 둘이 서로 짝이 되는 것이다.
Select 태그
select 태그도 input 태그처럼 form 내에서 정보를 입력받을 때 사용하는 태그이다. 다만 미리 여러 정보를 나열해둔 다음 사용자가 선택하게끔 할 수 있는 태그이다.
<select name="city"> <option value="seoul">서울</option> <option value="busan">부산</option> <option value="ulsan">울산</option> </select>
select 태그 사이에 option 태그를 넣어 항목들을 만들어 두면 된다. 이때 option 태그의 value 값은 선택되었을 때 서버로 전송되는 값을 말하고, 태그 사이에 한글로 적힌 글자는 사용자에게 보이는 글자를 나타낸다.
구글 검색창 만들어보기
input 태그의 종류가 어마 무시하게 많지 않은가? 심지어 저게 다가 아니다. 그래도 너무 걱정하지 말자. 나도 다 못 외운다. 항상 쓰는 것만 사용하고, 추가로 필요한 게 있으면 검색하면 다 나온다. 굳이 외우려고 노력하지 말자.
이번 글을 마무리하기 전에 form 으로 만들어 볼 수 있는 재미난 예제 하나만 간단하게 만들어보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Google Search</title> </head> <body> <form action="https://www.google.com/search" target="_blank" method="get"> <input type="text" name="q" placeholder="Google Search" /> <input type="submit" value="SEARCH" /> </form> </body> </html>
어떤 원리인지 간단하게 알아보자.
우선 구글 검색창에서 뭔가를 검색해보자. 주소창에 "https://www.google.com/search" 라는 글자가 보이고 막 엄청 긴 문자열들이 나열되어있다. 그중 "q=검색어" 이라고 되어있는 부분이 검색어를 입력받은 부분이다.
<form action="https://www.google.com/search" target="_blank" method="get">
위의 코드에서 우리의 form 은 "https://www.google.com/search" 으로 form 의 정보를 전송할 것이다.
<input type="text" name="q" placeholder="Google Search" />
그리고 form 태그 안의 input 태그가 검색어를 입력받을 것이다. 이때 input 에서 name 을 q 로 지정했다. 이런 상태로 form 이 정보를 보내게 되면 form 의 action 경로인 "https://www.google.com/search" 뒤에 '?q=검색어' 의 형태로 연결되어 서버로 전송될 것이다. 그러면 마치 구글 창에서 검색을 한 것과 비슷한 효과를 만들어 낼 수 있을 것이다.
뭔 소린지 하나도 모르겠는 거 다 이해한다. 그냥 베껴 적어보고 "재밌네" 정도의 반응만 보이면 된다. 흥미를 가지는 게 제일 중요하다. 뭔가 더 꾸며보고 싶다면 지금까지 배웠던걸 이용해서 여러 가지를 더 꾸며보는 것도 좋다고 생각한다.
절대로 어려워 보인다고 낙심하지 말자. 이번 파트는 그냥 넘어가는 파트라고 생각하자.
다음 글에서는 아무런 의미가 없는 태그인 div 와 span 에 대해 알아보도록 하자.