① <button> 태그 : 사용자가 클릭할 수 있는 버튼을 생성할 수 있다.
텍스트나 이미지와 같은 콘텐츠 삽입이 가능하다.
② <button> 태그 관련 버그
(발생 상황)
위 사진은 사용자가 로그인 할 수 있게 ID/PW를 입력할 수 있는 창이다. 로그인을 하면 바로 메인 페이지로 이동할 수 있게 링크를 걸어두었다. 또한, 아이디가 없는 사용자가 회원가입을 할 수 있도록 로그인 버튼을 생성하여 회원가입 페이지로 이동할 수 있게 페이지를 제작하였다.
** 버그발생 **
- 회원가입 버튼 : 회원가입 텍스트를 클릭하면 정상작동하지만, 버튼(빨간색으로 표시) 부분만 클릭할 시 메인 페이지로 이동하는 버그가 생겼다.
(원인 발견하기)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>login Page</title>
</head>
<body>
<header>
<h1><a href="../index.html">DEFLIX</a></h1>
<ul>
<li><a href="../src/login.html">로그인</a></li>
</ul>
<hr>
</header>
<section>
<form action="./main.html">
<fieldset>
<legend>로그인 정보</legend>
<p>
<label for="member-id">ID: </label>
<input type="text" name="member-id" id="member-id" placeholder="email 주소" required>
</p>
<p>
<label for="member-pw">PW: </label>
<input type="password" name="member-pw" id="member-pw" placeholder="비밀번호를 추가하세요" required>
</p>
<input type="checkbox" name="Personal_Information_Consent" id="Personal_Information_Consent" required>
<label for="Personal_Information_Consent">
<small>개인정보 처리방침에 따른 개인정보 수집 및 활용에 동의합니다</small>
</label>
<br>
<br>
<button>
<a href="./sign-up.html">회원가입 </a> </button>
<input type="submit" value="로그인">
</fieldset>
</form>
</section>
<footer>
<hr>
<h5>
Address : 대구광역시 중구 그린빌딩<br>
Tel : <a href="tel:054)111-9121">054) 111-9121</a><br>
E-mail : <a href="mailto:hans.park.dev@dtravel.com">hans.park.dev@dtravel.com</a><br>
©copy All right reserve.
</h5>
</footer>
</body>
</html>
(버그)
<button><a href="sign-up.html">회원가입</a></button>회원가입 버튼 클릭 시, 메인 페이지로 이동하는 이유는 button태그 전체에 링크가 적용되지 않고 버튼 안에 있는 텍스트에만 링크가 적용되었기 때문, 추측이지만 form태그에 속해 form의 action 속성에 반응 한거라고 생각된다.
또한, button태그에 대해 공부를 해보니 브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시해야한다고 한다!! 나도 속성값을 명시하니 정상적으로 작동하였다 !
(해결방법)
<button type="button"> <a href="login.html">회원가입</a></button>정확히는 onclik=""도 버튼 타입 뒤에 있어야 한다!!
ex)
<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>
'웹 > HTML' 카테고리의 다른 글
| [코딩 공부_17] 절대경로? 상대경로? 경로 표기법에 대해 알아보자! (0) | 2021.03.04 |
|---|---|
| [코딩 공부_13] DGBook 만들어 보기 (0) | 2021.02.26 |
| [코딩 공부_10] <button> vs <input type="button">, 둘의 차이는? (0) | 2021.02.23 |
| [코딩 공부_09] DEFLIX 완성하기 (0) | 2021.02.22 |
| [코딩 공부_08] 웹 사이트와 웹 페이지의 구조 알아보기 (0) | 2021.02.19 |
댓글