Biểu mẫu html

Một biểu mẫu HTML chứa nhiều phần tử bên trong biểu mẫu. Phần tử dạng có nhiều loại khác nhau như dạng phần tử đầu vào, miền văn bản (trường văn bản), hộp kiểm, nút radio, nút gửi,… Trong bài này, website dammio. com sẽ giới thiệu với các bạn theo các dạng phần tử

Phần tử đầu vào
Từ “đầu vào” trong tiếng Anh có nghĩa là đầu vào. Phần tử đầu vào là phần tử sẽ nhận dữ liệu vào đầu, theo nhiều cách khác nhau, tùy theo dạng đầu vào. Một số định dạng phần tử đầu vào như sau.

• . Định nghĩa trường nhập văn bản 1 dòng
• . Định nghĩa nút radio, một nút tròn cho phép chọn 1 trong nhiều lựa chọn
• . Định nghĩa nút gửi, dùng để gửi (gửi) biểu mẫu

Nhập định dạng văn bản
Nếu bạn muốn tạo trường nhập chỉ với 1 dòng, bạn có thể sử dụng

  
Biểu mẫu đăng ký --- dammio.com
  Họ:

  

  Tên:

  

Lưu ý. biểu mẫu phần tử sẽ không hiển thị trên giao diện và trường văn bản (trường văn bản) có độ rộng mặc định là 20 ký tự

Nhập dạng nút radio
Với

  
Hãy chọn thành phố nơi bạn sinh sống --- dammio.com
   Hà Nội

   Đà Nẵng

   Sài Gòn

   Khác

Trong ví dụ trên, bạn lưu ý các điểm. Để tạo 1 nhóm nút radio cho phép bạn chọn 1 trong các lựa chọn, bạn phải đặt thuộc tính tên của nhóm nút này giống nhau (trong ví dụ name=”city”). Thuộc tính được kiểm tra được sử dụng để chọn 1 nút mặc định ban đầu. Thuộc tính giá trị được sử dụng để xác định giá trị của nút radio khi được chọn

Nút gửi
Đoạn mã

  
 Đăng ký học HTML/HTML5 --- dammio.com 
  Họ:

  

  Tên:

  


  

Trong ví dụ trên, chúng ta tạo 1 biểu mẫu đăng ký với 2 trường nhập tên và họ nhập văn bản. Sau khi điền thông tin, người dùng có thể nhấn nút gửi để gửi dữ liệu đến tệp xuly. xử lý php. Tạm thời chúng ta chưa học về PHP nên tạm thời xử lý phần này để lưu lại. You can learn about PHP at. http. //www. dammio. com/category/lap-trinh-web-voi-php

Thuộc tính hành động
Thuộc tính này định nghĩa hành động (hành động) được thực thi khi biểu mẫu được gửi đi. Thông thường, biểu mẫu dữ liệu được gửi đến 1 trang web trên máy chủ khi người dùng nhấn nút gửi. Trong ví dụ trên, biểu mẫu dữ liệu sẽ được gửi đến trang xuly. php ở máy chủ. Trang này chứa 1 đoạn số kích hoạt để xử lý biểu mẫu dữ liệu.

Nếu hành động thuộc tính bị trống (khuyết), thì giá trị của thuộc tính sẽ được thiết lập là trang hiện tại trong biểu mẫu chứa

Thuộc tính mục tiêu
Thuộc tính mục tiêu (đích) mô tả khi kết quả được gửi đi sẽ mở ra 1 tab trình duyệt mới, 1 khung hoặc trong cửa sổ hiện tại.

Giá trị mặc định là “_self“, nghĩa là biểu mẫu sẽ được gửi trong cửa sổ hiện tại. Để tạo kết quả mở biểu mẫu trong 1 tab trình duyệt mới, sử dụng giá trị “_blank“

Các giá trị hợp lệ của mục tiêu thuộc tính là “_parent”, “_top” hoặc tên của 1 iframe

Thuộc tính method
Thuộc tính method mô tả phương thức HTTP (GET hoặc POST) được sử dụng khi gửi biểu mẫu dữ liệu.

 Form dùng GET --- dammio.com

  
 Đăng ký học HTML/HTML5 --- dammio.com 
  Họ:

  

  Tên:

  


  


 Form dùng POST --- dammio.com

  
 Đăng ký học HTML/HTML5 --- dammio.com 
  Họ:

  

  Tên:

  


  

Khi nào sử dụng GET?
Phương thức mặc định khi gửi biểu mẫu dữ liệu là GET. Khi sử dụng GET, biểu mẫu dữ liệu sẽ hiển thị trên địa chỉ URL, ví dụ như.

http. //www. dammio. com/…/xuly. php?ho=Helmi&ten=Dammio

Các lưu ý

• Cặp thuộc tính name/value tương ứng ở form sẽ hiển thị ở URL, chẳng hạn như (name/ho) và (value/Helmi)
• Chiều dài của URL tối đa khoảng 3000 ký tự
• Không sử dụng GET để gửi dữ liệu nhạy cảm (ví dụ như số tài khoản ngân hàng, mật khẩu)
• Sử dụng GET hữu ích khi người dùng muốn đánh dấu kết quả
• NHẬN sử dụng tốt hơn cho dữ liệu không cần bảo mật, như chuỗi truy vấn trên Google

Khi nào sử dụng POST
Nếu bạn có 1 biểu mẫu chứa dữ liệu nhạy cảm hoặc cần bảo mật, hãy sử dụng POST. Phương thức POST không hiển thị ở địa chỉ URL. POST không có giới hạn kích thước gửi đi và có thể sử dụng để gửi lượng dữ liệu lớn. Tuy nhiên, hình thức sử dụng POST không thể đánh dấu (đánh dấu URL để lưu trữ).

Thuộc tính tên
Mỗi trường đầu vào đều có 1 thuộc tính tên. Nếu thuộc tính tên bị thiếu, dữ liệu sẽ không được gửi đi. Ví dụ form after only submit duy nhất trường “Họ”.

URL khi gửi đi. /xuly. php?ho=Helmi

  Tên:

  

  Họ:

  


  

Gom group data form with fieldset
Phần tử fieldset dùng để gom nhóm các dữ liệu liên quan trong 1 form. Chú thích phần tử được sử dụng để định nghĩa nhãn cho bộ trường phần tử.

  

    
Thông tin cá nhân: --- dammio.com
    Tên:

    

    Họ:

    


    
  

Kết luận. Bài viết đã hướng dẫn các bạn về việc tạo biểu mẫu cơ bản ở HTML. Mời các bạn theo dõi các bài tiếp theo để có thể biết thêm nhiều phần tử trong form và cách tạo form phong phú hơn