Bài 08: Thẻ FORM trong HTML

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.

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: