Bài 08: Thẻ FORM trong HTML

HTML - CSS 16/08/2015 07:00 693
Thẻ form trong HTML được sử dụng để lấy các thông tin do người dùng nhập vào.

1. Thẻ Form là gì?

Thẻ form trong HTML được sử dụng để lấy các thông tin do người dùng nhập vào.

2. Các thành phần trong FORM gồm những cái gì?

Trong một form có một hoặc nhiều các điều khiển cho phép người dùng nhập dữ liệu vào các thẻ input trong HTML, thẻ select, thẻ textarea...vv

Tóm lại: Để xây dựng một form có 3 thành phần chính như sau.

  • Thẻ bắt đầu <form> và kết thúc </form>
  • Các nhãn(label) & các thẻ nhập liệu input, thẻ select, thẻ textarea.
  • Nút cho phép người sử dụng click vào để thông báo một quá trình xử lý dữ liệu type="submit" 

Để tạo một form trong HTML, chúng ta sử dụng thẻ <form> như sau:

<form>
..Các thành phần trong form
</form>

Ví dụ:

<form method="post" action="/xu_ly_form.php">
	<table border="0" cellpadding="5" cellspacing="0">
    	<tr>
        	<td><label for="txt_full_name">Họ và tên</label></td>
            <td><input type="text" name="full_name" id="txt_full_name" value=""  /></td>
        </tr>
        <tr>
        	<td><label>Giới tính</label></td>
            <td>
            	<input type="radio" value="male" checked="checked" name="gender"> Nam
    			<input type="radio" value="female" name="gender"> Nữ
            </td>
        </tr>
        <tr>
        	<td><label for="slb_year">Năm sinh</label></td>
            <td>
            	<select name="year" id="slb_year">
                    <option value="2010">2010</option>
                    <option value="2011">2011</option>
                </select>
            </td>
        </tr>
        <tr>
        	<td><label for="txt_username">Tài khoản</label></td>
            <td><input type="text" name="username" id="txt_username" value="" /> </td>
        </tr>
        <tr>
        	<td><label for="txt_password">Mật khẩu</label></td>
            <td><input type="password" name="password" id="txt_password" value="" /> </td>
        </tr>
        <tr>
        	<td><label>Sở thích</label></td>
            <td>
            	<input type="checkbox" name="hobby[]" value="sport"> Thể thao
                <input type="checkbox" name="hobby[]"  value="readbook"> Đọc sách
                <input type="checkbox" name="hobby[]" value="programming"> Học lập trình
            </td>
        </tr>
        <tr>
		  <td collspan="2">
		  	<input type="submit" value="Submit" name="submit">
			<input type="reset" value="Reset" name="reset"> 
		  </td>	 			
        </tr>
    </table>
</form>

Xem kết quả

3. Thuộc tính action

Thuộc tính action quy định địa chỉ trên server-side sẽ tiếp nhận các thông tin và tiến hành xử lý tiếp theo. Cách phổ biến nhất để người dùng gửi thông tin từ form lên máy chủ là lúc người dùng bắt đầu nhấn vào nút submit. Thông thường, thông tin sẽ được gửi tới một trang hoặc một function cụ thể trên máy chủ.

Trong ví dụ ở dưới đây, trang xử lý đã được quy định trong thẻ form:

<form action="/xu_ly_form.php">
...
</form>

Nếu thuộc tính action không được thiết lập, mặc định thông tin sẽ được gửi tới trang hiện tại.

4. Thuộc tính method

Trong bài trước chúng ta đã tìm hiểu phương thức truyền dữ liệu POST và GET. Thì thuộc tính method sẽ quy định phương thức truyền dữ liệu (POST hoặc GET) sẽ được chuyển đi khi người dùng nhấn nút submit trong form.

<form action="/xu_ly_form.php" method="GET">
...
</form>

Hoặc

<form action="/xu_ly_form.php" method="POST">
...
</form>

5. Các thuộc tính khác trong form

Thẻ <form> trong HTML khi thiết lập hết tất cả các thuộc tính sẽ giống như dưới đây:

<form action="/xu_ly_form.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
...
</form>

Danh sách các thuộc tính trong form.

Thuộc tínhMiêu tả
accept-charset Quy định bộ mã ký tự khi gửi thông tin đi (mặc định: sử dụng mã ký tự của trang).
action Quy định địa chỉ (url) nhận dữ liệu khi submit form (mặc định: gửi tới trang hiện tại).
autocomplete Dùng để lưu những dự liệu đã nhập, lần sau bạn chỉ cần chọn dữ liệu thay vì nhập lại từ đâu (mặc định: on).
enctype Quy định kiểu mã hóa khi gửi dữ liệu (mặc định: url-encoded).
method Quy định phương thức gửi dữ liệu khi submit form (mặc định: GET).
name Quy định tên để nhận dạng dữ liệu.
novalidate Thông báo với trình duyệt không cần kiểm tra tính hợp lệ của dữ liệu trong form.
target Quy định cửa sổ trình duyệt sẽ nhận dữ liệu (mặc định:  _self).

Lưu ý: Nếu trong form có một hay nhiều input file thì bạn bắt buộc phải cho thêm thuộc tính enctype

enctype="multipart/form-data"

6.Tổng kết:

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.