11/17 45-1 [BS] Custom Forms

form요소들을 나름 커스터마이징(?)해서 사용할 수 있다!!

*** 공통적용 : 레이블,id는 필수 !! 없으면 해당 요소들이 사라져버리고 기능도 안 됨 !!

 

1. Custom Checkbox

체크박슨데 조금 다름

         <form>
            <h2>Custom Checkbox</h2>
            <div class="custom-control custom-checkbox">
              <input type="checkbox" class="custom-control-input" id="customCheck" >
              <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>                        
            </div>
        </form>

 

2.Custom Switch  : 

  체크박스를 스위치로 변경 !!

   <form>
          <h2>Custom Switch</h2>
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="switch1">
            <label class="custom-control-label" for="switch1">Toggle me</label>
          </div>
   </form>

 

3.Custom Radio buttons  

대체 뭐가 다른건가 싶지만 다름

   <form>       
          <h2>Custom Radio buttons</h2>
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" id="customRadio">
            <label class="custom-control-label" for="customRadio">Custom radio</label>
          </div>
   </form>

 

 

4.Inline Custom Form Controls

<form>          
          <h2>Inline Custom Form Controls</h2>
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="customCheck1" >
            <label class="custom-control-label" for="customCheck1">선택1</label>                        
          </div>
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="customCheck2" >
            <label class="custom-control-label" for="customCheck2">선택2</label>                        
          </div>
          <div class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" class="custom-control-input" id="customCheck3" >
            <label class="custom-control-label" for="customCheck3">선택3</label>                        
          </div>
</form>

 

5.Custom Select Menu

   선택메뉴!! 이건 w-auto로 주면 가로배치가 되기 때문에 div로 한 번 더 감싸준다 !

   <form>    
       <div>
          <h2 >Custom Select Menu</h2>
          <select name="cars" class="custom-select w-auto">
            <option selected>Custom Select Menu</option>
            <option value="volvo">Volvo</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
          </select>
                </div>
   </form>

 

 

6.Custom Range

  얘는 lable 지워도 됨 !!!

  <form>      
        <h2>Custom Range</h2> 
         <div>
            <input type="range" class="custom-range w-50">
        </div>
  </form>

 

 

7.Custom File Upload

  이건!! jQuery를 같이 사용해야 완벽하게 구현된다!

        <h2>Custom File Upload</h2>
        <div class="custom-file  w-auto">
            <input type="file" class="custom-file-input" id="customFile">
            <label class="custom-file-label" for="customFile">파일을 선택하세요</label>
        </div>
         <script>
          $(".custom-file-input").on("change", function() {
            console.log($(this).val());  //   C:\fakepath\다운로드.png
            console.log($(this).val().split("\\"));  // Array(3) [ "C:", "fakepath", "다운로드.png" ] 배열로 나오넴!!
        	var fileName = $(this).val().split("\\").pop();  // pop으로 꺼내옴!              
        	$(this).siblings().addClass("selected").html(fileName); //$(this).siblings(선택자는생략가능) 이 뜻은  this의 형제들 중에서 선택자인 놈 하나만 선택한다
            });
         </script>

  --> 바닐라버전

    <script>
		var file = document.querySelector('.custom-file-input');  
          file.onchange=function(){
            	console.log(this.value);
                var fileName = this.value.split('\\').pop();  
                var label = this.nextElementSibling;
             // label.innerHTML = fileName;  이거 써도 됨 ! 
                label.textContent = fileName;
            };                             
    </script>