네이버 GBN 만들기
폼 태그
폼태그는 주로 사용자가 입력하는 값을 받아 처리하기 위해 사용됨. 현업에서 매우 자주 사용되고 중요하므로 기본 개념.
기본 폼 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="#" accept-charset="utf-8" name="information" method="get">
<!-- filedset tag는 서로 관련이 있는 것들을 묶을 때 사용된다. -->
<fieldset >
<!-- form tag 의 제목은 legend tag 로 하는 것이 정석, 상황에 따라서 다른 태그로도 사용함-->
<legend>개인정보</legend>
<div>이름 : <input type="text" name="name" /></div>
<div>나이 : <input type="text" name="age" /></div>
<div>비밀번호 : <input type="password" name="password" /></div>
</fieldset>
<br />
<fieldset >
<legend>기타정보</legend>
<div>취미 : <input type="text" name="hobby" /></div>
<div>특기 : <input type="text" name="specialty" /></div>
</fieldset>
</form>
</body>
</html>
*html 주석 단축키 (commnad + / )
폼 태그 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- jQuery 사용 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form id="login">
<div>아이디 : <input type="input" id="username" /></div>
<div>비밀번호 : <input type="password" id="password" /></div>
<div>
<!-- label 사용하는 이유: 체크박스를 감싸고 있는 label은 사용자가 체크박스말고도 label로 감싸져 있는 어느 텍스트라도 클릭하면 체크박스가 활성화된다 -->
<label><input type="checkbox" id="checkbox"/> 아이디 패스워드 저장</label>
</div>
<button type="submit">제출</button>
</form>
<script>
// login(아이디이름) 이라는 폼이 제출되었을 때 아래와 같은 이벤트를 부여한다
$('#login').submit(function (event) {
event.preventDefault(); // 원래 로그인을 하면 화면을 로딩하는데, 이 함수는 새로고침하는 동작을 막는다. 새로고침하면 데이터가 날라가기 때문에.
var username = $('#username').val(); // 아이디가 username 인 value 값을 왼쪽에 정의된 변수에 저장
var password = $('#password').val(); // 아이디가 paswwrd 인 value 값을 왼쪽에 정의된 변수에 저장
var isChecked = !!$('#checkbox:checked').val(); //아이디가 checkbox인 것 중에 checked가 된 값을 왼쪽에 정의된 변수에 저장. !!의 뜻은, true/false 로 나타내기 위해 써줌. 만약에 이 !!가 없고, checkbox의 vlaue에 어떤 값을 넣어주면, 그 값이 alert 됨
alert(username + ' / ' + password + ' / ' + isChecked);
});
// 기본 form
// $('#login').submit();
</script>
</body>
</html>
네이버 gbn 기본골격 구조
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="search" class="search_area">
<form id="sform" name="sform" action="https://search.naver.com/search.naver" method="get" role="search">
<fieldset>
<legend class="blind">검색</legend>
<div class="green_window">
<input
id="query"
name="query"
type="text"
maxlength="255"
class="input_text"
tabindex="1"
autocomplete="off"
placeholder="검색어를 입력해 주세요."
/>
</div>
<button id="search_btn" type="submit" title="검색" tabindex="3" class="btn_submit">
<!-- tabeindex는 클릭할 수 있는 버튼의 요소가 어떤 번호를 가지고 있는지 구분하기 위해 넣음-->
<span class="blind">검색</span>
<span class="ico_search_submit"></span>
</button>
</fieldset>
</form>
<div class="autocomplete">
<!-- autocomplete = 아래 화살표: 자동완성 기능 -->
<a href="#" role="button" id="nautocomplete" tabindex="2" class="btn_arw _btn_arw fold" aria-pressed="true" data-atcmp-element="">
<span class="blind">자동완성 레이어</span>
<span class="ico_arr"></span>
</a>
</div>
</div>
</body>
</html>728x90
반응형
'부트캠프 개발일지 2023-2024 > Bootcamp 생활기록' 카테고리의 다른 글
| [3주차] 알고리즘 특강 (1) (0) | 2023.10.16 |
|---|---|
| [2주차] KPT : 미니프로젝트 회고 (0) | 2023.10.12 |
| [2주차] 첫 미니프로젝트 전체 개발 일지 (0) | 2023.10.11 |
| [1주차] Flex-wrap, jQuery toggle + animation (0) | 2023.10.05 |
| [1주차] 캠프 OT, Git 특강, 미니프로젝트 시작 (0) | 2023.10.04 |