Skip to content

Định kiểu biểu mẫu

Tóm lược nội dung

Bài này trình bày cách định kiểu cho một số thành phần trong biểu mẫu.

Định kiểu thẻ form và nhãn

Bước 0

Đặt biểu mẫu vào thẻ <div>. Bỏ hết các thẻ <br>.

portfolio.html
115
116
117
118
119
120
121
122
123
124
125
126
127
    <h2>Biểu mẫu góp ý</h2>
    <div class="form-container">
        <p>Xin bạn vui lòng bỏ ít thời gian góp ý cho trang portfolio của mình</p>
        <form method="POST">
            <label for="realname">Tên của bạn</label>
            <input type="text" id="realname" name="realname" value="">
            <label for="gmail">Email của bạn</label>
            <input type="email" id="gmail" name="gmail" value="@gmail.com">
            <label for="feedback">Ý kiến đóng góp của bạn</label>
            <textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea>
            <button type="submit">Gửi ý kiến</button>
        </form>   
    </div>

Bước 1

Viết mã lệnh CSS cho lớp .form-container, thẻ form và nhãn.

style.css
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap'); /* (1)! */

.form-container {
    font-family: 'Roboto', sans-serif;
    background-color: #FFFBFE;
    color: #1C1B1F;
    width: 100%;
}

form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 0.2rem;
    color: #1C1B1F;
}

  1. Nhúng font từ website của Google.

Định kiểu hộp văn bản

Viết mã lệnh CSS cho các hộp văn bản ở trạng thái mặc định và trạng thái đang nhận con trỏ chuột.

style.css
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
input[type="text"],
input[type="email"],
textarea {
    width: 90%;
    padding: 12px;
    margin: 0.3rem auto 1.5rem auto;
    border: 1px solid #79747E;
    border-radius: 30px;
    font-size: 1rem;
    transition: border-color 0.3s ease; /* (1)! */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    outline: none;
    border-color: #0097be;
}

  1. Tạo hiệu ứng chuyển cảnh mượt mà khi thay đổi màu sắc của thuộc tính border-color.

Định kiểu nút nhấn

Viết mã lệnh CSS cho nút nhấn ở trạng thái mặc định và trạng thái đang có con trỏ chuột nằm trên.

style.css
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
button[type="submit"] {
    background-color: #f5f5f5;
    color: #0097be;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 1rem;
    cursor: pointer; /* (1)! */
    transition: background-color 0.3s ease; /* (2)! */
}

button[type="submit"]:hover {
    background-color: #0097be;
    color: #fff;
}

  1. Biến con trỏ chuột thành hình bàn tay nhỏ có ngón tay đang trỏ vào nút nhấn

  2. Tạo hiệu ứng chuyển cảnh mượt mà khi thay đổi màu sắc của thuộc tính background-color.

Click để xem kết xuất trang portfolio trong tab mới