안녕하세요 SsunDev입니다.
저는 초등학생때 하교 후 문방구에서 쪼그려 앉아 메탈슬러그나 삼국지 야구왕등의 게임을 자주 했습니다.
게임기의 그 빨간 초록 파란 버튼을 검지 중지 약지 세개로 정말 빠르게 연타도하고 필살기같은걸 쓸땐 정말 세게 눌렀는데 가만 생각해보면 그 게임기의 버튼은 왜 고장이 잘 안나고 잘 버텼는지 지금 생각해보면 신기합니다.
오늘 만들어볼것은 이 <버튼>입니다.
<버튼>을 뙇 누르면 데이터가 전송이되든 페이지가 바뀌든 아니면 핵을발사를하든 하는 뭔가를 만들어야겠죠?
그 뭔가를 배워보겠습니다. Let go~
역시나 산뜻하게 html_important05.html과 향상된 html 뼈대를 박고 시작하겠습니다.
자 이번에 배워볼 코드는 바로
<form></form> 테그입니다.
와 SsunDev <form> 미쳤다.
폼테그는 어떤 형태가 있는게 아닐뿐더러 꾸며줘서 어떤 모양을 낼 수도 없는 코드입니다.
단지 내가 이 폼 테그부터 폼테그 안에 있는 영역까지의 데이터를 전송하겠다 하고 경계선을 만들어주는 코드입니다.
따라서 어떤 버튼을 누르면 <form> id, password, hp, adress ... </form>하고 이 안에 영역의 데이터만 전송해주게 됩니다. 말이 좀 어렵죠?
하여튼 데이터를 보내주기 위해서 영역을 지정해 주기 위해 폼 테그를 사용한다! 입니다.
일단 한번 만들어보겠습니다.
이렇게 폼 테그를 정의해주고 이 안에 두가지 속성을 정의해주겠습니다.
action="" 과 method="" 입니다.
action=""은 폼테그에서 데이터를 전송했을 때 받을 주소를 적는곳 입니다.
보통 나중에 배울 서버로 전송하기때문에 서버의 주소를 여기에 적어주면 됩니다.
여기서 주소라 함은 저번에 배운 절대경로와 상대경로 이런겁니다.
나중에 서버로 주소를 보내게 되는데 이 서버도 결국 프로젝트 내에서의 어떤 부분이기 때문에 절대경로와 상대경로를 써서 기입해주게 됩니다. 빨리 서버단으로 넘어가고싶군요 지금 뭔말인가 싶어도 그냥 넘어가셔도 무방합니다.
method=""에는 get과 post 두가지만 정의해줄 수 있습니다.
지금 설명드려도 이해하기 어렵고 나중에 서버를 만들면서 자연스럽게 알게되니 설명만 들으시고 넘어가셔도 됩니다.
get은 주소에 데이터를 넣어서 보내는 방식이고 post는 바디(추후설명)부분에 데이터를 넣어서 보내준다 정도만 알아두시고 정말 큰 차이는
get은 주소에 나타내주니까 데이터를 누구나 볼 수 있겠구나 요거 살짝 위험할지도? 정도고
post는 숨은 영역에 데이터를 보내주니까 상대적으로 안전하긴하네. 정도만 알아두시면 됩니다.
자~ 이론이 참 길었습니다.
한번 정의해 보겠습니다.
action="" 부분에 html03.html 이라고 넣고
method="" 부분에 get 이라고 넣어보겠습니다.
자 이렇게 넣었습니다.
해석해보자면 우리가 만들었던 html03.html페이지로 전송하겠다!, 보내는 방식은 get 방식이다!
라고 선언한겁니다.
지금 현재 페이지 html_important05.html 이 존재하는 폴더에 html03.html 파일이 같이 존재하기때문에 바로 파일명으로 저렇게 기입해도 되고,
./ 이게 현재 페이지를 나타낸다고 했죠? ./html03.html 이렇게 적으셔도 됩니다.
보통은 서버로 보내는데 다른 페이지를 열 때도 사용됩니다.
자 이 폼테그 사이에
<button>발작 버튼!</button> 하고 만들어보겠습니다.
자 이다음에 button 안에 type="submit" 이라고 추가해보겠습니다.
자 버튼을 만들었습니다. 그럼 바로 alt + B 눌러보시죠!
간지나는 버튼이 만들어졌습니다 한번 눌러볼까요??
이렇게 간지나는 페이지가 나와버렸습니다 후...
이렇게 폼테그로 영역을 잡아서 사용할 수 있습니다.
폼테그 쉽죠?
자 그러면 방금 위에서 사용한 button 테그에 대해서 알아보겠습니다.
<button>버튼이름</button> 하고 버튼을 만들고 이름도 지어줄 수 있습니다.
그 안에 속성으로 type="" 하고 정해줄 수 있는데 여기에는 submit, button, reset 하고 세가지를 정의해 줄 수 있습니다.
submit은 방금과 같이 전송입니다. <form> 테그 내부의 데이터들을 취합해서 특정 영역으로 전송시켜줍니다.</form>
reset은 초기화입니다. <form>테그 내부의 데이터를 기입하는곳들을 초기화시켜줍니다.</form>
button은 그냥 버튼(?)입니다. 팝업창, 경고창등을 실행시켜줍니다.
말 그대로 어떤 데이터들을 전송해주거나(submit), 기입한 데이터들을 초기화해주거나(reset), 버튼(button) 역할을 합니다.
이 버튼 역할이란 새로운 팝업창을 뜨게하거나 하는 역할을 합니다.
중요한건 submit, reset은 위에 form 테그 안에 있어야 이 버튼이 form테그에서 유효하게 작동을 한다는겁니다.
이렇게 폼 테그 밖으로 빼버리면 아무리 눌러도 작동을 하지 않습니다
버튼과 폼 이제 이해 하시겠죠??
다음 시간에는 이 <form> 테그 안에 채워줄 데이터를 기입하는곳들에 대해서 배워보겠습니다.
html 정말 얼마 안남았습니다. css를 거쳐서 빨리 쿼리, 자바로 들어가고싶군요!
어때요 이런식으로 설렁설렁 배우다보니 할만하지 않나요??
css, java, sql 도 조금 어렵지만 이렇게 쉽게쉽게 풀어드리겠습니다!
오늘 배운
<form></form> :
<button></button> :
테그에 대해서 여러분의 생각을 정리해서 댓글로 남겨주시면 아 모르겠다 ㅋㅋ 공부해주세용!
