thực hành - tạo form liên hệ

Trong bài thực hành này, chúng ta sẽ tạo một form liên hệ bằng HTML và CSS.

Form liên hệ

Cách tạo một form liên hệ

Bước 1) Thêm HTML:

Ví dụ

<div class="containerx">
    <form class="form" action="/action_page.php" method="post">
        <div class="input">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="fname" placeholder="Your name..." required="required" />
        </div>
        <div class="input">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="fname" placeholder="Your last name..." required="required" />
        </div>
        <div class="input">
            <label for="select">Country</label>
            <select id="select">
                <option>Australia</option>
                <option>Canada</option>
                <option>USA</option>
            </select>
        </div>
        <div class="input">
            <label for="comment">Subject</label>
            <textarea id="comment" rows="10">Write something...</textarea>
        </div>
        <button type="submit" class="button">Submit</button>
    </form>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa form */
.containerx {
    padding:30px 20px;    
    background-color:#ddd;
    border-radius:5px;
}
/* Tạo kiểu cho phần tử label */
.input > label {
    display:inline-block;
    margin-bottom:6px;    
}
/* Tạo kiểu cho phần tử input */
.input > input[type="text"] {
    width:100%;
    margin-bottom:20px;
    padding:10px;
    border:1px solid #ddd;    
    border-radius:5px;
}
/* Tạo kiểu cho phần tử select */
.input > select {
    width:100%;
    padding:10px;    
    margin-bottom:20px;
    border:1px solid #ddd;
    border-radius:5px;
}
/* Tạo kiểu cho phần tử textarea */
.input > textarea {
    width:100%;
    border:1px solid #ddd;    
    border-radius:5px;
    margin-bottom:20px;
    padding:10px;
    color:#999;
}
/* Tạo kiểu cho phần tử button */
.button {
    border:none;
    outline:none;
    background-color:royalblue;
    color:white;
    padding:10px 20px;    
    border-radius:5px;
    cursor:pointer;
    opacity:0.7;
}
/* Thêm hiệu ứng khi hover */
.button:hover {
    opacity:1;    
}
/* Thêm hiệu ứng khi được lấy nét */
.input > input:focus, .input > select:focus, .input > textarea:focus {
    outline:none;
    box-shadow:0px 0px 2px 1px blue;    
}