Notice
Recent Posts
Recent Comments
Tags more
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

부트스트랩4 를 이용한 간단한 입력폼 예제1 본문

웹퍼블리싱/bootstrap

부트스트랩4 를 이용한 간단한 입력폼 예제1

http://portfolio.wonpaper.net 2019. 12. 12. 17:28

반응형 웹관련 아주 좋은 프레임웍인 Bootstrap4 버전으로 간단히 입력폼을 만들어 보았다.

 

fontawesome 에서 무료 아이콘도 살짝 넣었다.

https://fontawesome.com/

 

Font Awesome

 

fontawesome.com

또한 우편번호 검색창을 위해 다음 우편번호 소소를 같이 연동하였다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>입력항목 예제1</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
 
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> 
<script> 
 function sample6_execDaumPostcode() { 
 new daum.Postcode({ 
 oncomplete: function(data) { 
  // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. 
  // 각 주소의 노출 규칙에 따라 주소를 조합한다. 
  // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. 
  var fullAddr = ''; // 최종 주소 변수 
  var extraAddr = ''; // 조합형 주소 변수 
  // 사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다. 
  if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우 
   fullAddr = data.roadAddress; 
  } else { // 사용자가 지번 주소를 선택했을 경우(J) 
   fullAddr = data.jibunAddress; 
  } 
  // 사용자가 선택한 주소가 도로명 타입일때 조합한다. 
  if(data.userSelectedType === 'R'){ 
   //법정동명이 있을 경우 추가한다. 
  if(data.bname !== ''){ 
   extraAddr += data.bname; 
  } 
  // 건물명이 있을 경우 추가한다. 
  if(data.buildingName !== ''){ 
   extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName); 
  } 
  // 조합형주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다. 
   fullAddr += (extraAddr !== '' ? ' ('+ extraAddr +')' : ''); 
  } 
  // 우편번호와 주소 정보를 해당 필드에 넣는다. 
  document.getElementById('post1').value = data.zonecode; //5자리 새우편번호 사용 
  document.getElementById('address1').value = fullAddr; 
  // 커서를 상세주소 필드로 이동한다. 
  document.getElementById('address2').focus(); 
 } 
 }).open(); 
} 
</script>
</head>    
<body>
 cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<div class="container">
    <form name="f" method="post">
 
        <div class="col-sm-12 pt-3">
            <div class="card">
                <div class="card-header card-header-primary">
                    <h4 class="card-title"><i class="fas fa-square"></i> 관리자 환경설정</h4>
                    <p class="card-catagory"></p>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <tbody>
                            <tr style="line-height:32px;">
                                <td>관리자 ID</td>
                                <td>
                                    <input type="text" name="admin_id" class="form-control" value="" readonly>
                                </td>
                                <td>관리자 이름</td>
                                <td>
                                    <input type="text" name="admin_name" class="form-control" value="">
                                </td>                        
                            </tr>
                            <tr>
                                <td>관리자 비밀번호</td>
                                <td>
                                    <input type="password" name="admin_passwd1" class="form-control" maxlength="10" value="">                                    
                                </td>
                                <td>관리자 비밀번호 확인</td>
                                <td>
                                    <input type="password" name="admin_passwd2" class="form-control" maxlength="10" value="">                                    
                                </td>
                            </tr>  
                            <tr>
                                <td>전화번호</td>
                                <td>
                                    <input type="tel" name="tel" class="form-control" value="">
                                </td>
                                <td>팩스</td>
                                <td>
                                    <input type="tel" name="fax" class="form-control" value="">
                                </td>
                            </tr>
                            <tr>
                                <td>우편번호</td>
                                <td>
                                    <input type="text" name="post1" id="post1" size="5" class="form-control" readonly value="" style="display:inline-block;width:100px;"> 
                                    <i class="fas fa-search" onclick="sample6_execDaumPostcode()" style="cursor:pointer;font-size:24px;"></i>
                                </td>
                                <td>HP</td>
                                <td><input type="tel" name="hp" class="form-control" value=""></td>
                            </tr>
                            <tr>
                                <td>주소</td>
                                <td colspan="3">
                                    <input type="text" name="address1" id="address1" class="form-control mb-3" value="">
                                    <input type="text" name="address2" id="address2" class="form-control" value="">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
 
            <div class="pt-3"></div>
 
            <div class="card">
                <div class="card-header"><i class="fas fa-square"></i> GPS 거리 설정</div>
                <div class="card-body">
                    <table class="table">
                        <tbody>
                            <tr style="line-height:32px;">
                                <td>기본 변경값</td>
                                <td>
                                    <input type="text" name="gps_radius" class="form-control text-right" maxlength="3" size="3" value="" style="display:inline-block;width:100px;"> Km
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
 
        </div>
        
    </form>
 
    <div class="text-center mt-3">
        <button type="button" class="btn btn-success">변경하기</button>
        <button type="button" class="btn btn-info">다시쓰기</button>
    </div>
</div>
</body>
</html>
 cs

 

 

'웹퍼블리싱 > bootstrap' 카테고리의 다른 글

[bootstrap4] modal 이미지 모달창 띄우기  (0) 2020.03.15
[bootstrap4] modal 모달창 띄우기 예제  (0) 2020.03.15
[bootstrap4] modal 모달창 띄우고 창안닫히게  (0) 2019.12.15
'웹퍼블리싱/bootstrap' Related Articles more
Comments