겉바속촉

[html] 자바스크립트-수강신청 본문

IT일기(하반기)/HTML

[html] 자바스크립트-수강신청

겉바속촉 2020. 6. 11. 15:31
728x90
반응형

이번에는 재미있게 수강신청 했는지 물어보는

html을 꾸며봅시다:)

 

 

 

다음과 같이 우선 코드를 작성해주세요

질문은 <h1>태그를 활용해주시구요

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>수강신청 하셨나요?</h1>
	<form action="#">
		<fieldset>
			<legend>수강신청확인</legend>
				<input type="button" value="예"
				onclick="">
				
				<input type="button" value="아니오"
				onclick="">
		</fieldset>
	
	</form>

</body>
</html>

 

<form>을 활용해서 이름을 넣어주었습니다

<form action="#">이라고 해주었구요:)

 

 

<fieldset>을 활용하시면 다음과 같은 결과가 나옵니다

 

이제 button을 만들어주세요 

예, 아니오 가 써져있는 button입니다:)

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<h1>수강신청 하셨나요?</h1>
	<form action="#">
		<fieldset>
			<legend>수강신청확인</legend>
				<input type="button" value="예"
				onclick="">
				
				<input type="button" value="아니오"
				onclick="">
		</fieldset>
	
	</form>

</body>
</html>

 

 

 

 

컴파일 해보시면

다음과 같이 나옵니다:)

 

 

 

 

 

 

이제 예 아니오 누르면

무언가 변화가 생기게 해주고싶어요:)

 

그럼 자바스크립트 활용해주시면 되겠쥬?

 

function 2개를 각각 만들고 onclick에 소환해주세요!

 

 

 

전체 코드블럭은

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
	function  ok() {
		alert("네~")
	}
	function no() {
		alert("아직안했어요ㅠㅠ");
	}

</script>
</head>
<body>
	<h1>수강신청 하셨나요?</h1>
	<form action="#">
		<fieldset>
			<legend>수강신청확인</legend>
				<input type="button" value="예"
				onclick="ok()">
				
				<input type="button" value="아니오"
				onclick="no()">
		</fieldset>
	
	</form>

</body>
</html>

 

 

 

예 누르면

 

 

아니오 누르면

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] 마우스 이벤트 객체, id값 지정한곳에 출력  (0) 2020.06.11
[html] 자바스크립트- popup창 생성하기  (0) 2020.06.11
[html]자바스크립트-함수불러오기  (0) 2020.06.11
[html] 자바스크립트-함수  (0) 2020.06.11
[html] 자바스크립트-형변환  (0) 2020.06.11
'IT일기(하반기)/HTML' Related Articles more