Trang Chính
Admin
Giới tính
Cung Sinh
Posts
SDPoints
Thanked
Tham Gia
Tuổi
Đến từ
Sở Thích
Châm Ngôn Sống
Trong bài học này ta sẽ cách tạo form bằng các tag đơn của HTML. Khi tạo form, ta cần lưu ý nhất hai phần đó là tên nhận dạng (identifier) và giá trị (value) của form đó. Ví dụ : Trong hộp text box với tên là FirstName, người sử dụng gõ vào VASC, thì dữ liệu gửi đến server là FirstName=VASC.
tag : <Form METHOD="" ACTION=""> <...các tag khác...> </form> nằm giữa hai tag BODY
trong đó thuộc tính METHOD có hai giá trị là POST và GET. Nếu giá trị là POST, nó cho phép gửi dữ liệu từ máy Client đến Server (thường được sử dụng trong Form nhập liệu). Còn với GET thì chỉ được sử dụng trong Form vấn tin. Còn ACTION chỉ ra vị trí của CGI Script trên Server sẽ được thực hiện. Các tag trong Form thường dùng chủ yếu là <INPUT>, <SELECT>, <OPTION>.
Chúng ta sẽ lần lượt xét một số Form đơn giản như sau :
Text Blocks : Tạo ra vùng văn bản, có thể nhập nhiều dòng.
Text Boxes : Ðể nhập vào một dòng đơn.
Password Boxes : Form này giống Text Boxes nhưng không hiển thị các ký tự.
Radio Buttons : Các nút lựa chọn một.
Check Boxes : Hộp Check Boxes.
Menus : Tạo ra hộp Menu đẩy xuống.
Submit and Reset Buttons : Các Button để nhận thông tin và khởi tạo lại thông tin trên form.
Hidden Elements : Các yếu tố ẩn.
Active Images :Tạo bức ảnh kích hoạt.
CGI Script :Common Gateway Interface Script.
17.1. Bài học.
Text Blocks : <textarea rows="" cols="" name=""> Text... </textarea>
Trong đó cols là chiều rộng của vùng văn bản tính theo ký tự. rows : chiều cao vùng văn bản tính theo hàng. Name là thuộc tính để nhận dạng, sử dụng trong Script. Các bạn lưu ý là Text Blocks không bắt đầu bằng tag INPUT.
Text Boxes : <input type="text" name="" maxlength="" size="" value="">
Trong đó size chỉ chiều dài của Text Boxes. Maxlength, minlength chỉ số ký tự tối đa hay tối thiểu có thể nhập vào. value là giá trị kiểu xâu được hiển thị.
Xin hãy cho biết tên của bạn :
Password Boxes : <input type="password" minlength="" name="" size="">
Các thuộc tính đều giống với Text Boxes. Chỉ khác là khi bạn nhập dữ liệu thì các ký tự không được hiển thị.
Xin hãy cho biết mật mã :
Radio Buttons : <input type="radio" name="" checked value="">Lựa chọn
value chứa dữ liệu sẽ gửi đến Server khi Radio Button checked.
Menus : <select size="" multiple><option selected value="">Text...</option> </select>
Cũng giống như Text Blocks, Menu không bắt đầu từ INPUT mà là SELECT. Thuộc tính multiple cho phép bạn chọn nhiều mục, nếu không có thuộc tính này thì nó sẽ là một menu đẩy xuống. Mỗi lựa chọn của bạn được mô tả bằng các tag OPTION, và bạn có thể ngầm định là nó được chọn bằng thuộc tính selected.
Submit and Reset Buttons :
Nút Submit là nút để server có thể lấy thông tin từ người sử dụng. Sau khi nhập liệu song, người dùng ấn vào Submit thì mọi thông tin sẽ gửi đến server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với thông tin báo lỗi.
Còn nút Reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng các giá trị mặc định.
<Input type="submit" name="" value="Submit Button">
<Input type="reset" name="" value="Reset Button">
Thuộc tính value chứa phần text hiển thị trên nút bấm. Bạn cầm lưu ý nút Reset chỉ khởi động lại các giá trị trong cùng một form mà thôi.
Hidden Elements : <Input type="hidden" name="" value="">
Hidden Elements được bạn sử dụng để lưu trữ thông tin đã thu được từ form trước đó, do đó nó có thể kết hợp với dữ liệu của form hiện tại.
Ví dụ : nếu ở form trước ban đề nghị cho biết tên, bạn có thể lưu lại bởi một biến và thêm nó vào một form mới như là một hidden element, sau đó name sẽ được liên kết thông tin mới thu được mà không cần người dùng nhập lại tên nhiều lần. Các Hidden Elements không bao giờ hiện trên mọi browser đúng với cái tên của nó.
Tag này có hai thuộc tính, thuộc tính name là tên của thông tin được lưu trữ, còn value thông tin mà bản thân nó được lưu lại.
Active Images : <input type="image" src="" name="">
Thuộc tính chứa trong src chỉ ra đường dẫn tới file ảnh trên server.
Thuộc tính name cho một tên. Khi người dùng click vào ảnh thì tạo độ x và y của chuột hiện hành sẽ được bổ sung vào trường name này và gửi đến server.
Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi nào đến, nó cho bạn một bản đồ thế giới. Bạn chỉ viếc click lên bản đồ, giả sử bạn sinh ra ở Việt nam thì chỉ việc tìm đúng nước Việt nam và click lên đó.
CGI Script : (A Common Gateway Interface Script)
Là một chương trình được kích hoạt bởi người sủ dụng bằng cách click lên URL. Nó có thể được viết bằng ngôn ngữ máy tính như C hay Pascal, hoặc được viết bằng Perl hay một chương trình giao tiếp giữa người và máy, và có khả năng thực hiện độc lập.
CGI Script được dùng để kích hoạt môt chương trình trên server, lấy thông tin và sau đó thông báo lại cho người sủ dụng. Ví dụ bạn có thể dùng CGI Script để gọi chương trình ngày trên server và thông báo kết quả trên trang web.
Ðể tạo một liên kết đến CGI Script bạn hãy dùng tag <a href="http://www.site.com/CGI-BIN/path/cgiscript>văn bản liên kết</a>. Trong đó http://www/site/com là tên của server chứa CGI Script. CGI-BIN là vị trí của CGI Script trên UNIX server. /path chỉ ra đường dẫn tới cgi-script nếu không tìm thấy trong thư mục cgi-bin chính.
đoạn mã này là script tạo ra một trang HTML, nó lấy ngày trên server và chèn vào trang HTML
- Code:
#!/bin/sh
echo "Content-type:text/html"
echo;
echo"<HTML><HEAD><TITLE>Today's Date</TITLE>
</HEAD></BODY><P>Today's date is:"
bin/date
echo "</B></body></html>"
- Code:
<html>
<head><title>Lấy ngày hệ thống</title>
</head>
<body>
Bạn có muốn biết <a href="http://www.castro.com/cgi-bin/
lcastro/getdatescript">hôm nay </a>là ngày bao nhiêu không ?
</body>
</html>
Sau khi học lý thuyết xong, bạn hãy thực tập để nhớ lại các kiến thức đã học.
Bạn hãy tạo một form nhập họ tên, nơi ở, mật khẩu và một số thông tin khác như bảng dưới đây. Trong đó form Họ tên, nơi ở dùng text box, form mật khẩu dùng password. giới tính sẽ dùng hai radio button Nam và Nữ, bạn nhớ là chỉ được phép chọn một trong hai mà thôi. Form thành phố sẽ dùng pop-up menu, có các thành phố Hà Nội, Hải Phòng,... cũng chỉ được chọn một nơi ở duy nhất. Cuối cùng là text block Thông tin thêm để người dùng ghi chú thêm nếu cần.
Sau khi nhập xong, click vào Submit để gửi thông tin đến Server.
Chúc bạn thành công.
No Comment.