Html css - tìm hiểu về html form

Thẻ form trong html dùng để tạo form, form có chức năng nhận và gửi thông tin của người dùng lên server sau đó sẽ được lưu vào database. Form đóng vai trò là cầu nối giữa người dùng và website, nếu một website không có form tương tác giữa người dùng vàwebsite thì website đó là một website tĩnh mà thôi.

 Thẻ form trong html có cấu trúc như sau

<form action=" nơi nhận dữ liệu mà người dùng nhập vào " method=" Post hoặc Get ">

<!--  Các thẻ form khác -->

</form>

- Action    :  Thường là nơi nhận dữ liệu mà người dùng nhập vào, khi ấn submit thì dữ liệu sẽ được gửi đi
- Method  :  Dữ liệu sẽ được truyền đến action theo phương thức nào, bao gồm 2 phương thức Post và Get


1. Một số thẻ html thuộc nhóm thẻ Form 
- Thẻ text field  :  <input type="text" name="user_name" size="25" />
   Dùng để nhập dữ liệu, có dạng dòng single text

- Thẻ text field password :  <input type="password"  name="user_pass" size="25" /> 
   Giống như thẻ text field khác, nhưng dữ liệu nhập vào sẽ được ẩn đi bằng các dấu chấm

- Thẻ radio buttons : <input type="radio" name="user_gender" value="male" checked="checked" />
   Nút tùy chọn trong form, chỉ được phép lựa chọn 1 giá trị, ví dụ giới tính chỉ có thể là Nam hoặc Nữ

- Thẻ checkbox : <input type="checkbox" name="user_fav" value="Music" />
  Thẻ tùy chọn trong html form, có thể chọn nhiều tùy chọn, ví dụ sở thích của bạn : Music , Movie, Holiday , Game...

- Thẻ select  : 
                     <select name="user_country">
                               <option value="">Select country</option>
                    </select>
   Thẻ tùy chọn trong form, ví dụ sẽ có một danh sách Country cho bạn lựa chọn

- Thẻ textarea : <textarea cols="25" rows="5" name="user_info"></textarea>

- Thẻ submit form  : <input type="submit" name="submit" valua="Submit" />
   Dùng để submit form, gửi dữ liệu đi

- Thẻ reset form  :  <input type="reset" value="Reset" />
   Dùng để xóa dữ liệu vừa nhập trong form
  


Ví dụ ta có form đăng nhập : 

 

Khi chạy trên trình duyệt sẽ có giao diện như sau



- Khi người dùng nhập Tên đăng nhập và Mật khẩu vào và ấn nút Đăng nhập thì thông tin sẽ được truyền đến action (Ở đây đang là file login.php ). Tùy theo phương thức mà tại trang login.php chúng ta có thể lấy được dữ liệu bằng biến môi trường $_POST hoặc $_GET

- Ở đây dữ liệu đang được truyền đi theo phương thức POST nên tại trang login.php chúng ta sẽ lấy được dữ liệu bằng biến $_POST, tương tự với phương thức GET ta sẽ lấy được dữ liệu bằng biến $_GET
 
File login.php

1 2 3 4 5 6 7 8 9

<?php    // Đối với phương thức Post    echo " Username : ".$_POST['user_name']."<br />";                   echo " Password : ".$_POST['user_pass']      // Đối với phương thức Get    echo " Username : ".$_GET['user_name']."<br />";                  echo " Password : ".$_GET['user_pass'] ?>

- Lưu ý : Để lấy giá trị của các thẻ form ta dựa vào thuộc tính name của thẻ các bạn nhé, từ đó ta chỉ việc lấy biến môi trường $_POST hoặc $_GET là xong