로그인  회원가입  
인포앤북 홈

5-6. 플로팅 라벨

■ 플로팅 라벨

플로팅 라벨을 사용하면 입력 필드 내부에 라벨을 삽입하고 입력 필드를 클릭하면 라벨이 플로팅 되도록 할 수 있습니다.

플로팅 라벨
ex5-12.html
    <div class="container mt-3">
        <h3>플로팅 라벨</h3>
        <form>
            <div class="form-floating mb-3 mt-3">
                <input type="text" class="form-control" id="email" name="email">
                <label for="email">이메일</label>
            </div>
            <div class="form-floating mt-3 mb-3">
                <input type="text" class="form-control" id="pwd" name="password">
                <label for="pwd">비밀번호</label>
            </div>
            <div class="form-floating mt-3 mb-3">
                <textarea class="form-control" id="comment" name="text"></textarea>
                <label for="comment">내용</label>
            </div>
            <button type="submit" class="btn btn-primary">확인</button>
        </form>
    </div>  
ex5-12.html의 실행 결과