Cách thực hiện - Biểu mẫu liên hệ
Tìm hiểu cách tạo biểu mẫu liên hệ bằng CSS.
Cách tạo biểu mẫu liên hệ
Bước 1) Thêm HTML
Sử dụng phần tử <form> để xử lý dữ liệu đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi. Sau đó thêm đầu vào (có nhãn phù hợp) cho từng trường:
Ví dụ
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text"
id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text"
id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select
id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea
id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
<input
type="submit" value="Submit">
</form>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /*
Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical /* Allow the user
to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button,
add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some
padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
Hãy tự mình thử »Mẹo: Hãy truy cập Hướng dẫn biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.
Mẹo: Hãy truy cập Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây, bạn có thể tạo trang web của mình từ đầu hoặc sử dụng mẫu và lưu trữ miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng