[Series Html] Bài 6: Biểu mẫu (Form ) trong html

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!
Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome

– 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.
– Ví dụ như: form đăng ký, đăng nhập, tìm kiếm, gửi email,…


1. HTML Form.  

– Cú pháp: <form></form>.
– Một số thuộc tính:
  + name: Tên của form, đặt tùy ý sao cho dễ nhớ, có mối tương quan với đối tượng form.
  + action: Link xử lý dữ liệu.
  + method: Phương thức truyền dữ liệu, có 2 giá trị là GET và POST( Sẽ tìm hiểu ở phần PHP).  
2. Các đối tượng trong Form.

 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.   
   + 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.
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 name, value, size giống với Texbox.
 Ví dụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome


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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome

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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome


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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome


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” />.
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” />.
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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome


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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome


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ụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome

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”>
            Nội dung
</textarea>
Ví dụ:

Học html cơ bản- [Series Html] Bài 6: Biểu mẫu (Form ) trong html - AnonyHome

Tìm hiểu thêm các thuộc tính khác tại:
http://www.w3schools.com/tags/tag_textarea.asp  

Kết thúc bài 6 tại đây. Trong bài mình đã giới thiệu cho các bạn về Biểu mẫu( Form ) trong Html. Trong bài học tiếp theo chúng ta sẽ nghiên cứu một số thẻ đặc biệt khác trong Html.
Chúc các bạn học tập tốt! Mọi ý kiến các bạn vui lòng để lại trong mục bình luận bên dưới.

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
- Trong HTML có 3 loại…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x