Làm Vißc Vßi Form
Form là thành ph¿n quan trßng cÿa b¿t kÿ trang web nào. Là c¿u nßi giÿa ng±ßi dùng và hß thßng, cho phép
thu th¿p và xÿ lý thông tin. Chúng ta s¿ tìm hißu các thành ph¿n form, cách xác thÿc dÿ lißu, và làm th¿ nào
ß t¿o tr¿i nghißm ng±ßi dùng tßt nh¿t.
T¿i sao form l¿i quan trßng?
Thu th¿p thông tin tÿ ng±ßi dùng
T¿o t±¡ng tác giÿa ng±ßi dùng và ÿng dÿng
Cho phép ng ký, ng nh¿p và các chÿc nng thi¿t y¿u khác
L¿p trình PHP c¡ b¿n
hvluan.la@gmail.com
1
Nßi Dung Khóa Hßc
1
Tßng quan vß Form
Các thành ph¿n c¡ b¿n cÿa form
HTML5 và các thußc tính mßi
Các lo¿i input và validation
Cách t¿o form thân thißn vßi ng±ßi dùng
2
Xÿ lý dÿ lißu Form
Ph±¡ng thÿc GET và POST
Xÿ lý an toàn dÿ lißu nh¿p vào
Validation dÿ lißu phía server
Xÿ lý upload file và dÿ lißu phÿc t¿p
3
Hißn thß dÿ lißu
Ph¿n hßi thông báo cho ng±ßi dùng
Hißn thß lßi và thông báo thành công
L±u trÿ và hißn thß dÿ lißu tÿ c¡ sß dÿ lißu
Ajax và hißn thß không làm mßi trang
4
Bài t¿p thÿc hành
Xây dÿng form ng ký/ng nh¿p
T¿o form ¿t hàng vßi validation
Xây dÿng hß thßng feedback
L¿p trình PHP c¡ b¿n
hvluan.la@gmail.com
2
1. Form Trong Web Development
Form ±ÿc sÿ dÿng trong nhißu tr±ßng hÿp nh± ng ký tài kho¿n, ng nh¿p, tìm ki¿m, ¿t hàng, gÿi ph¿n
hßi và nhißu mÿc ích khác.
Các Lo¿i Form Phß Bi¿n
Form ng ký và ng nh¿p
Form tìm ki¿m và lßc dÿ lißu
Form liên hß và ph¿n hßi
Form thanh toán và ¿t hàng
Form upload file
Các Thành Ph¿n C¡ B¿n
Mßt form HTML th±ßng bao gßm các thành ph¿n nh±:
Tr±ßng vn b¿n (text field)
Tr±ßng m¿t kh¿u (password field)
Checkbox và radio button
Menu dropdown (select)
Textarea cho vn b¿n dài
Nút gÿi (submit button)
Xÿ Lý Form Vßi PHP
PHP cung c¿p hai m¿ng toàn cÿc chính ß xÿ lý dÿ lißu form:
$_GET: Xÿ lý dÿ lißu ±ÿc gÿi b¿ng method GET
$_POST: Xÿ lý dÿ lißu ±ÿc gÿi b¿ng method POST
L¿p trình PHP c¡ b¿n
hvluan.la@gmail.com
3
2. C¿u Trúc C¡ B¿n Cÿa Form HTML
<form action="process.php" method="POST">
<label for="name">Hß tên:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Gÿi">
</form>
Các thành ph¿n quan trßng: action (tßp xÿ lý form), method (ph±¡ng thÿc gÿi dÿ lißu), input (tr±ßng nh¿p
lißu) và name (ßnh danh cho PHP).
Gi¿i Thích Chi Ti¿t Vß Thußc Tính Form
action: Xác ßnh URL cÿa trang web ho¿c tßp script s¿ xÿ lý dÿ lißu form sau khi ng±ßi dùng submit.
Trong ví dÿ trên, "process.php" s¿ nh¿n và xÿ lý dÿ lißu.
method: Xác ßnh ph±¡ng thÿc HTTP ß gÿi dÿ lißu ¿n máy chÿ:
GET: Dÿ lißu ±ÿc gÿi thông qua URL, có thß nhìn th¿y ±ÿc và có gißi h¿n kích th±ßc. Thích hÿp cho
tìm ki¿m ho¿c dÿ lißu không nh¿y c¿m.
POST: Dÿ lißu ±ÿc gÿi ng¿m, không hißn thß trong URL, không gißi h¿n kích th±ßc. Thích hÿp cho dÿ
lißu nh¿y c¿m ho¿c t¿i lên tßp.
Các Thành Ph¿n Phß Bi¿n Trong Form
Ngoài các thành ph¿n ã th¿y trong ví dÿ, form còn có thß chÿa nhißu lo¿i tr±ßng khác:
label: T¿o nhãn cho tr±ßng input, c¿i thißn kh¿ nng ti¿p c¿n và UX.
fieldset và legend: Nhóm các tr±ßng liên quan và t¿o tiêu ß cho nhóm ó.
textarea: Cho phép nh¿p vn b¿n nhißu dòng, thích hÿp cho mô t¿, bình lu¿n.
select và option: T¿o menu th¿ xußng cho ng±ßi dùng lÿa chßn.
button: T¿o nút có thß tùy chßnh hành vi (submit, reset, ho¿c javascript).
Thußc Tính Quan Trßng Cÿa Input
Mßi tr±ßng input c¿n các thußc tính sau ß ho¿t ßng hißu qu¿ vßi PHP:
type: Xác ßnh lo¿i dÿ lißu (text, email, password, number, date...)
name: Cÿc kÿ quan trßng khi xÿ lý form vßi PHP, ßnh danh tr±ßng trong m¿ng $_POST ho¿c $_GET.
id: K¿t nßi input vßi label và cho phép JavaScript truy c¿p tr±ßng.
value: Giá trß m¿c ßnh ho¿c giá trß hißn t¿i cÿa tr±ßng.
required: ánh d¿u tr±ßng b¿t bußc ph¿i ißn tr±ßc khi submit.
placeholder: Vn b¿n gÿi ý trong tr±ßng khi nó trßng.
Xÿ Lý Form Trong PHP
Sau khi form ±ÿc gÿi ¿n máy chÿ, PHP có thß truy c¿p dÿ lißu thông qua:
// Vßi method="POST"
$name = $_POST['name'];
$email = $_POST['email'];
// Vßi method="GET"
$name = $_GET['name'];
$email = $_GET['email'];
L¿p trình PHP c¡ b¿n
hvluan.la@gmail.com
4
3. Các Lo¿i Input Trong Form
<input type="text" name="username" placeholder="Nh¿p tên ng±ßi dùng">
Input Text
Tr±ßng nh¿p vn b¿n ¡n dòng, sÿ dÿng cho tên, ßa chß, sß ißn tho¿i, v.v.
Có thß thêm thußc tính required, minlength, maxlength ß kißm tra dÿ lißu.
<input type="password" name="password">
Input Password
T±¡ng tÿ nh± text nh±ng ¿n ký tÿ ng±ßi dùng nh¿p vào b¿ng d¿u ch¿m ho¿c sao (*).
Th±ßng k¿t hÿp vßi pattern ß kißm tra ß m¿nh cÿa m¿t kh¿u.
<input type="radio" name="gender" value="male"> Nam
<input type="radio" name="gender" value="female"> Nÿ
Radio Buttons
Cho phép ng±ßi dùng chßn mßt lÿa chßn tÿ mßt nhóm các tùy chßn.
Các radio cùng mßt nhóm ph¿i có cùng thußc tính name.
<input type="checkbox" name="hobby[]" value="music"> Âm nh¿c
<input type="checkbox" name="hobby[]" value="sports"> Thß thao
Checkboxes
Cho phép ng±ßi dùng chßn nhißu tùy chßn cùng lúc.
Thêm d¿u [] trong name ß PHP nh¿n d¿ng là m¿ng giá trß.
<select name="city">
<option value="hn">Hà Nßi</option>
<option value="hcm">TP HCM</option>
</select>
Select Dropdown
T¿o danh sách th¿ xußng cho ng±ßi dùng lÿa chßn.
Thêm thußc tính multiple ß cho phép chßn nhißu giá trß.
<textarea name="message" rows="5" cols="30"></textarea>
Textarea
Tr±ßng nh¿p vn b¿n nhißu dòng, thích hÿp cho nßi dung dài.
Thußc tính rows và cols xác ßnh kích th±ßc hißn thß.
<input type="file" name="document">
Input File
Cho phép ng±ßi dùng t¿i lên tßp tÿ thi¿t bß cÿa hß.
Thêm thußc tính accept ß gißi h¿n lo¿i tßp và multiple ß t¿i nhißu tßp.
<input type="date" name="birthday">
Input Date
Tr±ßng chßn ngày tháng vßi ßnh d¿ng chu¿n.
Các bi¿n thß khác: datetime-local, month, week, time.
<input type="number" name="quantity" min="1" max="10">
Input Number
Tr±ßng nh¿p sß vßi các nút tng/gi¿m.
Thußc tính step xác ßnh b±ßc nh¿y giÿa các giá trß.
L¿p trình PHP c¡ b¿n
hvluan.la@gmail.com
5