17. Các thẻ HTML tạo form thu thập dữ liệu

 

1. Form dữ liệu là gì?

Website được xem là một phần mềm giúp kết nối với tất cả người dùng trên thế giới. Toàn bộ dữ liệu mà bạn thấy trên trang web đều được gửi đến từ một địa chỉ IP thực tồn tại trên internet (ta gọi là server nhé). Server sẽ trả về cho bạn một tập hợp dữ liệu dưới định dạng HTML. 

Và câu hỏi đặt ra là nếu phía server cần lấy thông tin của bạn thì làm thế nào? Rất đơn giản, HTML cung cấp cho chúng ta một số thẻ giúp server có thể lấy được dữ liệu từ người dùng, đó là các thẻ thuộc nhóm form.


Vậy, form dữ liệu là một form gồm tập hợp các mã HTML thuộc nhóm form như: Form đăng nhập, form đặt hàng ... Form sử dụng các thẻ như : input, select, option, textarea, button để giúp người dùng có thể nhập dữ liệu vào và gửi lên server.


2. Các thẻ HTML tạo form thường dùng nhất

Bây giờ mình sẽ giới thiệu các thẻ trước, sau đó chúng ta sẽ làm một form ở phần thứ 3 nhé.

Dùng thẻ form bao quanh các form lại

Tất cả các form đều phải bắt đầu bằng một thẻ form, đây là thẻ bao quanh tất cả các thẻ còn lại. Nó có hai thuộc tính quan trọng gồm method và action. Mặc dù bạn đang làm giao diện nhưng cũng nên tuân thủ quy tắc này nhé. Còn về công dụng của nó thì sau này chúng ta sẽ tìm hiểu.

1
2
3
<form method="post" action="url">
 
</form>

Dùng thẻ input để tạo một ô nhập dữ liệu

Thẻ input được sử dụng thường xuyên nhất. Nó có nhiều định dạng khác nhau như:

  • text nhập dữ liệu 
  • Checkbox để chọn nhiều giá trị cùng lúc
  • Radio box để chọn chỉ 1 giá trị 
  • Select để tạo một danh sách các tùy chọn dạng xổ xuống 
  • Textarea có công dụng như thẻ input. Tuy nhiên, về cách hiển thị thì nó sẽ rộng hơn, và thay vì dữ liệu hiển thị trên một hàng thì nó sẽ hiển thị trên nhiều hàng.

Dùng thẻ input để tạo button submit

Nút submit rất quan trọng, nó giúp trình duyệt biết khi nào thì bắt đầu gửi dữ liệu lên server. Để tạo nút submit thì ta sử dụng thẻ input như sau.


<form method="post" action="~">
    Họ và tên: <br/>
        <input type="text" name="name" id="name" value=""/> <br/><br/>
   
    Giới tính: <br/>
        <input type="radio" id="gender1" name="gender" value="male"/> Nam<br/>
        <input type="radio" id="gender2" name="gender"value="female"/> Nữ<br/><br/>
   
    Ngoại ngữ: <br/>
        <input type="checkbox" id="langue1" name="langue" value="eng"/>Tiếng Anh<br/>
        <input type="checkbox" id="langue2" name="langue" value="jap"/>Tiếng Nhật<br/>
        <input type="checkbox" id="langue3" name="langue" value="chn"/>Tiếng Trung<br/><br/>
   
    Năm sinh<br/>
    <select name="birth" id="birth">
        <option> -- Hãy chọn -- </option>
        <option>2008</option>
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
    </select><br/><br/>
   
    Ghi chú :<br/>
        <textarea cols="20" rows="10"></textarea><br/><br/>

    <button onclick="myFunction()">Kiểm tra</button>
    <input type="submit" value="Xác nhận"/>
   
</form>

<script>
  function myFunction() {
    alert("Hello! I am an alert box!");
    alert("Họ và tên:"+document.getElementById("name").value);
   
    if (document.getElementById('gender1').checked) {
      alert("Giới tính:"+document.getElementById("gender1").value);
    }
    else if (document.getElementById('gender2').checked) {
      alert("Giới tính:"+document.getElementById("gender2").value);
    }
     
    if (document.getElementById('langue1').checked) {
      alert("Ngoại ngữ:"+document.getElementById("langue1").value);
    }
    if (document.getElementById('langue2').checked) {
      alert("Ngoại ngữ:"+document.getElementById("langue2").value);
    }
    if (document.getElementById('langue3').checked) {
      alert("Ngoại ngữ:"+document.getElementById("langue3").value);
    }    
   
    alert("Năm sinh:"+document.getElementById("birth").value);
    return false;
  }
</script>


Bài tập thiết kế 1 form có giao dien như sau

Hướng dẫn



Bài tập Bi




Nhận xét