Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 14

Bài này sẽ hướng dẫn bạn cách tạo form (biểu mẫu) để nhập liệu trên trang web. Hiện nay có rất nhiều trang web có form.

Chúng ta thử đảo qua vài ví dụ trang web có form:

Bạn thử vào xem một bài báo trên trang VNExpress.net, và bấm vào Ý kiến của bạn? ngay bên dưới bài báo, chúng ta sẽ thấy như sau:

vnexpress-form.png
Minh họa một form nhập liệu từ VNExpress
vnexpress-form.png (12.75 KiB) Đã xem 1558 lần.

Hoặc ở báo Tuổi Trẻ cũng thế.

form-nhap-lieu.gif
Một form khác từ báo Tuổi Trẻ
form-nhap-lieu.gif (7.42 KiB) Đã xem 1558 lần.

Như vậy, trong quá trình thiết kế web, hẳn bạn cũng muốn có những form (mẫu để điền – thường gặp trong đơn từ mẫu) như vậy để khách ghé thăm trang có điều kiện liên hệ phản hồi ý kiến của họ cho chủ nhân trang web.

Ta tiến hành làm form nhé. KCBT sẽ chỉ những điều cơ bản nhất, những điều cao siêu hơn tùy bạn phát triển về sau.

Để tạo một form, ta xem đoạn mã:

MÃ: CHỌN TẤT CẢ
<body>
<form name="ten_form" action="script_xu_ly_form" method="post">
</form>
</body>

Form là một dạng hiển thị trên trang web, lẽ dĩ nhiên, nó phải nằm trong cặp thẻ <body> và </body> rồi, bạn đã thấy ở trên.

Các thuộc tính của một form gồm:

name: ta đặt tên cho form để sau này ta có thể xử lý dữ liệu, chỉnh định dạng cho form, tên form này bạn không đặt tiếng Việt có dấu, không chứa khoảng trắng nhé, không dùng ký tự đặt biệt.

Ví dụ: <form name=”formcuatoi” action=”xulycuatoi.php” method=”get”> : bạn đặt tên form bằng cáchname=”tên-form” nhé

action: hành động sẽ thực hiện khi ta bấm nút để gửi dữ liệu trên một form. Hiện giờ, bạn chưa học về web động, chúng ta khoan bàn. Bạn cứ đặt là action=”script.html” đã nhé. Sau này mình sẽ chỉ rõ hơn.

method: phương thức gửi dữ liệu từ form đến script xử lý. Ta có hai phương thức:
1. method=”post”
2. method=”get”

2 phương thức này đều có thể gửi dữ liệu đến script mà ta đặt ở action để nhờ script này xử lý dữ liệu được khách / chính ta nhập vào từ form trên trang web.

Điểm khác nhau giữa post và get: khi bạn tạo method=”post” thì người dùng bấm nút gửi, dữ liệu sẽ được gửi mà không có sự thay đổi gì trên thanh địa chỉ trình duyệt, trong khi đó, với method=”get” thì thanh địa chỉ trình duyệt sẽ biến thành những cụm từ, ký tự,… bạn cảm thấy rất khó hiểu (xem hình)

getmgy1.gif
Thanh địa chỉ trình duyệt rối rắm khi dùng method=”get”
getmgy1.gif (1.85 KiB) Đã xem 1558 lần.

Đến một lúc, bạn sẽ hiểu là lúc nào nên dùng post, lúc nào dùng get, bây giờ thì bạn hãy cứmethod=”post” để tiếp tục bài học.

Thẻ để thiết lập form cũng có điểm tương đồng với thẻ table, bản thân <form> và </form> chưa làm nên “cơm cháo” gì. Bên trong nó phải có những yếu tố để tạo thành form hoàn chỉnh.

MÃ: CHỌN TẤT CẢ
<form name="lienhe" action="lienhe.php" method="post">
Họ và tên: <input type="text" name="hoten" size="30" maxlength="30" /><br />
Địa chỉ: <input type="text" name="diachi" size="50" maxlength="50" /><br />
Tự giới thiệu:<br /><textarea name="gioithieu" rows="7" cols="20">Bạn gõ giới thiệu vào đây</textarea>
</form>

Vì dòng dài quá nên bị đứt xuống dòng, bạn không nên gõ xuống dòng theo ví dụ, mà gõ cho hết một thẻ cho đến <br /> nhé

Sẽ cho kết quả:

my-form.gif
Một form do bạn tự tạo
my-form.gif (1.59 KiB) Đã xem 1558 lần.

Như vậy, bên trong thẻ form bạn sẽ thấy thẻ <input /> thẻ này không có thẻ đóng, nó “tự” đóng với />

MÃ: CHỌN TẤT CẢ
<input type="text" name="vidu1" size="30" maxlength="30" />

 

  • type=”text”: kiểu của thẻ này là text, nếu bạn muốn người ta nhập chữ vào một dòng thì hãy dùngtype=”text”, các loại khác sẽ liệt kê sau
  • name=”tên-input”: tên này sẽ là chứa giá trị nhập vào và khi bấm nút thì sẽ gửi cho script xử lý dữ liệu
  • size=”30″: độ rộng của input là 30 ký tự, bạn có thể thay đổi, chiều rộng tối đa màn hình khoảng 80, ngắn dài tùy theo trường dữ liệu cần lấy. Bạn có thể thay bằng số khác nếu thích, số phải > 1.
  • maxlength=”30″: độ dài tối đa chuỗi mà người ta có thể nhập vào. Bạn sẽ hỏi “Vậy nó khác gìsize? Khác đấy: size là để chỉ cái độ dài hiển thị trên trang web cho người ta thấy là giải nhập dài như thế nào, nhưng maxlength là dữ liệu thực sự mà người ta nhập vào, và độ dài có thể > size, lúc này nó sẽ cuộn theo chiều ngang để bạn thấy phần khuất, nếu người ta cố tình nhập dài hơnmaxlength thì khi bấm nút gửi đi, phần dài hơn đó sẽ bị vứt bỏ, script xử lý sẽ không phải vướng vào cái phần dài thêm. Bạn có thể thay 30 bằng số khác nếu muốn, nhưng số không được < 1

Các loại type mà bạn có thể sử dụng:

  • type=”button”: tạo một nút, nút thì chỉ có bấm, không thể nhập dữ liệu, hình dáng Hình ảnh
  • type=”checkbox”: tạo một nút chọn, sẽ có hình Hình ảnh
  • type=”hidden”: tạo một đối tượng ẩn, không hiện lên trang web, nhưng có thể chứa giá trị, có những lúc cần thiết dùng tới
  • type=”image”: tạo một nút bấm nhưng dùng hình ảnh thay thế cho hình nút mặc định
  • type=”password”: tạo một trường text để nhập, nhưng khi nhập vào hiện lên những dấu * chứ không hiện chữ
  • type=”radio”: tạo nút bấm chọn, chọn 1 duy nhất trong 1 nhóm, hình dáng Hình ảnh
  • type=”reset”: tạo nút bấm, khi bấm vào nó sẽ xóa tất cả dữ liệu đang có ở các trường khác trên cùng một form hoặc đặt lại giá trị ban đầu nếu có trường nào đó ta có đặt value khởi tạo trước đó
  • type=”submit”: tạo nút bấm để khi bấm vào, dữ liệu được gửi đến script trong phầnaction=”script.php” của form
  • type=”text”: tạo một trường cho phép gõ văn bản (vừa học ở ví dụ trên)

Một input đầy đủ còn có thêm value=”giá-trị” nữa, xem mã:

MÃ: CHỌN TẤT CẢ
<input type="text" name="ngaythang" size="10" maxlength="10" value="dd/mm/yyyy" />

Bạn có thể gán trước giá trị để làm mặc định khi người ta không nhập gì, hoặc để hướng dẫn người ta biết cách nhập đúng định dạng.

 

<< Quay Lại – Tiếp Theo>>

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: