[HTML] Bài 11.1: Biểu Mẫu - Form

Biểu Mẩu (Form) là một thành phần thường gặp và rất quan trọng trong mỗi website, đặt biệt là những website động biểu mẫu gần như là không thể thiếu. Form sẻ tạo nên sự tương tác giữa người dùng và website qua những thao tác nhập dữ liệu, gữi dữ liệu ( ví dụ: from đăng kí, đăng nhập, search, gữi email, liên hệ....)

1. HTML FORM

- Cú Pháp: <FORM>...</FORM>

- Một số thuộc tính:

+ Name: Tên của from, các bạn đặt tùy ý sao cho dể nhớ.

+ Action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào để xử lí. 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 để xử lí (sau đó trình duyệt sẽ tải lại nội dung mới).

+ Method: phương thức truyền dữ liệu ( gồm có 2 phương thức GET và POST - phần này chúng ta sẽ tìm hiểu kĩ hơn ở những bài PHP và MySQL )

Ví Dụ:

<form name="vidu" action="abc.php" method="post"></form>

Ở ví dụ trên Form vẫn chưa có tác dụng và ý nghĩa gì vì ta chưa chuẩn bị cho form phần nhập văn bản, hay nút bấm để truyền dữ liệu đi.

2. Thẻ Nhập INPUT:

- Cú Pháp: <INPUT Type="....." Name="" Value="" Size="" maxlength="" />

- Các Thuộc Tính:

+ 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: Giá trị ban đầu của input khi bạn chưa theo tác gì trên nó.

+ Size: độ rộng của input
+ Maxlength: số kí tự tối đa được nhập vào.

+ Type: thuộc tính này gồm nhiều giá trị các giá trị quyết định kiểu nhập dữ liệu cho input. Chúng ta sẽ tuần tự tìm hiểm các giá trị của thuộc tính này.

2.1 TEXT BOX - Giá Trị TEXT

Khi sử dụng type = "TEXT" trình duyệt sẻ tạo ra 1 textbox cho phép bạn nhập văn bản.

Ví Dụ:

<form method="POST"><p> User Name:<input type="text" name="T1" size="20"/> </p></form>

2.2 PASSWORD:
Đối với các Form Đăng nhập khi nhập Password bạn cần ẩn chúng đi để mọi người không nhìn thấy bạn nhập gì, để làm được điều này bạn sử dụng giá trị Password.
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"></p>
</form>
User Name:
Password:

2.3 CHECKBOX
Giá trị này sẽ cho phép hiển thị ra một danh sách các nút vuông, chúng ta sẽ được phép kích chọn nhiều nút trong các nút đó. Để hiển thị các nút checkbox này, các bạn có thể dùng thẻ input với type là checkbox. Một nhóm các nút checkbox này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
- 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 ý lần nữa là : Đối với các đối tượng cùng nhóm thì name phải đặt giống nhau

2.4 RADIO
Cũng như Checkbox Giá trị 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:

- Cú pháp: <input type=“radio” name=“” value=“” />

Ví Dụ:

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

2.5 UPLOAD
- Giá trị UPLOAD tạo chức năng duyệt một File từ máy tính của người dùng.
- Cú pháp: <input type=“file” name=“” />
Ví Dụ:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>FCWC</title>
</head>
<body>
<form>
Duyệt file: <input type="file" name="" value=""/><br>
</form>
</body>
</html>
Duyệt file:

2.6 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” />
2.7 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” />
2.7 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 method="POST">
<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 <br/>
  <h4>Đăng Kí</h4>
<p>
User Name:<input type="text" name="T1" size="20" value="Tên đăng nhập < 20 kí tự"/> </p>
<p>
Password: <input type="password" name="T2" size="20"/></p>
Type password again: <input type="password" name="T2" size="20"/></p>
  <h4>Sở Thích</h4>
<input type=checkbox name="switcher" value="OFF" >Movie
<input type=checkbox name="switcher" checked value="TELEX" >Music
<input type=checkbox name="switcher" value="VNI">sportoj <br/>
Ảnh Đại diện: <input type="file" name="avatar" value=""/><br>
<input type="submit" name="submit" value="Đăng kí" /> 
  <input type="reset" name="reset" value="Làm lại" /> 
</form>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Phần này mình tạm dừng ở đây phần tiếp theo mình sẽ đính kèm bài tập cho các bạn.

abcdasdasd

Thứ Bảy, 24 tháng 8, 2013