Bài 24: Cách tạo form trong html

Phần tử <Form> 

dạng HTML được sử dụng để thu thập đầu vào người sử dụng.

Phần tử <form> định nghĩa một dạng HTML:

<form>
.
form elements
.
</form>

Dạng HTML chứa các yếu tố hình thức.

yếu tố hình thức nhiều loại khác nhau của các yếu tố đầu vào, hộp kiểm tra, các nút radio, trình các nút, và nhiều hơn nữa.

---

<Input> phần tử

<Input> phần tử là các yếu tố hình thức quan trọng nhất.

<Input> phần tử có nhiều biến thể, tùy thuộc vào các loại thuộc tính.

Dưới đây là các loại được sử dụng trong chương này:

Kiểu	Sự miêu tả
bản văn	Xác định đầu vào văn bản bình thường
radio	Định nghĩa nút radio đầu vào (để lựa chọn một trong nhiều lựa chọn)
đệ trình	Định nghĩa một nút submit (gửi biểu mẫu)

	Bạn sẽ học được nhiều hơn về các loại đầu vào sau này trong hướng dẫn này.

---

văn bản nhập vào

<input type = "text"> định nghĩa một lĩnh vực đầu vào một dòng cho đầu vào văn bản:

Thí dụ

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>

Đây là cách nó sẽ giống như trong một trình duyệt:

Họ:

Last name:

Lưu ý: Các hình thức chính nó là không nhìn thấy được. Cũng lưu ý rằng độ rộng mặc định của một trường văn bản là 20 ký tự.

---

Radio Button Input

<input type = "radio"> định nghĩa một nút radio.

nút radio để cho một người sử dụng chọn ONE của một số giới hạn các lựa chọn:

Thí dụ

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

 Nam giới
 Phái nữ
 khác

---

Gửi Nút

<input type = "submit"> định nghĩa một nút để gửi một form với một hình thức-xử lý.

Các hình thức xử lý-thường là một máy chủ trang với một kịch bản để xử lý dữ liệu đầu vào.

Các hình thức-xử lý được quy định trong thuộc tính action của form:

Thí dụ

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

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

Họ:

Last name:

---

Các thuộc tính Action

Thuộc tính action xác định các hành động được thực hiện khi mẫu được gửi.

Cách phổ biến để gửi biểu mẫu để một máy chủ, là sử dụng một nút gửi.

Thông thường, các mẫu được gửi đến một trang web trên một máy chủ web.

Trong ví dụ trên, một kịch bản phía máy chủ được quy định để xử lý các hình thức nộp:

<form action="action_page.php ">

Nếu thuộc tính hành động được bỏ qua, các hành động được đặt vào trang hiện tại.

---

Phương pháp Attribute

Thuộc tính phương pháp xác định các phương thức HTTP (GET hoặc POST) để được sử dụng khi gửi các hình thức:

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

hoặc là:

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

---

Khi sử dụng GET?

Bạn có thể sử dụng GET (phương pháp mặc định):

Nếu gửi mẫu là thụ động (như một truy vấn cụ tìm kiếm), và không có thông tin nhạy cảm.

Khi bạn sử dụng GET, các dữ liệu mẫu sẽ được hiển thị trong các địa chỉ trang:

action_page.php?firstname=Mickey&lastname=Mouse

	GET là phù hợp nhất với các khoản ngắn của dữ liệu. giới hạn kích thước được thiết lập trong trình duyệt của bạn.

---

Khi sử dụng POST?

Bạn nên sử dụng POST:

Nếu hình thức đang cập nhật dữ liệu, hoặc bao gồm các thông tin nhạy cảm (mật khẩu).

POST cung cấp bảo mật tốt hơn bởi vì các dữ liệu trình là không hiển thị trong các địa chỉ trang.

---

Tên Thuộc tính

Để được nộp một cách chính xác, từng lĩnh vực đầu vào phải có một thuộc tính tên.

Ví dụ này sẽ chỉ trình "Last name" lĩnh vực đầu vào:

Thí dụ

<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 các mẫu dữ liệu với <fieldset>

Các <fieldset> nhóm phần tử dữ liệu liên quan trong một biểu mẫu.

Phần tử <legend> xác định một chú thích cho các phần tử <fieldset>.

Thí dụ

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

Đây là cách mã HTML trên sẽ được hiển thị trong một trình duyệt:

Thông tin cá nhân:

Họ:

Last name:

---

HTML Form Attributes

HTML <form> yếu tố, với tất cả các thuộc tính có thể được thiết lập, sẽ giống như thế này:

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

---

Dưới đây là danh sách các <form> các thuộc tính:

đặc tính	Sự miêu tả
chấp nhận-charset	Chỉ định bảng mã được sử dụng trong các hình thức trình (mặc định: charset trang).
hoạt động	Chỉ định một địa chỉ (URL) nơi để gửi biểu mẫu (mặc định: các trang trên Facebook).
autocomplete	Chỉ định nếu trình duyệt nên tự điền biểu mẫu (mặc định: trên).
enctype	Chỉ định mã hóa các dữ liệu trình (mặc định: là url-mã hóa).
phương pháp	Chỉ định các phương pháp HTTP được sử dụng khi nộp mẫu đơn (mặc định: GET).
Tên	Chỉ định một tên được sử dụng để xác định các biểu mẫu (sử dụng DOM: document.forms.name).
novalidate	Chỉ định rằng trình duyệt không cần xác nhận các hình thức.
Mục tiêu	Xác định mục tiêu của địa chỉ trong các thuộc tính hành động (mặc định: _self).

	Bạn sẽ tìm hiểu thêm về các thuộc tính trong các bài tiếp theo.