반응형
<Button> 태그가 아니더라도 간단한 버튼의 경우는
< input type ="button"> 속성으로 만들 수 있습니다.
이렇게 만들어진 버튼은 자바스크립트 코드를 호출하여 동작을 실행할 수 있습니다.
예를 들자면 하기와 같습니다.
1. Click+me라는 버튼을 만들고...
2. 버튼을 클릭하면 자바스크립트 함수에 의해서 팝업창이 호출된다.
위와 같이 간단한 동작에서는 <input type="button">을 활용해 보면 좋겠습니다.
그럼 예제를 만들어 볼까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="Click+me" onclick="alert('Button clicked');">
</body>
</html>
<input type="button"> 속성을 줍니다.
value는 버튼에 표기될 내용입니다.
onclick 은 버튼이 클릭되었을 때, 동작을 나타내는 속성을 의미하며
여기서는 자바스크립트 의 alert() 함수를 호출하고 있습니다.
input type="button" 예제를 만들어 보았습니다.
감사합니다.
자바스크립트 팝업창 함수
자바스크립트 함수 중 기본 팝업창을 띄우는 alert() 함수 입니다. 간단한 팝업 메뉴를 보여줄 때 사용하면 되겠습니다. 사용법 입니다. 자바스크립트 파일을 만들고, 하기처럼 코딩 합니다. 단 한
soo0100.tistory.com
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
| input type="week" 주 제한 하기 (4) | 2023.04.22 |
|---|---|
| 파일 첨부 form (2) | 2023.04.20 |
| submit 이미지 버튼 만들기 (2) | 2023.04.17 |
| input type="month" 월 제한 하기 (1) | 2023.04.15 |
| input type="date"날짜 제한 하기 (2) | 2023.04.14 |
댓글