Everything has an expiration date
HTML 20231128 [프로그램 소스] - Test019, Test020, Test021, Test022 본문
[HTML]/Program source (HTML)
HTML 20231128 [프로그램 소스] - Test019, Test020, Test021, Test022
Jelly-fish 2023. 11. 28. 15:56
WebApp01
Test019.html
Test019.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test019.html</title>
</head>
<body>
<div>
<h1>체크박스 실습</h1>
<hr>
</div>
<!-- 구분을 위해 name을 붙인다! -->
<div>
<form>
<p>1. 오늘 점심으로 먹은 메뉴는?</p>
<label>
<input type="checkbox" name="foodCheck1" value="code1"> 밥
</label>
<input type="checkbox" name="foodCheck1" value="code2" id="label2"> 미역국
<!-- 라벨을 붙여줘야, 굳이 체크박스를 클릭하지 않고
텍스트만 클릭했더라도 체크가 가능하도록 처리된다. 라벨을 붙이지 않으면 정확히 체크박스를 클릭해야 한다!-->
<label>
<input type="checkbox" name="foodCheck1" value="code3"> 김치찌개
</label>
<input type="checkbox" name="foodCheck1" value="code4"> 달갈말이
<br><br>
<input type="checkbox" name="foodCheck1" value="장조림"> 장조림
<input type="checkbox" name="foodCheck1" value="김"> 김
<input type="checkbox" name="foodCheck1" value="김치"> 김치
<input type="checkbox" name="foodCheck1" value="멸치볶음"> 멸치볶음
<br><br><br>
<p>2. 오늘 저녁으로 먹을 메뉴는?</p>
<input type="checkbox" name="foodCheck2"> 밥
<input type="checkbox" name="foodCheck2">
<label for="label2">미역국</label>
<input type="checkbox" name="foodCheck2"> 김치찌개
<input type="checkbox" name="foodCheck2"> 달갈말이
<br><br>
<input type="checkbox" name="foodCheck2"> 장조림
<input type="checkbox" name="foodCheck2"> 김
<input type="checkbox" name="foodCheck2"> 김치
<input type="checkbox" name="foodCheck2"> 멸치볶음
<br><br>
</form>
</div>
</body>
</html>
Test020.html
Test020.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
</head>
<body>
<div>
<h1>라디오 버튼 만들기</h1>
<hr>
</div>
<div>
<form>
<!--
둘 중에 하나만 고르도록 하려면,
동일한 속성값을 공유하도록 만들어야 한다.
따라서, name 을 지정해 주어야 한다.
ⓐ 둘 중의 하나 고르려면 = name 속성을 두 컨트롤이 모두 공유
ⓑ 값을 선택하면 서버로 어떤 값이 선택되었는지 보내져야 하기 때문에 value 값을 가져야 함.
ⓒ checked 속성이 부여된 경우에는, 페이지 첫 실행부터 그 속성이 선택되어 있는 상태로 브라우저상에 보이게 된다.
(● 여자 ○ 남자)
-->
<p>1. 당신의 성별은?</p>
<label>
<input type="radio" name="gender" value="female" checked="checked"> 여자
</label>
<input type="radio" name="gender" value="male" id="m">
<label for="m">남자</label>
<br><br>
<p>2. 당신이 좋아하는 과목은?</p>
<label><input type="radio" name="subject" value="kor"> 국어</label>
<lable><input type="radio" name="subject" value="eng"> 영어</label>
<lable><input type="radio" name="subject" value="mat" checked="cheked"> 수학</label>
<lable><input type="radio" name="subject" value="soc"> 사회</label>
<lable><input type="radio" name="subject" value="sci"> 과학</label>
<br><br>
</form>
</div>
</body>
</html>
Test021.html
Test021.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
</head>
<body>
<div>
<h1>전송, 취소 버튼 만들기</h1>
<hr>
</div>
<!--
[데이터 전송 및 페이지 전송 방식]
◎get : 엽서에 쓰는 방식
내가 윤수한테 엽서를 보냈어.
내가 직접 전달해 주는게 아니죠.
중간에 집배원 아저씨가 윤수한테 전달해 줄 거 아닙니까.
난 프랑스 파리에 있고 윤수는 서울에 있으니까 엽서에 써서 보냅니다.
집배원 아저씨가 엽서 내용을 다 볼 수 있죠. 봉투가 없으니까.
◎post : 편지를 전달하고 페이지를 요청하는 방식
편지는 봉투 안에 담겨있죠.
어떤 내용인지 알 수 없고 누가 누구에게 보내는지만 집배원 아저씨가 알아요.
이런 차이가 있다는 것만 기억해 둡시다.
[요청한 페이지를 찾을 수 없습니다 : 404 Error. 아직 Test022.html이 없어서 에러가 발생했다.]
-->
<div>
<!-- form action : 내가 원하는 페이지는 이거야! 를 알려주기 위한 것. -->
<!-- ★★★★★ -->
<!-- 데이터 전송 및 페이지 요청 -->
<!-- 폼으로 구성한 데이터의 내용을 전달할테니... 요청한 페이지와 만날 수 있게 해 달라... -->
<form action="http://localhost:3306/WebApp01/Test022.html">
*이름
<input type="text" name="name" size="15" maxlength="10"><br>
*이메일
<input type="text" name="email" size="15" maxlength="20"><br>
*하고싶은 말
<br>
<textarea rows="10" cols="50" name="field"></textarea>
<br><br>
<input type="submit" value="전송하기" name="submitBtn">
<input type="button" value="전송하기"> <!-- </input> 태그가 없다. -->
<button type="button">전송하기</button>
<!-- <button> 태그 안에 태그를 추가할 때 사용한다. -->
<button type="button">
<img alt="" src="images/btn_03.png">
</button>
<!-- button이란 컨트롤만 던지면, ①과 똑같아진다. -->
<button>전송하기</button>
<!-- submit이 제대로 전달되어야만, 요청이 제대로 처리된다. ①, ④ 동작O, ②, ③ 동작Ⅹ -->
<br><br>
<input type="reset" value="취소하기" name="resetBtn">
</form>
</div>
</body>
</html>
Test022.html
Test022.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test022.html</title>
</head>
<body>
<div>
<h1>Test021.html에서 요청한 내용 확인</h1>
<hr>
</div>
<div>
안녕? 난 Test022.html 이야~<br>
네가 나에게 전송한 <br>
이름, 이메일, 하고싶은 말을 모두 확인했어~<br>
담에 보자~<br>
</div>
</body>
</html>
'[HTML] > Program source (HTML)' 카테고리의 다른 글
| HTML 20231128 [프로그램 소스] - Test023 (1) | 2023.11.28 |
|---|---|
| HTML 20231128 [프로그램 소스] - Test015, Test016, Test017, Test018 (1) | 2023.11.28 |
| HTML 20231128 [태그 정리] ① (2) | 2023.11.28 |
| HTML 20231128 [프로그램 소스] - Test014 (0) | 2023.11.28 |
| HTML 20231128 [프로그램 소스] - Test012, Test013 (0) | 2023.11.28 |
'[HTML]/Program source (HTML)' Related Articles
more
