CSS 및 HTML만 사용하는 HTML 양식 내의 플로팅 레이블

21534 단어 htmltutorialcsswebdev
플로팅 라벨 양식을 어떻게 만드는지 궁금한 적이 있습니까? 그렇다면 이것은 당신을 위한 블로그 게시물입니다.
간단한 HTML과 CSS를 사용하여 만드는 방법을 보여드리겠습니다.

If you like video more, then you can watch it on my YouTube channel -> Floating Labels in HTML form



비어 있는index.html 파일로 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Labels</title>
</head>
<body>    
</body>
</html>


이제 하나의 필드와 하나의 레이블이 있는 양식을 추가하겠습니다.

<form>
    <h3>Floating Labels</h3>
    <div>
        <input type="text" id="firstName" />
        <label for="firstName">First Name</label>
    </div>
</form>


이 작업을 수행하려면 필드 상태가 변경될 때(예: 포커스, 자리 표시자 표시) 레이블을 선택할 수 있는 유일한 방법이기 때문에 입력 필드 뒤에 레이블을 추가해야 합니다.

양식 미리보기:



이제 양식 내부의 div인 필드의 컨테이너 스타일을 지정할 것입니다. 먼저 floatingLabels.css라는 새 파일을 만들고 이 파일을 index.html 파일에 연결합니다.
floatingLabels.css
* {
    /*box-sizing will tell browser how to measure 
      width of an element and in our case
      it will be from border to border.
    */
    box-sizing: border-box;
}
body, html {
    margin:0px; /*reseting default margin to 0*/
    padding: 0px; /*reseting default padding to 0*/
}
form {
    padding: 20px; 
}

index.html에 연결하려면 HTML 파일 헤더에 링크를 추가해야 합니다.

<link rel="stylesheet" href="floatingLabels.css" />


이제 높이, 테두리 및 테두리 반경을 추가하여 컨테이너 스타일을 지정합니다.

form > div {
    height: 40px;
    border: 1px solid gray;
    border-radius: 5px;    
}

> 선택기는 FORM 요소의 직계 자손에만 CSS를 적용합니다.

다음으로 입력 필드에 스타일을 추가합니다.

form > div > input {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    padding-left: 10px;
}


양식 미리보기



레이블을 필드 위로 이동하려면 해당 위치absolute를 지정하고 필요에 따라 스타일을 지정해야 합니다.

form > div > input + label {
    position: absolute;
    height: 100%;
    line-height: 40px;
    width: 100%;
    left: 10px;
    top: 0px;    
    transition: 0.15ms; /*to make smooth any style transtion*/
    pointer-events: none; /*disable the pointer events*/
}


At this moment I've changed the font of the page to be Tahoma, If you want to do the same add to your body selector font-family: Tahoma;



레이블이 컨테이너 경계를 넘어 떠다니는 것을 방지하려면 컨테이너의 위치를 ​​relative로 업데이트해야 합니다.

form > div {
    height: 40px;
    border: 1px solid gray;
    border-radius: 5px;    

    /*new code */
    min-width: 400px; /*just for nicer look*/
    position: relative;
   /*end of new code*/
}


양식 미리보기


이제 필드에 초점이 맞춰지면 레이블을 위로 이동하고 글꼴 색상을 파란색으로 변경하고 굵게 만들어야 합니다.

form > div > input:focus + label  {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    color: blue;    
}


양식 미리보기


다음으로 해야 할 일은 필드에 텍스트가 있을 때 레이블을 필드 위에 유지하는 것입니다. 그렇지 않으면 label의 텍스트와 입력의 텍스트가 겹칩니다.


이를 위해 :placeholder-shown 필드의 선택기input를 사용하여 뒤에 오는 레이블의 스타일을 지정합니다. 그러나 자리 표시자가 보이지 않을 때만 레이블이 맨 위에 있어야 하므로 CSS 함수를 사용하여 :placeholder-shown 결과를 부정합니다.

form > div > input:not(:placeholder-shown) + label  {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    color: blue;    
}


필드 밖에 있고 그 안에 텍스트가 있으면 레이블이 필드의 맨 위에 유지됩니다.


기본적으로 그게 전부입니다. 이제 우리가 해야 할 일은 필드에 placeholder를 추가하여 한 칸의 값placeholder=" "을 갖는 것입니다. 양식을 더 멋지게 보이도록 숨겼습니다.

최종 미리보기


Index.html




 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Labels</title>
    <link rel="stylesheet" href="floatingLabels.css" />
</head>
<style>
    .container {
        display: flex;
        justify-content: center;
    }
</style>

<body>
    <div class="container">
        <form>
            <h3>Floating Labels</h3>
            <div>
                <input placeholder=" " type="text" id="firstName" name="firstName" autocomplete="off" />
                <label for="firstName">First Name</label>
            </div>
            <div>
                <input placeholder=" " type="text" id="lastName" name="lastName" autocomplete="off" />
                <label for="lastName">Last Name</label>
            </div>
            <div>
                <input placeholder=" " type="text" id="city" name="city" autocomplete="off" />
                <label for="city">City</label>
            </div>
        </form>
    </div>
</body>

</html>


플로팅 Labels.css




* {
    /*box-sizing will tell browser how to measure 
      width of an element and in our case
      it will be from border to border.
    */
    box-sizing: border-box;
}
body, html {
    margin:0px; /*reseting default margin to 0*/
    padding: 0px; /*reseting default padding to 0*/
    font-family: Tahoma;
}

form {
    padding: 20px;     
}

form > div {
    height: 40px;
    border: 1px solid gray;
    border-radius: 5px;    
    min-width: 400px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
form > div:focus {
    outline: 0px;
}

form > div > input {
    width: 100%;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    border: 0px;
}

form > div > input + label {
    position: absolute;
    height: 100%;
    line-height: 40px;
    width: 100%;
    left: 10px;
    top: 0px;  
    transition: 0.15ms;  
    pointer-events: none;
}
form > div > input:focus + label,
form > div > input:not(:placeholder-shown) + label   {
    font-weight: bold;
    font-size: 12px;
    line-height: 14px;
    color: blue;    
}
CircleCI 코드를 확인하고 Heroku에 자동 배포하는 방법
PythonIsCool - 1장

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage