Form liên hệ là một phần không thể thiếu trên bất kỳ trang web nào, cho phép người dùng gửi thông tin hoặc yêu cầu đến quản trị viên trang web. Trong bài viết này, chúng ta sẽ đi sâu vào cách tạo một form liên hệ đơn giản nhưng đầy đủ chức năng trong HTML. 

1. Bắt đầu với Form trong HTML

Form HTML được tạo ra từ thẻ <form>, đây là container chứa các trường nhập liệu như <input>, <textarea>, và các nút như <button> hoặc <input type="submit">.

Cấu trúc cơ bản của một Form:

<form action="submit-form.php" method="post">
  <!-- Trường nhập tên -->
  <div>
    <label for="name">Tên:</label>
    <input type="text" id="name" name="user_name" required>
  </div>
  
  <!-- Trường nhập email -->
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="user_email" required>
  </div>
  
  <!-- Trường nhập tin nhắn -->
  <div>
    <label for="message">Tin Nhắn:</label>
    <textarea id="message" name="user_message" required></textarea>
  </div>
  
  <!-- Nút gửi form -->
  <div>
    <button type="submit">Gửi</button>
  </div>
</form>

Trong đoạn code trên, chúng ta đã tạo một form với ba trường nhập liệu: tên, email, và tin nhắn. Mỗi trường đều có thẻ <label> tương ứng, giúp tăng khả năng truy cập và dễ dàng quản lý.

Thuộc tính action và method

  • action: Đường dẫn đến script trên server sẽ xử lý dữ liệu được gửi từ form.
  • method: Phương thức gửi dữ liệu, có thể là get (dữ liệu được gửi qua URL) hoặc post (dữ liệu được gửi một cách ẩn danh).

>>>>> Xem thêm bài viết tương tự tại đây:

2. Tạo trường nhập dữ liệu đa dạng

HTML cung cấp nhiều loại <input> để thu thập các loại dữ liệu khác nhau từ người dùng.

  • Ví dụ: Trường nhập số điện thoại
<div>
  <label for="phone">Số Điện Thoại:</label>
  <input type="tel" id="phone" name="user_phone" pattern="[0-9]{10}" title="Số điện thoại gồm 10 chữ số" required>
</div>

Trong ví dụ trên, chúng ta sử dụng thuộc tính pattern để xác định rằng số điện thoại phải là 10 chữ số.

  • Ví dụ: Trường chọn ngày
<div>
  <label for="appointment">Ngày hẹn:</label>
  <input type="date" id="appointment" name="appointment_date" required>
</div>

Trường <input type="date"> cho phép người dùng chọn một ngày từ lịch.

3. Xử lý dữ liệu Form trên Server

Khi người dùng nhấn nút “Gửi”, dữ liệu từ form sẽ được gửi đến script được chỉ định trong thuộc tính action. Script này có thể được viết bằng các ngôn ngữ lập trình như PHP, Python, hoặc Node.js.

Ví dụ: Xử lý form với PHP

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = $_POST['user_name'];
  $email = $_POST['user_email'];
  $message = $_POST['user_message'];
  
  // Xử lý dữ liệu tại đây
  // Ví dụ: gửi email, lưu vào cơ sở dữ liệu, v.v.
}
?>

Trong đoạn code PHP trên, chúng ta kiểm tra xem có phải là một yêu cầu POST từ form không, sau đó lấy dữ liệu từ các biến $_POST và thực hiện các xử lý cần thiết.

Tổng kết

Form HTML là một công cụ mạnh mẽ cho phép bạn thu thập thông tin từ người dùng một cách hiệu quả. Bằng cách sử dụng các loại trường nhập liệu và xử lý dữ liệu trên server, bạn có thể tạo ra những trải nghiệm tương tác phong phú cho người dùng trên trang web của mình. Hy vọng bài viết mở rộng này cung cấp cho bạn cái nhìn chi tiết hơn về cách tạo và sử dụng form trong HTML.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: 

Banner bottom