35. Form Trong CSS

Form trong CSS:

Dưới đây là một ví dụ về cách tạo một form đơn giản sử dụng HTML và CSS:

HTML:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Form Example</title>
</head>
<body>
  <div class="form-container">
    <h2>Contact Us</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
      
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      
      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="4" required></textarea>
      
      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>

CSS (styles.css):

css

/* Định dạng container của form */
.form-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Định dạng tiêu đề của form */
.form-container h2 {
  margin-bottom: 15px;
}

/* Định dạng label và input */
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

/* Định dạng button */
button {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

Trong ví dụ này:

.form-container là container của form.
.form-container h2 định dạng tiêu đề của form.
label định dạng label cho từng input hoặc textarea.
input và textarea định dạng các trường nhập liệu.
button định dạng nút submit.

Đây chỉ là một ví dụ cơ bản về cách tạo một form sử dụng HTML và CSS. Trong thực tế, bạn có thể tùy chỉnh kiểu dáng và thêm các chức năng JavaScript để tạo ra các form phức tạp hơn và tương tác hơn.

Leave a Comment Cancel Reply