버튼! 우리가 아는 그 버튼이다. 여러 곳에 유용하게 쓰이긴 하지만 JAVASCRIPT와 함께 쓰일때 더 유용하게 쓰인다!
오늘은 간단하게 어떻게 쓰는지만 알고가자
바로 예제 코드
<!DOCTYPE html>
<html lang="ko">
<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>
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('Hello world')">
<input type="reset">
</form>
</body>
</html>
-----------------------------------------------------------------------------------
이렇게 출력된다. (<br>태그로 좀더 예쁘게 만들 수는 있겠다ㅎㅎ)
여기서 버튼에 처음보는 속성이 하나 있다. onclick인데 해당 버튼을 클릭했을때 어떤 동작을 하도록 해주는 설정이다.
이번엔 alert 라는 알림창에 Hello world 라는 글자가 뜨도록 해줬다.
!! 주의할게 자바에서는 ""를 썼는데 html에서? 는 ' ' 작은따옴표를 써준다 !!!!
<input type="reset">
그리고 요것은 나도 처음보는 건데 text창에 사용자가 입력한 내용을 초기화 해준다
ㅋㅋㅋ별거아니지만 채워야할 내용이 엄청 많은 경우에 유용하게 쓰일것 같다. 아님 일부만 초기화 시키는 방법을 알게된다면 좋을듯!
728x90
'HTML' 카테고리의 다른 글
| VisualStudioCode 편집기 사용시 추가해 두면 편한 소스들 / 비쥬얼 스튜디오 한국어 설정 (0) | 2022.05.16 |
|---|---|
| <HTML> meta 태그란? (0) | 2022.04.01 |
| <method> 정보를 전송하는 방식 GET / POST (0) | 2022.03.30 |
| 사용자 선택 dropdown 옵션 (0) | 2022.03.24 |
| VS CODE(visual studio) 윈도우 자동정렬! (0) | 2022.03.23 |
