HTML 17단계 - 폼(Form) 5탄

안녕하세요

HTML 17단계 폼(Form) 5탄 시간이 돌아왔습니다.

저번 시간에는 폼(Form) 4탄을 알아봤는데요 혹시나 잊지는 않으셨겠죠?~

오늘도 화이팅하며, 부담없이 봐주시면 감사하겠습니다.

자 그럼 HTML 17단계 폼(Form) 5탄을 시작해볼께요~

 

1. 리셋버튼(ResetButton)

 

리셋버튼(ResetButton)는 폼에 입력한 값을 취소하고 초기화를 시켜줄때 사용합니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<form name="input" method="post" action="">

  <input type="text" name="member_name" maxlength="10">

  <input type="reset" value="초기화">

</form>

 

"초기화"를 클릭시 폼에 입력한 값을 취소하고 초기화가 된것을 확인하실수 있습니다.

 

2. 전송버튼(SubmitButton)

 

전송버튼(SubmitButton)는 폼을 지정한 페이지로 전송시켜주는 기능을 합니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<form name="input" method="post" action="">

  <input type="text" name="member_name" maxlength="10">

  <input type="submit" value="전송">

</form>

 

위의 예문 소스에서는 action 속성을 지정하지 않았기 때문에 전송되지는 않습니다.

action의 속성값을 지정하면 정상적으로 폼값이 전송되는것을 확인하실 수 있습니다.

 

3. 이미지타입(ImageType)

 

이미지타입(ImageType)은 전송버튼(SubmitButton)의 역활을 하면서 이미지로 출력되는 버튼입니다.

 

자 그럼 간단한 예문 소스를 살펴보겠습니다.

<form name="input" method="post" action="">

  <input type="text" name="member_name" maxlength="10">

  <input type="image" value="submit.gif">

</form>

 

위의 예문 소스에서는 전송버튼이 아닌 일반적인 버튼을 이미지로 처리할려면 <img> 태그를 사용하고 이를 자바스크립트를 이용하여 액션을 지정해야 합니다.

 

 

어떠신가요? 이해가 잘 되시나요?

항상 드리는 말씀이지만 반복해서 연습하셔야 된다는건 필수인거 아시죠?ㅎ

다음시간에는 폼(Form) 6탄에 대해서 포스팅 해볼껀데요. 많은 응원과 기대해주세요. 감사합니다.