Form trong HTML

Phần tử <form>

Phần tử <form> xác định hình thức thu thập dữ liệu đầu vào của người dùng.

<form>
.
các phần tử của form
.
</form>

Form trong HTML chứa các phần tử hình thức - là các kiểu phần tử lấy dữ liệu đầu vào như điền vào trường văn bản, hộp checkbox, nút bấm, nút gửi…

Phần tử <input>

Đây là phần tử quan trọng nhất của form, có thể hiển thị theo nhiều cách, tùy vào kiểu thuộc tính. Dưới đây là một số ví dụ.

• <input type=”text”> Định nghĩa một dòng nhập dữ liệu văn bản
• <input type=”radio”> Định nghĩa nút bấm tròn để chọn một trong số các đáp án
• <input type=”submit”> Định nghĩa nút để nộp/gửi biểu mẫu

Dữ liệu đầu vào là văn bản

<input type=”text”> Định nghĩa một dòng nhập dữ liệu văn bản:

<form>
 Tên:<br>
 <input type="text" name="tên"><br>
 Họ:<br>
 <input type="text" name="họ">
</form>

Điền dữ liệu đầu vào bằng văn bản

Lưu ý: Tự thân form không lộ ra và độ rộng mặc định của trường điền văn bản là 20 kí tự.

Nút bấm tròn để chọn dữ liệu đầu vào

<input type=”radio”> định nghĩa nút bấm tròn để người dùng chọn một trong số các đáp án.

<form>
 <input type="radio" name="gender" value="male" checked> Nam<br>
 <input type="radio" name="gender" value="female"> Nữ<br>
 <input type="radio" name="gender" value="other"> Khác
</form>

Nút tròn để chọn 1 trong các đáp án có sẵn

Nút nộp/gửi biểu mẫu

<input type=”submit”> định nghĩa nút để nộp/gửi biểu mẫu tới người quản lý biểu mẫu (form-handler), thường là trang chủ có kịch bản xử lý dữ liệu đầu vào. Form-handler được chỉ định trong thuộc tính action của biểu mẫu.

<form action="/action_page.php">
 Tên:<br>
 <input type="text" name="firstname" value="Walt"><br>
 Họ:<br>
 <input type="text" name="lastname" value="Disney"><br><br>
 <input type="submit" value="Gửi">
</form>

Hình ảnh hiển thị trên trình duyệt

Thuộc tính action

Thuộc tính action định nghĩa việc gì sẽ xảy ra khi biểu mẫu được gửi đi. Thông thường, dữ liệu sẽ được gửi về trang web trên máy chủ khi người dùng click vào nút gửi. Ở ví dụ trên đây, dữ liệu được gửi về trang “/action_page.php”. Trang chứa kịch bản của máy chủ sẽ xử lý dữ liệu gửi về.

<form action="/action_page.php">

Nếu thuộc tính action bị bỏ qua, biểu mẫu sẽ được gửi về trang hiện tại.

Thuộc tính target

Thuộc tính target xác định xem kết quả gửi về sẽ sẽ hiển thị trên tab mới của trình duyệt, trong khung hay trong cửa sổ hiện tại. Giá trị mặc định là “_self “ tức là biểu mẫu được gửi sẽ mở trong cửa sổ hiện tại.

Để hiển thị kết quả trên tab khác, bạn dùng giá trị “_blank”

<form action="/action_page.php" target="_blank">

Các giá trị khác có thể dùng là “_parent” và “_top” hoặc tên đại diện cho tên của iframe.

Thuộc tính method

Thuộc tính method xác định phương pháp HTTP (GET hay POST) sẽ được dùng khi gửi dữ liệu trong biểu mẫu.

<form action="/action_page.php" method="get">

hoặc

<form action="/action_page.php" method="post">

Khi nào thì dùng GET?

Phương pháp mặc định khi gửi dữ liệu biểu mẫu là GET nhưng khi dùng GET, dữ liệu trong biểu mẫu sẽ nhìn thấy được trên địa chỉ của trang:

/action_page.php?firstname=Mickey&lastname=Mouse

Lưu ý về GET

• Dữ liệu trong biểu mẫu sẽ được thêm vào đằng sau URL trong cặp tên/giá trị.
• Độ dài URL bị giới hạn (khoảng 300 kí tự).
• Không dùng GET để gửi các dữ liệu nhạy cảm (do nhìn thấy được trong URL).
• Hữu ích khi người dùng muốn đánh dấu trang kết quả.
• Nên dùng cho các dữ liệu không cần bảo mật, như chuỗi truy vấn trong Google.

Khi nào thì dùng POST?

Hãy nhớ luôn dùng POST khi dữ liệu trong biểu mẫu có chứa thông tin cá nhân, quan trọng, nhạy cảm. POST không hiển thị dữ liệu lên địa chỉ trang.

Lưu ý về POST

• POST không giới hạn kích thước, có thể dùng để gửi lượng dữ liệu lớn.
• Trang biểu mẫu dùng POST không thể đánh dấu được.

Thuộc tính name

Mỗi trường nhập dữ liệu đầu vào đều phải có thuộc tính name. Nếu bị bỏ qua, dữ liệu đó sẽ không thể gửi đi. Ví dụ dưới đây sẽ chỉ gửi về “Họ” mà thôi vì phần tử nhập dữ liệu đầu vào của “Tên” không có thuộc tính name.

<form action="/action_page.php">
 First name:<br>
 <input type="text" value="Mickey"><br>
 Last name:<br>
 <input type="text" name="lastname" value="Mouse"><br><br>
 <input type="submit" value="Submit">
</form>

Nhóm dữ liệu trong biểu mẫu bằng <fieldset>

Phần tử <fieldset> được dùng để nhóm các dữ liệu liên quan trong biểu mẫu. Phần tử <legend> định nghĩa mô tả cho phần tử <fieldset>.

<form action="/action_page.php">
 <fieldset>
  <legend>Thông tin cá nhân:</legend>
  Tên:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Họ:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>

Nhóm dữ liệu liên quan bằng phần tử <fieldset>

Bài trước: HTML và XHTML

Bài sau: Các phần tử của Form trong HTML