Bootstrap Form 디자인

Form 디자인 종류

 

form 크기)

    <div class="row">

        <div class="col-6"> <!-- 6/12 크기 갖는다.-->

            <h1>form 디자인</h1>

            <form action="signup.jsp" method="post">

                <div class="mb-2">

                    <label class="form-label" for="id">아이디</label>

                    <input class="form-control" type="text" id="id" name="id">

                </div>

                <div class="mb-2">

                    <label class="form-label" for="pwd">비밀번호</label>

                    <input class="form-control" type="text" id="pwd" name="pwd">

                </div>

                <button class="btn btn-primary" type="submit">가입</button>

            </form>

        </div>

    </div>

위에 form 두개 중 아래의 form 을 보면

div class row 

안에 div class를 col-6 으로 작성하면

창의 크기에 상관없이 6/12 크기를 갖게 된다.

(위의 form은 col-6이 작성 안된 form이다)

 

 

    <div class="row">

        <div class="col-sm-6"> <!-- 576px 이상일때만 6/12 크기 유지-->

            <h1>form 디자인</h1>

            <form action="signup.jsp" method="post">

                <div class="mb-2">

                    <label class="form-label" for="id">아이디</label>

                    <input class="form-control" type="text" id="id" name="id">

                </div>

                <div class="mb-2">

                    <label class="form-label" for="pwd">비밀번호</label>

                    <input class="form-control" type="text" id="pwd" name="pwd">

                </div>

                <button class="btn btn-primary" type="submit">가입</button>

            </form>

        </div>

    </div>

576px 이상일때만 6/12 크기를 유지하는 class "col-sm-6"

 

576px 이상일때는 6/12 크기를 유지하지만

 

창의 크기가 576px 이하가 되는 순간 6/12 크기가 유지가 되지 못한다.

 

 

    <div class="row">

        <div class="col-sm-6 mx-auto"> <!-- 가운데 정렬-->

            <h1>form 디자인</h1>

            <form action="signup.jsp" method="post">

                <div class="mb-2">

                    <label class="form-label" for="id">아이디</label>

                    <input class="form-control" type="text" id="id" name="id">

                </div>

                <div class="mb-2">

                    <label class="form-label" for="pwd">비밀번호</label>

                    <input class="form-control" type="text" id="pwd" name="pwd">

                </div>

                <button class="btn btn-primary" type="submit">가입</button>

            </form>

        </div>

    </div>

576 px 이상일 경우에만 가운데 정렬이 되는 class "col-sm-6 mx-auto"

 

576 px 이상일때는 폼이 가운데 정렬이 되지만

 

576 px 이하가 되는 순간 가운데 정렬이 해제된다.

 

 

 

form 유효성 검증 디자인)

 

    <div class="container">

        <h1>form 유효성 검증 디자인</h1>

        <form action="signup.jsp" method="post">

            <div class="mb-2">

                <label class="form-label" for="email">이메일</label>

                <input class="form-control" type="text" id="email" name="email">

                <div class="invalid-feedback">

                    이메일 형식에 맞게 입력해 주세요

                </div>

            </div>

        </form>

        <div class="mb-2">

            <label class="form-label" for="email">이메일</label>

            <input class="form-control is-valid" type="text" id="email" name="email">

            <div class="valid-feedback">

                맞게 입력

            </div>

        </div>

        <div class="mb-2">

            <label class="form-label" for="email">이메일</label>

            <input class="form-control is-invalid" type="text" id="email" name="email">

            <div class="invalid-feedback">

                이메일 형식에 맞게 입력해 주세요

            </div>

    </div>

input class 에 form-control 과 함께 is-valid or is-invalid 가 선언되면 

input 값 입력 시 적용되는 디자인을 만들 수 있다.

 

 

input class에 is-valid가 추가되면 올바르게 입력한 상황과 같은 초록색 체크 표시가 나타나고

is-invalid 가 추가되면 잘못입력 했을 상황과 같은 빨간 표시가 나타난다.