Trang chủ Liên hệ Sơ đồ  
 
Trang chủ 1001 Mẫu Web Thiết kế Web Lập trình Quản trị Web Web & Hosting Hình nền Blog Icon & Logo
 
 
     
[ In bài ] [ Trở về ]
Tự tạo cho mình một Form Mail (Phần II)
 (Thứ Sáu, 04/04/2008 - 3:50 PM)
Sau khi đăng bài viết "Tự tạo cho mình một form mail", tôi đã nhận được một số thư của các bạn hỏi về việc sử dụng và cải tiến chương trình EZMAIL. Bài viết này nhằm đáp ứng phần nào những yêu cầu đó.

Ngay hàng thẳng lối

Để làm cho các ô nhập liệu và phần mô tả các ô này trong tệp EZMAIL.HTM gióng thẳng hàng với nhau, cách hiệu quả nhất là đưa chúng vào bảng. Ta hãy sử dụng thẻ <TABLE> cùng các thẻ đi kèm <TR>, <TD> để làm việc này.

Trong FrontPage, bạn chỉ việc nhấn chuột vào nút để tạo ra một bảng gồm 2 cột, 5 hàng, sau đó kéo từng phần tử của form vào ô tương ứng. Mã HTML của đoạn này sẽ như sau:

<TABLE BORDER="0" CELLSPACING="1" WIDTH="100%">

<TR>

<TD WIDTH="17%">Your Name:</TD>

<TD WIDTH="83%"> <INPUT NAME="SenderName" TYPE="text" SIZE="35"></TD>

</TR>

<TR>

<TD WIDTH="17%">Your Email: </TD>

<TD WIDTH="83%"> <INPUT NAME="SenderEmail" TYPE="text" SIZE="35"></TD>

</TR>

<TR>

<TD WIDTH="17%">Subject: </TD>

<TD WIDTH="83%"> <INPUT NAME="Subject" TYPE="text" SIZE="35"></TD>

</TR>

<TR>

<TD WIDTH="17%">Message</TD>

<TD WIDTH="83%"><TEXTAREA NAME="Message" ROWS="5" COLS="40"></TEXTAREA></TD>

</TR>

<TR>

<TD WIDTH="17%">&nbsp;</TD>

<TD WIDTH="83%">

<INPUT TYPE="Submit" VALUE="Send">&nbsp; <INPUT TYPE="Reset"></TD>

</TR>

</TABLE>

Tô màu cho Form

Bạn có thể tô màu cho cả form bằng việc thay đổi thuộc tính BGCOLOR của thẻ <TABLE>.

<TABLE BORDER="0" CELLSPACING="1" WIDTH="100%" BGCOLOR="#CDFFBA">

Còn nếu muốn tô màu cho từng ô nhập liệu thì điều chỉnh thẻ <INPUT> như sau:

<INPUT NAME="SenderName" TYPE="text" SIZE="35" STYLE="background: #FFCC99;">

Làm cho Form thêm đa dạng

Bạn có thể bổ sung thêm các thành phần để cho form được đa dạng và đáp ứng yêu cầu thu thập thông tin từ người dùng. Thành phần đầu tiên bạn có thể thêm vào là nút radio. Nút này thể hiện một loạt những lựa chọn và người dùng chỉ có thể chọn một trong các lựa chọn đó. Ví dụ bạn muốn biết người dùng đánh giá thế nào về website của mình, bạn có thể tạo một nút radio gồm 3 lựa chọn Tốt, Khá, Trung bình. Lưu ý là thuộc tính NAME trong cả 3 thẻ <INPUT> này phải giống nhau:

How do you rate this website?
<INPUT TYPE=RADIO NAME="Rating" VALUE="Good" CHECKED>Good
<INPUT TYPE=RADIO NAME="Rating" VALUE="Average">Average
<INPUT TYPE=RADIO NAME="Rating" VALUE="Bad">Bad

Bạn cũng có thể thêm vào form của mình một hay nhiều hộp kiểm. Một hộp kiểm chỉ nhận một trong hai giá trị - được đánh dấu (checked) hoặc không được đánh dấu (unchecked). Do đó, hộp kiểm rất thích hợp với những thông tin đối lập, kiểu như Nam/Nữ, Có/Không, Đúng/Sai.

<INPUT TYPE=CHECKBOX NAME="Gender" VALUE="Male" CHECKED>Male?

Nếu muốn tạo ra một danh sách nhiều lựa chọn hơn, bạn phải dùng đến hộp combo. Hộp này được tạo bởi cặp thẻ <SELECT> </SELECT> và ở giữa là số lượng tùy ý các thẻ <OPTION> để mô tả các lựa chọn. Ví dụ bạn muốn biết độ tuổi của người gửi thông tin cho bạn:

<SELECT NAME="Age">
<OPTION VALUE="Under 20" SELECTED>Under 20
<OPTION VALUE="20 - 30">20 - 30
<OPTION VALUE="30 - 40">30 - 40
<OPTION VALUE="Over 40">Over 40
</SELECT>

Ở tệp EZMAIL.PHP, bạn sẽ phải thêm một số dòng lệnh để thể hiện những thông tin thu thập được trong thông điệp của mình:

if (!$Gender)
$Gender = "Female";
$Message .= "\r\nWebsite rating: $Rating";
$Message .= "\r\n(About Sender: $SenderName, $Gender, $Age)";

2 Trong 1

Trong thời đại của những cơm 5 trong 1 (cơm hộp), cà-phê 3 trong 1 thì liệu ta có thể nhập hai tệp EZMAIL.HTM và EZMAIL.PHP lại làm một được không? Câu trả lời là có. Và đây chính là điểm mạnh cũng như tính uyển chuyển của PHP. Bạn chỉ việc kết hợp cả hai tệp lại với nhau, thêm một ít dòng lệnh nữa là xong. Dưới đây là toàn bộ mã của tệp EZMAIL-3.PHP, bao gồm cả một bảng đã tô màu, gióng thẳng hàng các thành phần trong form, bổ sung thêm một số thành phần mới và kết hợp cả phần hiển thị form (EZMAIL.HTM) lẫn phần xử lý form (EZMAIL.PHP).

Nếu để ý một chút, bạn có thể thấy tôi đã chuyển các biến RecipientEmail, CcEmail, DefaultSubject, RedirectPage từ phần mã HTML sang phần mã PHP và đặt ngay ở đầu chương trình để bạn có thể dễ dàng tùy biến. Còn một lý do nữa để làm việc này là có thể bạn không muốn địa chỉ e-mail của mình rơi vào tay các spammer (những kẻ săn lùng địa chỉ e-mail để gửi quảng cáo). Bạn nhớ thay các biến RecipientEmail và CcEmail bằng địa chỉ e-mail thật của bạn.

EZMAIL-3.PHP

<?php

/*

###################################

# EZMail: powered by www.thanhhai.com #

###################################

*/

$RecipientEmail = "yourname@yourdomain.com";

$DefaultSubject = "Feedback from My Website";

$RedirectPage = "http://www.thanhhai.com";

$CcEmail = "cc@yourdomain.com";

if (!$submit) {

?>

<HTML>

<HEAD>

<TITLE>EZMail: powered by www.thanhhai.com</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

</HEAD>

<BODY>

<FORM ACTION="<?php echo $PHP_SELF ?>" METHOD="POST">

<TABLE BORDER="0" CELLSPACING="1" WIDTH="100%" BGCOLOR="#CDFFBA">

<TR>

<TD WIDTH="20%">Your Name:</TD>

<TD WIDTH="80%"> <INPUT NAME="SenderName" TYPE="text" SIZE="35">

<INPUT TYPE=CHECKBOX NAME="Gender" VALUE="Male" CHECKED>Male?

<SELECT NAME="Age">

<OPTION VALUE="Under 20" SELECTED>Under 20

<OPTION VALUE="20 - 30">20 - 30

<OPTION VALUE="30 - 40">30 - 40

<OPTION VALUE="Over 40">Over 40

</SELECT>

</TD>

</TR>

<TR>

<TD WIDTH="20%">Your Email: </TD>

<TD WIDTH="80%"> <INPUT NAME="SenderEmail" TYPE="text" SIZE="35"></TD>

</TR>

<TR>

<TD WIDTH="20%">Subject: </TD>

<TD WIDTH="80%"> <INPUT NAME="Subject" TYPE="text" SIZE="35"></TD>

</TR>

<TR>

<TD WIDTH="20%">Message</TD>

<TD WIDTH="80%"><TEXTAREA NAME="Message" ROWS="5" COLS="40"></TEXTAREA></TD>

</TR>

<TR>

<TD WIDTH="20%">How do you rate this website?</TD>

<TD WIDTH="80%">

<INPUT TYPE=RADIO NAME="Rating" VALUE="Good" CHECKED>Good

<INPUT TYPE=RADIO NAME="Rating" VALUE="Average">Average

<INPUT TYPE=RADIO NAME="Rating" VALUE="Bad">Bad

</TD>

</TR>

<TR>

<TD WIDTH="20%"></TD>

<TD WIDTH="80%">

<INPUT TYPE="Submit" NAME="submit" VALUE="Send">&nbsp; <INPUT TYPE="Reset"></TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

<?php

}

else {

if ((!$SenderEmail) || (!$Message)) {

echo ("Missing your email or message!");

exit ();

}

if (!eregi("^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$", $SenderEmail)) {

echo ("Your email address is invalid");

exit ();

}

if (!$Subject)

$Subject = $DefaultSubject;

if (!$Gender)

$Gender = "Female";

$Message .= "\r\nWebsite rating: $Rating";

$Message .= "\r\n(About Sender: $SenderName, $Gender, $Age)";

$Headers .= "From: $SenderName <$SenderEmail>\r\nReply-To: $SenderEmail";

if ($CcEmail)

$Headers .= "\r\nCc: $CcEmail";

mail ($RecipientEmail, $Subject, $Message, $Headers);

if ($RedirectPage) {

header ("Location: $RedirectPage");

} else {

echo "<CENTER><H1>Thank you for using EZ Mail</H1>";

echo "<P>Powered by www.thanhhai.com</CENTER>";

}

}

?>

Bạn có thể tải về các tệp mã nguồn tại đây: http://www.thanhhai.com/computer/ezmail/ezmail.zip



Bài liên quan:

Tự tạo cho mình một Form Mail (Phần I)


Theo echip

3Cdotcom   Nhà cung cấp dịch vụ Hosting số 1 Việt Nam" www.hosting.net.vn