Dưới đây là một ví dụ về mã HTML và CSS cho một biểu mẫu đơn giản. Trong ví dụ này, biểu mẫu có hai trường đầu vào: một trường văn bản và một trường email.
Mã HTML:
<form>
<label for="name">Tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
Mã CSS:
form {
display: flex;
flex-direction: column;
align-items: flex-start;
}
label {
margin-bottom: 0.5rem;
}
input {
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1rem;
}
button {
padding: 0.5rem 1rem;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
Giải thích:
- Mã HTML bao gồm một thẻ
<form>
để bao bọc toàn bộ biểu mẫu. Các trường đầu vào được thêm bằng cách sử dụng thẻ<input>
với các thuộc tínhtype
,id
, vàname
để xác định loại dữ liệu và tên của trường. Nhãn cho mỗi trường được tạo bằng thẻ<label>
với thuộc tínhfor
để liên kết vớiid
của trường đầu vào tương ứng. Cuối cùng, một nút gửi được thêm bằng cách sử dụng thẻ<button>
với thuộc tínhtype
là “submit” để gửi biểu mẫu. - Mã CSS xác định kiểu dáng của các phần tử trong biểu mẫu. Các trường đầu vào được căn chỉnh sang trái bằng cách sử dụng
display: flex
vàflex-direction: column
trên thẻ<form>
. Các thuộc tính khác được sử dụng để định dạng các trường đầu vào và nút gửi, bao gồm định dạng văn bản, đường viền, màu nền, kích thước, và hình dạng. Các thuộc tính:hover
được sử dụng để thay đổi màu nền khi con trỏ chuột di chuyển qua nút gửi.
Hi there, just became aware of your blog through Google, and found that it is really informative.
I’m gonna watch out for brussels. I’ll
appreciate if you continue this in future.
Numerous people will be benefited from your writing.
Cheers! Escape room
You have remarked very interesting points! ps nice web site.?