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

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

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

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

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

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

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

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

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

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

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

button 버튼을 생성해 줍니다.

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

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

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

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

1. 버튼 생성

See the Pen html example by anna (@hianna) on CodePen.

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

2. 버튼에 TEXT 표시

See the Pen html example by anna (@hianna) on CodePen.

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

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

See the Pen html example by anna (@hianna) on CodePen.

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

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

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

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

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

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

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

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