Trong HTML, các thẻ form và thẻ input giúp chúng ta tạo ra các biểu mẫu giúp người dùng nhập nội dung và chuyển dữ liệu đến server.
Để tạo một form trong HTML, chúng ta dùng cặp thẻ <form></form>.
Để tạo một thành phần input, chúng ta dùng thẻ <input />. Trong thẻ <input /> có một số thuộc tính quan trọng cần lưu ý:
- type: định nghĩa kiểu của thẻ input
- name: định nghĩa tên thẻ input
- value: định nghĩa giá trị mặc định cho thẻ input. Giá trị này người dùng có thể thay đổi sau đó. Thuộc tính này không bắt buộc.
B1: Tạo file bai10.html.
Tạo trường văn bản
B2: Để tạo trường văn bản trong form, chúng ta khai báo thẻ <input> với thuộc tính type có giá trị bằng “text”.
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html><html><head><title>Bài 10 - Thẻ form và thẻ input</title></head><body> <form> <h4>Thẻ input text</h4> <input type="text" name="vidu" value="Ví dụ" /> </form></body></html> |
B3: Mở file bai10.html bằng trình duyệt.
Tạo trường mật khẩu
B4: Để tạo trường mật khẩu, chúng ta chỉ việc khai báo thuộc tính type có giá trị bằng “password”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html><html><head><title>Bài 10 - Thẻ form và thẻ input</title></head><body> <form> <h4>Thẻ input text</h4> <input type="text" name="vidu" value="Ví dụ" /> <h4>Thẻ input password</h4> <input type="password" name="mk" value="Mật khẩu" /> </form></body></html> |
B5: Refresh lại trình duyệt
Tạo nút đệ trình truy vấn(submit)
Nút đệ trình truy vấn có nhiệm vụ gửi toàn bộ các dữ liệu trong form (bao gồm các dữ liệu được nhập bởi các thẻ input) lên server để xử lý.
B6: Để tạo nút đệ trình truy vấn, chúng khai bảo thẻ <l;input> với thuộc tính type có giá trị bằng “submit”.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html><html><head><title>Bài 10 - Thẻ form và thẻ input</title></head><body> <form> <h4>Thẻ input text</h4> <input type="text" name="vidu" value="Ví dụ" /> <h4>Thẻ input password</h4> <input type="password" name="mk" value="Mật khẩu" /> <br /> <input type="submit" value="Gửi" /> </form></body></html> |
B7: Refresh lại trình duyệt
Ngoài ra còn có các thẻ input khác như radio, checkbox,… các bạn có thể tham khảo thêm tạihttp://www.w3schools.com/html/html_forms.asp
