Chia Sẽ Kinh Nghiệm Về IT



Tìm Kiếm Với Google
-


 
 
Công Cụ Xếp Bài
Tuổi 25-11-2009, 08:50 AM   #1
hoctinhoc
Guest
 
Trả Lời: n/a
Bài 4: Các thẻ liên kết, tạo bảng va tạo mẩu FORM

Các thẻ liên kết, tạo bảng tạo mẩu FORM


Thẻ liên kết với hình ảnh:

Trong HTML, chúng ta không thể chèn trực tiếp toàn bộ ruột gan của một file hình ảnh, mà ta phải chỉ dẫn đến hình ảnh đặt bên ngoài. Để làm điều này, ta dùng thẻ <img>. Đây là 1 thẻ đơn.
Thẻ này có một số thuộc tính sau:
- Src: Xác định địa chỉ URL của hình ảnh:
- align: Xác định kiểu canh lề:
- right: Canh theo lề phải
- left:Canh theo lề trái
- center:Canh theo lề giữa.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" align = "right">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>

</BODY>
</HTML>
- border: Xác định chiều dày của viền bao quanh ảnh.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" border ="5">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>
</BODY>
</HTML>

b. Thẻ liên kết trang web.
Để tạo một liên kết tới một trang web khác, ta dùng cặp thẻ <a></a>. Cặp thẻ này có các thuộc tính sau:
Href: Địa chỉ URL của trang web cần liên kết tới. bạn đã có một bookmark trên trang web, bạn có thể trỏ đến vị trí của bookmark bằng cách dùng thuộc tính href với dấu # và tên bookmark.
name: Xác định tên của bookmark (điểm liên kết trong nội tại trang web).
Ví dụ, ta có 2 trang web:
Trang thứ nhất có địa chỉ là "tettrungthu.htm", có nội dung sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<img src ="bigreen.gif" border ="5">
Trung thu là tết thiếu nhi<BR>Tại sao người lớn lại đi chơi nhiều <BR>Chơi nhiều thì sẽ làm liều<BR>Làm liều lại đẻ ra nhiều thiếu nhi<BR></p>
</BODY>
</HTML>

Trang thứ 2 có tên là danhsachthovui.htm, có nội dung sau:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
Tet trung thu
</p>
</BODY>
</HTML>
Giả sử ta muốn thêm một liên kết với file "tettrungthu.htm" vào chữ Tet trung thu trong file danhsachthovui.htm, ta phải chèn cặp thẻ <a>...</a> như sau:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<p align="left" style="margin-left : 30">
<a href ="tettrungthu.htm">Tet trung thu</a>
</p>
</BODY>
</HTML>
Chú ý: cả 2 file này phải được đặt cùng thư mục. Trong trường hợp đặt khác thư mục các bạn phải ghi rõ đường dẫn đến file kia.


Các cặp thẻ xử lý bảng:


Các bảng trong HTML được định nghĩa như sau:
Định nghĩa 1 bảng bởi cặp thẻ <table></table>
Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.
Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>
Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:
<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:
<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.

Thuộc tính colspan sẽ chỉ định số lượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:
<table>
<tr>
<td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>

Một số thuộc tính có liên quan:
Thẻ Table:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ <td>
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).


Cách sử dụng mẫu biểu trong HTML
Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ...

Mẫu biểu được bắt đầu bằng thẻ <form> và kết thúc bởi thẻ </form>. Giữa 2 cặp thẻ này, các bạn có thể sử dụng các cặp thẻ HTML khác.
Thẻ form có một số thuộc tính sau:
- method
Thuộc tính này có 2 giá trị POST hoặc GET, để xác định dữ liệu gửi lên theo kiểu POST hay GET.
Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô Address dưới dạng các căp tên=giá_tri. Nhược điểm của kiểu này là toàn bộ cái URL và xâu tên=giá_trị kia sẽ bị giới hạn dưới 255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi nhiều dữ liệu hơn, người ta đã sinh ra kiểu POST. Với kiểu này, dữ liệu sẽ không bị giới hạn chiều dài 255 ký tự của chuỗi địa chỉ do không bị gộp vào chuỗi địa chỉ. Kiểu POST cũng thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô Address (password chẳng hạn).
Ví dụ:
<form method = "post"> Thử một tí
</form>
- action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tính này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó trình duyệt sẽ tải lại nội dung mới).
Ví dụ:
<form method = "post" action ="thu2ti.php"> Thử hai tí
</form>
Tuy nhiên, 2 ví dụ trên chưa có ý nghĩa gì, vì chúng ta chưa trang bị các thành phần cơ bản của form như ô văn bản, nút bấm...

Các thẻ nhập vào (input)
Thẻ input có một số thuộc tính, mỗi thuộc tính sẽ quy định những chức năng riêng:
- name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.
- Value: Xác định giá trị đặt trước cho thẻ.
- type:
Thuộc tính này có một số giá trị sau:

* submit: Sẽ xác định một nút bấm (submit) mà khi kích chuột vào đó, form sẽ tự động kích hoạt và gửi dữ liệu đi
* text: Hiển thị một ô văn bản cho phép người sử dụng nhập văn bản
* password: Hiển thị ô văn bản để nhập password.
* hidden: Tạo một biến ẩn, ta có thể dùng nó để lưu trữ các dữ liệu "ẩn" khỏi người dùng, tất nhiên nếu họ biết View source lên thì chịu.

Ví dụ: đoạn mã sau sinh ra một form có 1 ô văn bản, một ô nhập mật khẩu và 1 nút bấm:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login" name="B1"></p>
</form>

Thẻ tạo hộp chọn xổ xuống:
Danh sách sổ xuống là một ô danh sách cho phép bạn kích chọn 1 mục trong danh sách sẵn có.
Để tạo một hộp chọn sổ xuống, ta phải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:
<Select name =xxx>
<option value = gia_trí1>nội dung 1</option>
<option value = gia_trí2>nội dung 2</option>
<option value = gia_trí3>nội dung 3</option>
.....
<option value = gia_trín>nội dung n</option>
</select>
Trong đó:
Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh sách sổ xuống.
Các thẻ option xác định giá trị của tên biến trong thẻ select nếu được chọn. Giá trị sẽ được gán vào biến nằm trong thuộc tính value của thẻ option.

Ví dụ:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login" name="B1"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
</form>

Khi người dùng kích chọn Male, giá trị 1 sẽ được chuyển vào biến sex (được định nghĩa trong thẻ Select>).

Các thẻ lựa chọn radio:
Các thẻ này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép kích chọn 1 trong các nút đó.
Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
<input type="radio" value="" name="R1">

Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:

<input type=radio name="switcher" value="OFF" >Tắt
<input type=radio name="switcher" checked value="TELEX" >Telex
<input type=radio name="switcher" value="VNI"> VNI

Thẻ nhập khối văn bản
Thẻ input với thuộc tính type = text chỉ cho phép ta hiển thị ra một ô văn bản nhỏ (hiện được 1 dòng). Để hiện ra một ô soạn thảo lớn, có thể hiển thị nhiều dòng đồng thời, ta phải dùng thẻ textarea:
<textarea name =xxx>Giá trị mặc định của khối văn bản </textarea>

Còn một số cặp thẻ khác, nhưng ít nhất thì tôi cũng không nhớ ra tại thời điểm này. Các bạn có thể vào FrontPage, sau đó sử dụng menu Insert/Form để chèn các thành phần này vào, sau đó các bạn có thể vào xem và thay đổi các thuộc cơ bản của chúng. Còn bây giờ, chúng ta quay lại với việc lấy dữ liệu của PHP:

Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $HTTP_POST_VARS[]. Mảng này có chỉ số chính là tên của các phần tử trong form và giá trị là nội dung giá trị do người sử dụng nhập vào các phần tử có tên tương ứng. Chẳng hạn với mẫu biểu sau:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
<input type="submit" value="Gui di" name="B1">
</form>


Theo: phpvn

  Trả lời ngay kèm theo trích dẫn này
 



Quyền Hạn Của Bạn
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Mở
Hình Cảm xúc đang Mở
[IMG] đang Mở
Mã HTML đang Tắt




Bây giờ là 05:32 AM. Giờ GMT +7



Diễn đàn tin học QuantriNet
quantrinet.com | quantrimang.co.cc
Founded by Trương Văn Phương | Developed by QuantriNet's members.
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.