Chúng ta sẽ tiếp tục với trang Contact.
HTML FormHTML Form được sử dụng để thu thập dữ liệu đầu vào của người dùng. Dữ liệu đầu vào của người dùng thường được gửi đến máy chủ để xử lý. Trong phần HTML và CSS, chúng ta sẽ không đi sâu thảo luận về những gì xảy ra trên máy chủ, cái đó chúng ta sẽ thảo luận trong chủ đề PHP. Chúng ta sẽ chỉ tạo một trang contact "giả", nghĩa là chỉ có một form và không "phản ứng" gì với thông tin nhận được.
Trong "sự nghiệp lướt web", không biết bao nhiêu lần chúng ta đã "chạm mặt" HTML Form. Đây là một ví dụ
Đại khái nó gồm "những ô" để điền thông tin vào, sau đó bấm nút, thông tin sẽ được truyền "đi đâu đó".
HTML <form> element
HTML <form> element được sử dụng để tạo biểu mẫu HTML cho người dùng nhập dữ liệu. Muốn tạo một biểu mẫu nào đó, ví dụ đăng ký một account, gửi một message, đăng nhập vào một website...chúng ta sử dụng cặp thẻ <form></form> như sau:
<form>
form elements
</form>
Có rất nhiều <form> element ví dụ text fields, checkboxes, radio buttons, submit buttons...Chúng ta chỉ thảo luận qua về text fields và submit buttons.
Quay lại ví dụ về một form ở trên.
Chúng ta nhận thấy sẽ có ít nhất là một Submit Button, một Label và một Text Field.
Mã cho một form đơn giản gồm 3 phần tử sẽ đại khái thế này:
<!DOCTYPE html>
<html>
<body>
<h2>Contact Us</h2>
<form action="">
<label for="fname">Tên bạn:</label><br>
<input type="text" id="fname" name="fname" value="Tran Van A"><br>
<input type="submit" value="Submit">
</form>
<p>Khi chúng ta bấm vào "Submit" button, dữ liệu nhập vào sẽ được chuyển qua một trang khác để xử lý.</p>
</body>
</html>
Chúng ta vẫn sử dụng OnlineGDB để thực thi mã HTML của chúng ta.
- Thẻ <form> sẽ cần ghi rõ là dữ liệu do trang nào xử lý, ví dụ ta có một trang ten là action.php dùng để xử lý thông tin nhập từ form thì chúng ta sẽ cần ghi như sau
<form action="action.php">
- Thẻ <label> đơn giản chỉ để "ghi chú" là Text field đó, hay bất cứ phần tử nào như checkbox, radiobutton... để nhập thông tin gì, ví dụ tên, email, địa chỉ...
- Thẻ <input> có thể được hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type. Ở đây chúng ta qui định type = "text" nên nó sẽ hiển thị một text field.
- Thông tin id="fname" name="fname" hiện tại chưa bàn tới, nếu muốn bạn có thể bỏ đi mà không làm cho "nhan sắc" của form Contact Us thay đổi.
- Thông tin value="Tran Van A" nhằm điền một thông tin mẫu cho text filed.
Quay lại với mục đích của chúng ta là tạo một trang Contact. Mọi trang Contact đều có một phần tử input type = "textarea", chúng ta sẽ thêm vào form. Giờ đây form của chúng ta sẽ như sau.
<!DOCTYPE html>
<html>
<body>
<h2>Contact Us</h2>
<form action="">
<label for="fname">Tên bạn:</label><br>
<input type="text" id="fname" name="fname" value="Tran Van A"><br>
<textarea name="message" rows="10" cols="30">Tôi xin có ý kiến là....</textarea><br>
<input type="submit" value="Submit">
</form>
<p>Khi chúng ta bấm vào "Submit" button, dữ liệu nhập vào sẽ được chuyển qua một trang khác để xử lý.</p>
</body>
</html>
Bấm Run để thực thi
Chúng ta chỉ cần sửa sang lại đôi chút là hoàn tất trang Contact, trang Contact của chúng ta sẽ không hoạt động, chỉ để "làm cảnh" thôi.
Chúng ta sẽ sử dụng CSS để tạo trang Contact với phác thảo như sau:
Có lẽ chúng ta đều nhận ra rằng không có CSS thì mọi việc vẫn ổn. Giống như mã HTML phía trên, chúng ta hoàn toàn có thể lưu lại và trở thành trang contact.html của chúng ta. Tuy nhiên, "đẹp hơn" thì vẫn tốt hơn.
Phần tiêu đề, chúng ta cứ để "thuận theo tự nhiên", không cần thay đổi gì.
Chúng ta sẽ coi phần bên dưới nằm trong một class gọi là container. Không cần làm gì nhiều với class container, chỉ cần tạo một vùng padding bao quanh thôi.
Trong container có hai phần màu tím trong hình trên, phần bên trái chiếm 25% bề ngang sẽ chứa các label, phần bên phải chiếm 75% chứa các form elements.
Cuối cùng là Submit button, chúng ta sẽ cho nó vào một hàng riêng.
Đây là hai class cho hai cột trái phải
.colleft {
float: left;
width: 25%;
margin-top: 6px;
}
.colright {
float: left;
width: 75%;
margin-top: 6px;
}
Nó đơn giản qui định chiều ngang của mỗi cột mà thôi.
Mã HTML của chúng ta giờ đây sẽ thế này
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.colleft {
float: left;
width: 25%;
margin-top: 6px;
}
.colright {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
}
</style>
</head>
<body>
<h2>Contact Us</h2>
<p>Cám ơn bạn đã ghé thăm website. Vui lòng điền thông tin và nhấn nút Gửi.</p>
<div class="container">
<form action="">
<div class="row">
<div class="colleft">
<label for="fname">Tên bạn</label>
</div>
<div class="colright">
<input type="text" id="fname" name="firstname" placeholder="Tên bạn..">
</div>
</div>
<div class="row">
<div class="colleft">
<label for="subject">Nội dung</label>
</div>
<div class="colright">
<textarea id="subject" name="subject" placeholder="Xin viết nội dung ở đây.." style="height:200px"></textarea>
</div>
</div>
<br>
<div class="row">
<input type="submit" value="Gửi">
</div>
</form>
</div>
</body>
</html>
Bấm Run để thực thi
Chúng ta sẽ lưu lại với tên contact.html
Không có nhận xét nào:
Đăng nhận xét