[HTML] submit 도 폼양식이다.

웹개발하면서 폼 전송할 때 버튼이야 다들 아시죠?

아마 이렇게들 쓰실 겁니다.

<input type=”submit” value=”저장”>

<input type=”image” src=”이미지경로” alt=”저장”>

<button type=”submit”>저장</button>

여러분은 이 submit 과 image도 양식으로 서버에 전송된다는 점은 알고 계셨습니까?

이녀석도 폼 전송시 서버에 키와 값이 전송됩니다.

그렇다면 어떤 시점에 키와 값이 전송됩니까?

바로 “submit 버튼을 누른 해당 버튼의 name 과 value” 가 서버로 전송됩니다.

간단하게 예를 들어보겠습니다.

<form action=”” method=”GET”>

    <input type=”submit” name=”goto” value=”가라!”>

</form>

이걸로 HTML 작성하고 띄워보시면 가라 라는 버튼이 보일겁니다. 누르세요.

그럼 html?goto=가라 라고 주소가 변할 겁니다.

좀 더 이해가기 쉽게 코딩해봅시다.

<form action=”” method=”GET”>

    <input type=”submit” value=”날 눌러봐”>

    <input type=”submit” name=”goto” value=”나도 눌러줘”>

</form>

각각의 submit 버튼을 누르면, 날 눌러봐를 클릭했을 경우 전송 결과는 그냥 ? 만 나오고 말 것입니다.

하지만 두번째 버튼을 누르면 goto=나도 눌러줘 라는 내용이 URL에 출력됩니다.

이제 감이 잡히셨습니까?

submit도 폼 양식이란 거.

그렇다면, input type=’submit’ 과 input type=’image’ 와, button type=’submit’ 이 셋다 submit 버튼인데

차이점이 뭐냐? 오늘 이 셋의 특징을 나열하겠습니다.

<form action=”” method=”GET”>

    <input type=”submit” name=”submit1″ value=”전송하기”>

    <input type=”image” name=”submit2″ src=”이미지경로” alt=”전송이라도 해보기”>

    <button type=”submit” name=”submit3″ value=”전송해봐”>전송하랑께</button>

</form>

input type=’submit’ 은 가장 단순한 전송 버튼입니다. name이 키면 value 는 값 겸 버튼 내용이 되겠습니다.

어떤 버튼을 눌렀는지는 알겠지만 따로 값을 전송하기엔 불편함이 있겠죠.

input type=’image’ 는 이미지 전송 버튼입니다. name 이 키지만 value는 무시됩니다. 그럼 어떤 값이 보내지나?

바로 이미지를 누른 좌표입니다. name.x=0&name.y=0 이런 식으로 뜰 것입니다.

코딩하다보면 쓸데없이 name 속성값 점 x 와 y 키가 나오는데, 원래 그렇게 나온다는 뜻이 되겠습니다.

button type=”submit” 은 좀 더 다양한 스타일을 줄 수 있는 전송 버튼입니다. input
type=’submit’ 과 달리 하위 요소에 인라인 요소가 허용되기 때문에 일부 글씨를 굵게 하거나, 색상을 입히거나, 이미지를 넣을 수 있습니다. 벨류값과 내용을 따로
넣을 수 있기 때문에 폼전송 구분을 할 경우 이 태그가 유용할 것입니다.

이런 submit 폼의 성질을 가장 잘 이용한 사례가 바로 ASP.NET Webform 입니다.

postback 방식으로 어떤 버튼을 누르냐에 따라 다시 현재 페이지로 되돌아오기 전 해당 버튼을 눌렀을 때 서버에서 대응을 하는 식으로 설계되어 비즈니스 CRUD 프로그램 개발에 각광을 받았죠.

어쨌든 이 submit. 폼전송 용도로만 쓰신 분에게 지금은 어쩌면 사용 용도에 따라 감이 잘 오기 힘들겠지만

이것도 폼 전송 요소로 유용하게 쓰일 날이 올 것입니다.

composite / 2013년 1월 9일 / 미분류
태그:, , , , , , , , ,

답글 남기기

Your email address will not be published / Required fields are marked *