Code HTMLvà CSS cho một form biểu mẫu cơ bản

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ính type, 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ính for để liên kết với id 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ính type 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.