HTML 폼 버튼 — input button · onclick · window.open 완전 정리

 

 

Web Development · HTML Form Button

HTML 폼 버튼 —
input · onclick · window.open 완전 정리

버튼 클릭으로 액션 트리거 + 새 창 열기 자바스크립트 첫걸음

시작 오늘 분석할 코드

버튼을 클릭하면 새 창이 열리는 코드. HTML과 자바스크립트가 처음 만나는 지점이고, onclick이라는 이벤트 속성을 통해 둘이 연결된다.

<form> <input type="button" value="새 탭 열기" onclick="window.open()"> </form>

실제 출력 결과

용어 용어 정리

input다용도 입력 요소 (빈 태그)

type="button"클릭형 버튼 모드

value버튼에 표시될 글자

onclick클릭 시 실행될 코드 지정

window브라우저 창 객체

window.open()새 창/탭 열기 메서드

---

1 <input type="button"> — 다재다능 입력

<input>은 type 속성에 따라 완전히 다른 모습이 되는 신기한 태그다. type을 "button"으로 주면 버튼이 된다.

※ 같은 input 태그가 type 하나로 텍스트 입력란, 비밀번호 입력, 체크박스, 라디오, 색상 선택, 날짜, 슬라이더, 파일 업로드, 버튼이 모두 된다.

type	모습
text	일반 텍스트 입력란
button	일반 버튼 (이번 코드)
submit	폼 제출 버튼
reset	폼 초기화 버튼
image	이미지 버튼

---

2 input button vs <button> — 두 종류의 버튼

버튼은 사실 두 가지 방식으로 만들 수 있다. 둘은 비슷하지만 차이가 있다.

<input type="button">

value 속성에 텍스트
닫기 태그 없음
HTML 안에 다른 요소 X
옛날 방식

<button>...</button>

텍스트는 태그 사이에
닫기 태그 있음
아이콘·이미지 등 포함 가능
현대적 권장

<!-- 옛날 방식 --> <input type="button" value="버튼"> <!-- 현대 방식 --> <button>버튼</button> <button><img src="icon.png"> 아이콘 버튼</button>

※ 새로 작성하는 코드는 <button>이 권장된다. 단 버튼이 폼 안에 있고 type 미지정 시 자동으로 submit이 되니 명시적으로 type="button"을 주는 게 안전.

---

3 onclick — HTML과 JavaScript의 만남

onclick은 "이 요소가 클릭될 때 실행할 자바스크립트 코드"를 적는 속성이다. 이 한 줄로 HTML이 인터랙션 가능한 페이지가 된다.

onclick="window.open()" │ │ │ └─ 클릭 시 실행될 JS 코드 └─ 이벤트 이름 (on + click)

사용자가 버튼 클릭

↓

브라우저: click 이벤트 발생

↓

onclick 속성 값 실행

↓

window.open() 호출 → 새 창

---

4 다양한 이벤트 속성

onclick은 시작일 뿐. 다양한 사용자 동작에 반응할 수 있다.

속성	발생 시점
onclick	요소 클릭
onmouseover	마우스 올림
onmouseout	마우스 벗어남
onkeydown	키 누름
onchange	값 변경 (input 등)
onfocus	포커스 받음
onsubmit	폼 제출 시
onload	페이지/이미지 로드 완료

반응형

---

5 window.open() — 브라우저 객체 메서드

window는 브라우저 창 자체를 가리키는 자바스크립트 객체다. 모든 웹페이지에 자동으로 존재. open()은 그 객체의 메서드(함수)로, 새 창을 연다.

window.open() │ └── 메서드 이름 (열다) └── 객체 이름 (브라우저 창) → "브라우저야, 창 하나 열어라"

window.open()의 인자 — 더 정밀한 제어

window.open(URL, 창이름, 옵션) 예: window.open("https://google.com", "_blank") window.open("page.html", "popup", "width=400,height=300")

인자	역할	예시
URL	열 페이지 주소	"https://example.com"
창 이름	창 식별자	"_blank", "popup"
옵션	창 크기·기능	"width=400,height=300"

※ 모든 인자 생략 시(이번 코드처럼 window.open()) → 빈 페이지가 새 창으로 열린다.

---

6 인라인 vs 분리 — onclick 작성 방식

onclick에 코드를 직접 적는 것은 인라인 이벤트 핸들러다. 간단할 땐 편하지만 코드가 길어지면 읽기 어려워진다.

인라인 (이번 코드)

onclick="window.open()"
HTML과 JS 섞여 있음
간단할 때만
유지보수 어려움

분리 (현대적)

addEventListener 사용
HTML과 JS 분리
여러 핸들러 등록 가능
모던 표준

<!-- 분리 방식 (권장) --> <button id="myBtn">새 탭 열기</button> <script> document.getElementById("myBtn") .addEventListener("click", function() { window.open(); }); </script>

---

7 자주 하는 실수

실수	증상	해결
type 미지정 (form 안)	의도치 않게 폼 제출	type="button" 명시
onclick 코드에 따옴표 충돌	JS 오류	외부 큰 따옴표면 안은 작은 따옴표
window.open() URL 없이	빈 페이지만 열림	URL 인자 추가
팝업 차단으로 안 열림	새 창 안 보임	사용자 클릭 직접 트리거 시 허용
모든 곳에 인라인 onclick	유지보수 지옥	분리된 JS 파일로

---

핵심 한 줄 요약

<input type="button">옛 방식 버튼 — value에 텍스트

<button>현대 방식 — 권장

onclick클릭 시 실행 JS 코드

window브라우저 창 객체

window.open()새 창/탭 열기 메서드

이벤트 핸들러onclick·onmouseover 등 다양

분리 권장addEventListener로 HTML과 JS 분리

Tags

#button #input #onclick #window.open #HTML #버튼 #JavaScript #이벤트 #새창 #type #value #폼 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

button, input, onclick, window.open, HTML, 버튼, JavaScript, 이벤트, 새창, type, value, 폼, 웹개발, 티스토리