thực hành - tạo form xếp chồng dọc

Trong bài thực hành này, chúng ta sẽ tạo một form với các phần tử xếp chồng lên nhau theo chiều dọc bằng HTML và CSS.

Form xếp chồng theo chiều dọc

Form xếp chồng lên nhau theo chiều dọc (trong đó phần tử <input> và <label> được đặt chồng lên nhau, thay vì nằm cạnh nhau).

Xem kết quả

Cách tạo form xếp chồng theo chiều dọc

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <form action="/action_page.php" method="post">
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" placeholder="Your name..." required="required" />
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" placeholder="Your last name..." required="required" />
        <label for="select">Country</label>
        <select id="select" name="country">
            <option value="australia">Australia</option>
            <option value="canada">Canada</option>
            <option value="usa">USA</option>
        </select>
        <input type="submit" value="Submit" />
    </form>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa form */
.containerx {
    padding:40px;
    background-color:#ddd;
    border-radius:5px;    
    overflow:hidden;
}
/* Tạo kiểu cho phần tử label */
form > label {
    display:inline-block;
    margin-bottom:10px;    
}
/* Tạo kiểu cho phần tử input có tyle là text và phần tử select */
form > input[type="text"], form > select {
    width:100%;
    margin-bottom:10px;
    border:1px solid #ddd;
    padding:12px;
    border-radius:5px;
    background-color:white;    
}
/* Thêm hiệu ứng khi được lấy nét */
form > input[type="text"]:focus, form > select:focus {
    outline:none;
    box-shadow:0px 0px 1px 1px orange;
}
/* Tạo kiểu cho phần tử input có type là submit */
form > input[type="submit"] {
    width:100%;
    padding:15px 0;
    border:none;
    background-color:royalblue;
    color:white;
    border-radius:5px;
    margin-top:10px;
    cursor:pointer;    
}
/* Thêm hiệu ứng khi hover */ 
form > input[type="submit"]:hover {
    background-color:violet;    
}