Xem hướng dẫn chi tiết buổi 5 qua video
A – LÝ THUYẾT
I – GIỚI THIỆU VỀ FORM
1 – Khái niệm về Form
Form đơn giản là các biểu mẫu nhằm giúp
người dùng tương tác với hệ thống, mà cụ thể là người dùng có thể gửi các thông
tin cho hệ thống hay người quản trị hệ thống thông qua Form
2 – Các ứng dụng của Form
Form là một thành phần không thể thiếu đối
với các website, nó có thể dùng để tạo nên rất nhiều biểu mẫu phục vụ cho việc
tương tác giữa người dùng với hệ thống như:
a)
Form đăng
nhập hệ thống
b)
Form đăng
ký
c)
Form liên
hệ
d)
…
II – LÀM VIỆC VỚI FORM
1 – Form và các uộc tính của Form
a) Thẻ <form></form>
·
name:
Tên của Form. Giá trị của thuộc tính là một đoạn text thể hiện tên của Form
·
action:
Hướng xử lý dữ liệu của Form. Giá trị của thuộc tính là đường dẫn tới trang xử
lý dữ liệu trong Form
·
method:
Phương thức xử lý dữ liệu của Form. Giá trị có thể sử dụng là POST hoặc GET
Ba
thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các
ngôn ngữ lập trình như (Javascript, PHP,…)
III – LÀM VIỆC VỚI CÁC ĐỐI TƯỢNG TRONG FORM
1 – Các đối tượng của thẻ <input>
Thẻ
<input> trong Form có thể tạo
ra rất nhiều các đối tượng khác nhau, sự khác nhau đó được quy định bởi thuộc
tính type trong Form. Mỗi một giá
trị khác nhau của type sẽ tạo ra một
đối tượng khác tương ứng.
b) Làm việc với đối tượng Textbox của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Textbox là:
text
·
name:
Tên của đối tượng Textbox. Giá trị là đoạn text thể hiện tên, thuộc tính này
chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình
như (Javascript, PHP,…)
·
value:
Giá trị của đối tượng Textbox. Giá trị của thuộc tính này là bất cứ ký tự nào,
với mục đích hiển thị các ký tự đó ngay trong hộp thoại Textbox
·
size:
Độ rộng của trường Textbox. Giá trị sử dụng là một số nguyên dương.
c) Làm việc với đối tượng Password của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Password
là: password
·
name:
Tên của đối tượng Password. Giá trị là đoạn text thể hiện tên, thuộc tính này
chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình
như (Javascript, PHP,…)
·
value:
Giá trị của đối tượng Password. Giá trị của thuộc tính này là bất cứ ký tự nào,
với mục đích hiển thị các ký tự đó ngay trong hộp thoại Password
·
size:
Độ rộng của trường Password. Giá trị sử dụng là một số nguyên dương.
d) Làm việc với đối tượng Checkbox của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Checkbox
là: checkbox
·
name:
Tên của đối tượng Checkbox. Giá trị là đoạn text thể hiện tên, thuộc tính này
chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình
như (Javascript, PHP,…)
·
value:
Giá trị của đối tượng Checkbox. Giá trị là đoạn text thể hiện giá trị của
Checkbox, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML
với các ngôn ngữ lập trình như (Javascript, PHP,…)
·
checked:
Mặc định lựa chọn Checkbox có thuộc tính này. Giá trị sử dụng để có được sự lựa
chọn cho Checkbox này đó là: checked
e) Làm việc với đối tượng Radio của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Radio là: radio
·
name:
Tên của đối tượng Radio. Giá trị là đoạn text thể hiện tên.
·
value:
Giá trị của đối tượng Radio. Giá trị là đoạn text thể hiện giá trị của Radio,
thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các
ngôn ngữ lập trình như (Javascript, PHP,…)
·
checked:
Mặc định lựa chọn phần tử Radio có thuộc tính này đối với các phần tử Radio còn
lại. Giá trị sử dụng để có được sự lựa chọn cho Radio này đó là: checked
Chú ý: Nếu chúng ta sử dụng một nhóm các Radio (Bao
gồm 2 thành phần Radio trở lên) thì thuộc tính name của các thành phần này phải
có giá trị giống nhau
f) Làm việc với đối tượng File của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng File là: file
·
name:
Tên của đối tượng File. Giá trị là đoạn text thể hiện tên, thuộc tính này chỉ
sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập trình như
(Javascript, PHP,…
VD:
<form name = “contact” action = “contact.php” method = “post”>
<input type =
“file” name = “fileupload”>
</form>
g) Làm việc với đối tượng Submit Button của
thẻ <input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Submit
Button là: submit
·
name:
Tên của đối tượng Submit Button. Giá trị là đoạn text thể hiện tên, thuộc tính
này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập
trình như (Javascript, PHP,…)
·
value:
Giá trị sẽ hiển thị ngay trên nút Submit Button. Giá trị là một đoạn text được
sử dụng do người dùng gõ vào để hiển thị tên trên nút Submit button
h) Làm việc với đối tượng Reset Button của thẻ
<input>
·
type: Thuộc
tính quy định kiểu hiển thị của đối tượng. Giá trị để hiển thị dạng Reset
Button là: reset
·
name:
Tên của đối tượng Reset Button Giá trị là đoạn text thể hiện tên, thuộc tính
này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML với các ngôn ngữ lập
trình như (Javascript, PHP,…)
·
value:
Giá trị sẽ hiển thị ngay trên nút Reset Button. Giá trị là một đoạn text được
sử dụng do người dùng gõ vào để hiển thị tên trên nút Reset button
2 - Làm việc với đối tượng Selectbox
a) Cặp thẻ <select></select>
Cặp thẻ
<select></select> dùng để khai báo bắt đầu làm việc với một danh
sách các đối tượng mà người dùng muốn lựa chọn
·
name:
Tên của đối tượng Selectbox. Giá trị là đoạn text thể hiện tên.
·
multiple:
Thuộc tính quy định kiểu hiển thị tất cả các đối tượng trong Select hay còn gọi
là danh sách các Option. Giá trị bằng multiple
sẽ chuyển Selectbox sang chế độ hiển thị toàn bộ các Option và có thể sử dụng
Ctrl để lựa chọn nhiều giá trị cùng lúc
b) Cặp thẻ <option></option>
Cặp thẻ
<option></option> nằm bên trong cặp thẻ
<select></select> dùng để khai báo một phần tử trong danh sách. Một
danh sách có thể có một hoặc nhiều phần tử.
·
value:
Giá trị của mỗi thành phần Option. Giá trị là đoạn text thể hiện giá trị của
mỗi Option, thuộc tính này chỉ sử dụng và có tác dụng khi chúng ta kết hợp HTML
với các ngôn ngữ lập trình như (Javascript, PHP,…)
·
selected:
Thuộc tính này mặc định Option được chọn và hiểm thị ngay đầu tiên trong danh
sách tất cả các Option. Giá trị bằng selected
sẽ mặc định chọn thành phần Option nào có thuộc tính này
3 - Làm việc với đối tượng Textarea
a) Cặp thẻ <textarea></textarea>
·
name: Tên
của đối tượng Textarea. Giá trị là đoạn text thể hiện tên.
·
Cols:
Quy định độ rộng của trường Textarea. Giá trị sử dụng là một số nguyên dương
·
Rows:
Quy định độ cao của trường Textarea. Giá trị sử dụng là một số nguyên dương
VD:
4 – Một số thẻ định dạng được sử dụng cho
Form
a) Cặp thẻ <fieldset></fieldset>
·
Tạo ra khung bao lấy các đối tượng trong Form
b) Cặp thẻ <legend></legend>
·
Cặp thẻ <legend></legend>
nằm bên trong cặp thẻ <fieldset></fieldset> và dùng để tạo tiêu đề
cho Form và nằm lưng chừng ở phần khung bao
Chú ý: Chúng ta hoàn toàn sử dụng được các thẻ HTML ddingj dạng văn
bản để định dạng cho các phần tử nằm bên trong cặp thẻ <legend></legend>
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1:
Sử
dụng Form và Table để thiết kế hộp đăng nhập như hình 1 dưới đây
Đáp án:
<html>
<head><title>HTML 5</title></head>
<body>
<form name="dangnhap">
<table align="center" border="1">
<tr>
<td align="center" colspan="2" bgcolor="#666666"><font color="#FFFFFF"><b>Đăng Nhập Hệ Thống</b></font></td>
</tr>
<tr>
<td>Tên tài khoản</td>
<td><input type="text" name="user" value="administrator"></td>
</tr>
<tr>
<td>Mật khẩu</td>
<td><input type="password" name="pass" value="vietpro"></td>
</tr>
<tr>
<td>Xác nhận mật khẩu</td>
<td><input type="password" name="pass" value="vietpro"></td>
</tr>
<tr>
<td>Ghi nhớ</td>
<td><input checked="checked" type="checkbox" name="check"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="gui" value="Đăng nhập"> <input type="reset" name="lammoi" value="Làm mới"></td>
</tr>
<tr height="30px">
<td colspan="2" bgcolor="#666666"></td>
</tr>
</table>
</form>
</body>
</html>
II – BÀI TẬP VỀ NHÀ
1 – Bài tập
Bài 2:
Sử
dụng các kiến thức về Form và các đối tượng trong Form để hoàn thiện trang liện
hệ của website như hình 2 dưới đây.
<html>
<head><title>Bài 2</title></head>
<body>
<table align="center" width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="100" colspan="3" align="center" background="images/banner.gif"> </td>
</tr>
<tr>
<td height="32" colspan="3" align="left" valign="middle" background="images/background.gif">
<!--Menu ngang-->
<table height="32" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><a href="#">trang chủ</a></td>
<td align="center" valign="middle"><a href="#">giới thiệu</a></td>
<td align="center" valign="middle"><a href="#">tin tức</a></td>
<td align="center" valign="middle"><a href="#">liên hệ</a></td>
<td align="center" valign="middle"><a href="#">diễn đàn</a></td>
</tr>
</table>
<!--End Menu ngang-->
</td>
</tr>
<!--Hr-->
<tr>
<td colspan="3"><hr size="2" color="#434343"></td>
</tr>
<!--End Hr-->
<tr>
<td width="150" valign="top">
<!--Menu trái-->
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">danh mục chính</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">gia công phần mềm</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">đào tạo lập trình viên</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">tư vấn doanh nghiệp</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">ảnh viện áo cưới</a></td>
</tr>
</table>
<br>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">bài viết đáng chú ý</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hướng dẫn đăng ký học</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hình thức học tập online</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">cài đặt & sử dụng skype</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">cài đặt & sử dụng teamviewer</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">hướng dẫn đóng học phí tại vietpro</a></td>
</tr>
</table>
<br>
<img src="images/img1.gif">
<br>
<img src="images/img2.gif">
<!--End Menu trái-->
</td>
<td width="500" align="center" valign="top">
<!--Tiêu đề-->
<h3>liên hệ</h3>
<!--End Tiêu đề-->
<!--Lien he-->
<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="164">tên tài khoản</td>
<td width="300"><input type="text" name="user" size="50" value="Vui lòng nhập tên tài khoản..."></td>
</tr>
<tr>
<td>địa chỉ email</td>
<td><input type="text" name="mail" size="50" value="Vui lòng nhập địa chỉ email..."></td>
</tr>
<tr>
<td>giới tính</td>
<td><input type="radio" name="gioitinh" checked="checked"> Nam <input type="radio" name="gioitinh"> Nữ</td>
</tr>
<tr>
<td>gửi tới</td>
<td>
<select name="luachon">
<option>Vui lòng chọn phòng ban</option>
<option>Gửi tới ban giám đốc</option>
<option>Gửi tới phòng kinh doanh</option>
<option>Gửi tới phòng marketing</option>
<option>Gửi tới phòng kỹ thuật</option>
<option>Gửi tới thiết kế</option>
</select> </td>
</tr>
<tr>
<td>nội dung liên hệ</td>
<td><textarea name="noidung" cols="38" rows="5">Nội dung bản muốn phản ánh...</textarea></td>
</tr>
<tr>
<td>lựa chọn nâng cao</td>
<td><input checked="checked" type="checkbox" name="nangcao"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="gui" value="Gửi"> <input type="reset" name="lammoi" value="Làm mới"></td>
</tr>
</table>
<!--End Lien he-->
<br>
</td>
<td width="150" valign="top">
<!--Menu phải-->
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">tư vấn trực tuyến</td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/online.gif"></td>
</tr>
<tr>
<td align="center" valign="top"><img src="images/offline.gif"></td>
</tr>
</table>
<br>
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="26" align="center" valign="middle" background="images/menu_bar.gif">các bài viết mới</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">htaccess trong php</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">html 5 & seo</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">viết trang login & logout cho hệ thống</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">css nâng cao</a></td>
</tr>
<tr>
<td align="left" valign="top"><a href="#">làm mịn da mặt với photoshop cs3</a></td>
</tr>
</table>
<br>
<img src="images/img3.gif">
<br>
<img src="images/img4.gif">
<br>
<img src="images/img5.gif">
<!--End Menu phải-->
</td>
</tr>
</table>
</body>
</html>
>>Xem bài trước: Bài 4 - LÀM VIỆC VỚI TABLE (BẢNG) TRONG HTML
>>Xem bài tiếp theo: Bài 6 - CSS LÀ GÌ – CÁC QUY ƯỚC TRONG CSS VÀ MỘT SỐ THUỘC TÍNH ĐƠN GIẢN VỀ FONT NỀN
No comments:
Post a Comment