Bài 6: Biểu mẫu (form)

- Biểu mẫu ( form) là một thành phần thường gặp và quan trọng trong mỗi website, form tạo nên tính tương tác giữa website và người dùng qua những phần nhập, truy xuất dữ liệu cũng như gửi dữ liệu. Như: form đăng ký, đăng nhập, tìm kiếm, gửi email liên hệ,…

1. HTML Form
- Cú pháp: <form></form>

Thuộc tính	Ý nghĩa
action="url"	Địa chỉ của trang web/chương trình xử lý dữ liệu được nhập trên form
method="get"| "post"	Phương thức HTTP dùng để gửi dữ liệu đến địa chỉ URL được xác định trong thuộc tính action. Nếu không chỉ rõ phương thức gửi dữ liệu, mặc định sử dụng phương thức "get"
name="form_name"	Tên của form
target="frame_name"| "_blank"| "_self"	Chỉ định cửa sổ hiển thị kết quả (trong một frame, của sổ mới hay trong cửa sổ hiện tại)
enctype="application/x-www-form-urlencoded"| "text/plain"| "multipart/form-data"	Quy định cách định dạng dữ liệu trước khi gửi. Nếu không xác định rõ, enctype mặc định sẽ là "application/x-www-form-urlencoded"

- Phương thức HTTP (HTTP methods)
+ Post: dữ liệu chứa trong phần thân của request
+ Get: dữ liệu được gởi kèm theo URL được mô tả trong action, có dạng sau:
 URL?name1= value1& name2=value2
*Lưu ý:
- Khi dùng Get, tất cả thông tin thu được sẽ hiển thị lên address bar
- Thường dùng get khi cần bookmark trang hiện hành do các thông tin cần lấy không mang tính quan trọng, bảo mật.
- Post thường được dùng để che dấu thông tin

Ví dụ:

<form name="timkiem" action="timkiem.php" method="post" >
    <input type="text" value="Nhập từ khóa" name="keywords"/>
    <input type="submit" />
</form>

Kết quả:

2. Các đối tượng trong Form

Thành phần	Ý nghĩa
TextBox	Hộp nhập dữ liệu trên một dòng
TextArea	Hộp nhập dữ liệu trên nhiều dòng
PasswordBox	Hộp nhập mật khẩu
FileField	Hộp chọn tập tin
Button	Nút (submit dữ liệu hay xử lý thao tác nào đó khi người sử dụng click chuột vào nút này)
RadioButton	Chọn lựa một trong các lựa chọn được liệt kê
CheckBox	Chọn lựa một hay nhiều lựa chọn được liệt kê
ComboBox	Chọn một mục trong danh sách được liệt kê
ListBox	Chọn một hay nhiều mục trong danh sách

2.1. Thẻ input
a) Textbox
- Tạo nên đối tượng cho phép nhập dữ liệu văn bản
- Cú pháp: <input type="text" name="" value="" size="" />
+ name: Tên của textbox, đặt tùy ý, được kết hợp với PHP hay Javascript để tạo tính tương tác trên website
+ value: Giá trị ban đầu của textbox, hiển thị như dòng “Nhập từ khóa”
+ size: Độ rộng của textbox
Nếu thẻ input không sử dụng thuộc tính type="text" thì trình duyệt tự hiểu dạng Textbox
Ví dụ:

<input type="text" name="Tìm" value="Nhập từ khóa" size="18px" />

Kết quả:
b) Password
- Đối với các form như đăng nhập chúng ta dùng loại này để ẩn đối tượng password
- Cú pháp: <input type="password" value="" name="" size="" />
- Các thuộc tính value, name, size tương tự như Textbox
Ví dụ:

<form name="login" action="login.php" method="post">
    Tài khoản <input type="text" value="Nhập vào user" name="user"/> <br />
    Mật khẩu  <input type="password" value="123456" name="pass" />
</form>

Kết quả:

Tài khoản
Mật khẩu

c) Checkbox
- Cú pháp: <input type="checkbox" name="" value="" />
+ name: Tên của checkbox, sử dụng kết hợp PHP hay Javascript( JS)
+ value: Giá trị của checkbox, sử dụng kết hợp PHP hay JS, gửi kết quả lên server và ngược lại
+ Có thể sử dụng thêm thuộc tính checked để chọn mặc định cho đối tượng
Lưu ý: Đối với các đối tượng cùng nhóm thì name phải đặt giống nhau
Ví dụ:

<form>
    Nghề nghiệp <br>
    <input type="checkbox" name="nghenghiep" value="giaovien" > Giáo Viên <br>
    <input type="checkbox" name="nghenghiep" value="bacsi" checked> Bác Sĩ <br>
    <input type="checkbox" name="nghenghiep" value="congnhan" > Công Nhân <br>
</form>

Kết quả:

Nghề nghiệp
Giáo Viên
Bác Sĩ
Công Nhân

d) Radio
- Tạo chức năng chọn dạng núm Radio
- Cú pháp: <input type="radio" name="" value="" />
- Các thuộc tính name, value và checked sử dụng tương tự như Checkbox
Ví dụ:

<form>
Giới Tính
<input type="radio" name="gioitinh" value="nam" /> Nam
<input type="radio" name="gioitinh" value="nu" /> Nữ
</form>

Kết quả:

Giới Tính Nam Nữ

e) Upload
- Tạo chức năng duyệt file từ máy tính
 - Cú pháp: <input type="file" name="" />
 + name: Tên của đối tượng file
Ví dụ:

<form>
   Duyệt file: <input type="file" name="" value=""/>
</form>

Kết quả:

Duyệt file:

f) Submit
- Tạo nút gửi dữ liệu tới file xử lý ( Tới link khai báo ở thuộc tính Action)
- Cú pháp: <input type="submit" name="tên submit" value="giá trị ban đầu, hiển thị ở nút submit" />
Ví dụ:

<form name="button" action="button.html">
<input type="submit" name="Gửi" value="Gửi Bài" />
</form>

Kết quả:

g) Button
- Tương tự như Submit tuy nhiên khi sử dụng Button dữ liệu sẽ không được gửi tới file xử lý (Khai báo phần action) mà thường kết hợp với JS để tạo tương tác
- Cú pháp: <input type="button" name="tên submit" value="giá trị ban đầu, hiển thị ở nút submit" />
Ví dụ:

<form name="button" action="button.html">
<input type="button" name="submit" value="gửi" />
</form>

Kết quả:

h) Reset
- Trả lại giá trị ban đầu khi chưa nhập liệu cho tất cả các đối tượng trong form
- Cú pháp: <input type="reset" name="tên reset" value="giá trị ban đầu, hiển thị ở nút reset" />
Ví dụ:

<form>
<input type="text" name="keywords" value="Nhập từ khóa" />
<input type="submit" name="gui" value="Gửi" /> <br>
<input type="reset" name="reset" value="Làm mới" />
</form>

Kết quả:

2.2. Select tags
a)Tạo danh sách sổ xuống
- Cú pháp
<select name="Tên danh sách">
<option value="hn"> Hà Nội</option>
<option value="hcm"> TP. HCM</option>
<option value="hp"> Hải Phòng</option>
<option value="tn"> Thái Nguyên</option>
</select>
+ Cặp thẻ <select> </select> khai báo 1 phiên làm việc với kiểu danh sách
+ Cặp thẻ <option></option> bên trong cặp thẻ <option></option>
- Thuộc tính value: Giá trị của lựa chọn (Sử dụng kết hợp với JS hoặc PHP)
- Các thuộc tính khác: label, selected, disabled
Ví dụ:

<select name="nam">
    <option value="2014">Năm 2014</option>
     <option value="2013" selected>Năm 2013</option>
     <option value="2012">Năm 2012</option>
     <option value="2011">Năm 2011</option>
</select>

Kết quả:
Năm 2014 Năm 2013 Năm 2012 Năm 2011
b) Tạo danh sách chọn
- Tương tự như danh sách sổ xuống tuy nhiên dạng này cho phép người dùng chọn nhiều lựa chọn bằng việc sử dụng Ctrl
- Cú pháp trong danh sách chọn tương tự dạng sổ xuống, chỉ việc thêm thuộc tính multiple vào thẻ mở <select>
Ví dụ:

<select name="nam" multiple>
    <option value="2014">Năm 2014</option>
     <option value="2013" selected>Năm 2013</option>
     <option value="2012">Năm 2012</option>
     <option value="2011">Năm 2011</option>
</select>

Kết quả:
Năm 2014 Năm 2013 Năm 2012 Năm 2011
2.3. Hộp thoại soạn thảo
- Để tạo 1 hộp thoại cho phép soạn thảo( dạng bình luận) chúng ta sử dụng thẻ textarea
- Cú pháp: <textarea cols="số cột" rows="số dòng" maxlength="số ký tự tối đa cho phép">
Ví dụ:

<textarea rows="4" cols="50" maxlength="500">
Đây là hộp soạn thảo
</textarea>

Kết quả:
Đây là hộp soạn thảo
------------
*FieldSet: nhóm các đối tượng giống nhau vào một phần logic

<Fieldset>
<Legend Align="left/right">Chú thích </Legend>
Các thành phần trong nhóm
</Fieldset>

- Tag legend: tạo chú thích của nhóm
- Cho phép canh lề chú thích
Ví dụ:

<FORM >
<FIELDSET>
<LEGEND>Chức vụ</LEGEND>
Chức vụ của bạn: <INPUT name= 'name' type= 'text' tabindex= '1'>
</FIELDSET>
<FIELDSET>
<LEGEND>Trình độ giáo dục</LEGEND>
<INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Đại học
<INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Trung học phổ thông
</FIELDSET>
</FORM>

Kết quả:

Chức vụ

Chức vụ của bạn:

Trình độ giáo dục

Đại học Trung học phổ thông