thực hành - Tạo form với các icon

Trong bài thực hành này, chúng ta sẽ tạo một form đăng ký đơn giản với các icon bằng HTML và CSS.

Form với các icon

Cách tạo form với các icon

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <h2>Register form</h2>
    <div class="form">
        <form action="/action_page.php" method="post">
            <div class="addon">
                <span class="fa fa-user"></span><input type="text" name="username" placeholder="Username" required="required" />
            </div>
            <div class="addon">
                <span class="fa fa-envelope"></span><input type="email" name="email" placeholder="Email" required="required" />
            </div>
            <div class="addon">
                <span class="fa fa-key"></span><input type="password" name="password" placeholder="Password" required="required" />
            </div>
            <button type="submit">Register</button>
        </form>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa form */
.containerx {
    padding:15px;
    border:2px solid #ddd;
    overflow:hidden;
    border-radius:5px;    
}
/* Vùng chứa group icon với input */
.addon {
    margin-bottom:15px;
    display:flex;
    width:100%;    
}
/* Tạo kiểu cho phần tử span */
.addon > span {
    display:inline-block;
    min-width:50px;
    padding:10px 0;
    text-align:center;
    background-color:dodgerblue;
    color:white;
    border:1px solid dodgerblue;
    border-radius:5px 0px 0px 5px;
}
/* Tạo kiểu cho phần tử input */
.addon > input {
    width:100%;
    padding:10px;
    border:1px solid gray; 
    border-radius:0px 5px 5px 0px;
}
/* Thêm hiệu ứng khi được lấy nét */
.addon > input:focus {
    outline:none;
    border:1px solid dodgerblue;    
}
/* Tạo kiểu cho phần tử button */
form > button {
    border:none;
    outline:none;
    padding:15px 0;
    text-align:center;
    color:white;
    background-color:royalblue;    
    width:100%;
    cursor:pointer;
    border-radius:5px;
}
/* Thêm hiệu ứng khi hover */
form > button:hover {
    background-color:orange;    
}