[HTML] <input> 태그로 버튼(button) 생성하기

지난 번에는 <form> 태그와 <input> 태그로 

입력받은 데이터를 서버로 전송하는 버튼을 만드는 방법을 알아보았습니다.

[HTML] 입력받은 데이터 서버로 전송하기 - submit

이번에는 입력 받은 데이터를 서버로 전송하지 않고, 

다른 스크립트를 실행할 수 있는 버튼을 만드는 방법을 알아보도록 하겠습니다.

<input> 태그로 버튼(button) 생성하기

지난번 포스팅에서 <input> 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보았습니다.

text 일반 텍스트를 입력받을 수 있습니다.

password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.

submit <form> 태그 내에 입력된 데이터를 서버로 전달해 줍니다.

button 버튼을 생성해 줍니다.

checkbox 체크박스 형태의 입력을 받을 수 있습니다.

radio 라디오 버튼 형태의 입력을 받을 수 있습니다.

reset <form> 태그 안의 사용자 입력을 초기화 합니다.

버튼을 생성하기 위해서는 이 중 ‘button’이라는 키워드를 사용합니다.

1. 버튼 생성

<input> 태그의 ‘type’ 속성을 ‘button’이라고 지정해주기만 하면 일단 버튼이 생성됩니다.

2. 버튼에 TEXT 표시

버튼에 ‘value’ 속성을 지정해주면, value에 지정된 값을 버튼에 표시해 줍니다.

3. 버튼을 클릭하면 실행할 이벤트 지정하기

버튼을 클릭하면 실행할 이벤트를 지정하기 위해 ‘onclick’ 이라는 이벤트명을 사용하였습니다.

여기서는 버튼을 클릭하면 ‘안녕하세요’라는 메시지를 보여주는 팝업이 뜨도록, 

‘onclick’ 속성에 스크립트를 입력합니다.

버튼을 클릭하면 ‘onclick’ 속성에 지정된 스크립트가 실행되게 하는데, 

이 안에는 주로 javascript가 들어가게 됩니다. 

이 부분은 javascript를 따로 공부해야 합니다.

여기까지, <input> 태그를 활용하여 화면에 버튼을 표시하고, 

버튼을 클릭하여 동작하게 하는 방법을 알아보았습니다.