JAVA & APP :국비지원 학원 복습/Bootstrap

Bootstrap : 06 Form

나는선우 2021. 1. 11. 23:30
반응형

2021-01-11 수업내용 정리 겸 복습

 

스타트 탬플릿

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

간단한 폼: form-group, form-control을 반드시 쓰자

<h2>간단한 폼 : form-group, form-control을 반드시 쓰자 </h2>
<form>
    <!-- 반드시 폼그룹을 만들어 주어야 폼 사용 가능 -->
    <div class="form-group">
        <label for="email">이메일주소</label>
        <input type="text" id="email" class="form-control">
        <small class="text-muted form-text">이메일 주소는 올바르게 쓰세요.</small>
    </div>
    <div class="form-group">
        <label for="pwd">비밀번호</label>
        <input type="password" id="pwd" class="form-control">
        <small class="text-muted form-text">비밀번호 똑디 써라~</small>
    </div>
    <div class="form-group form-check">
        <input type="checkbox" id="check1" class="form-check-input">
        <label class="form-check-label">자동로그인</label>
    </div>
    <button type="button" class="btn btn-primary">로그인</button>
</form>

수평 배치 폼: form-group row

 

<h2>수평배치 폼 : form-group row</h2>
<form>
    <div class="form-group row">
        <label for="userid" class="col-form-labe col-sm-2">아이디</label>
        <input type="text" id="userid" class="form-control col-sm-5 ">
    </div>
    <div class="form-group row">
        <label for="userpwd" class="col-form-label col-sm-2">비밀번호</label>
        <input tpye="password" id="userpwd" class="form-control col-sm-5">
    </div>
</form>

인라인 폼 : form-inline

<h2>인라인 폼 : form-inline</h2>
<form class="form-inline">
    <div class="form-group col-5">
    <label for="userid2" class="col-form-label ">아이디</label>
    <input tpye="text" id="userid2" class="form-control">
    </div>
    <div class="form-group col-5">
        <label for="pwd2" class="col-form-label ">비밀번호</label>
        <input tpye="password" id="pwd2" class="form-control">
    </div>
</form>

체크박스 수평 배치 : form-check

<h2>체크박스 수평배치 : form-check </h2>
<form class="form-group m-1">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">1</label>
    </div>
    <div class="form-check ">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">2</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
        <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
    </div>
</form>

라디오 버튼 인라인 배치 : form-check-inline

<h2>라디오버튼 인라인 배치 form-check-inline : </h2>
<form>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
        <label class="form-check-label" for="inlineRadio1">1</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
        <label class="form-check-label" for="inlineRadio2">2</label>
    </div>
    <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
        <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
    </div>
</form>

 

반응형