Một số thủ thuật cực kỳ cơ bản của HTML Form nhưng hiệu quả của nó mang lại cho bạn thực sự không nhỏ nếu biết ứng dụng đúng nơi đúng chỗ.

1. Sử dụng fieldsets để tạo đường viền bao quanh fields

Thủ thuật này sẻ tạo 1 đường viền bao quanh toàn bộ 1 field của bạn(không phải bao quanh 1 form) vậy khi nào thì ta sử dụng fieldsets? đó là khi ta có nhiều field trong cùng 1 form và muốn thể thiện tách biệt để dể nhìn hơn

<fieldset >
<span > Mèo Profile<span ><br >
<span > Tên cún cơm</span ><br >
<input type=”text” / ><br >
<span > Số mùa xuân đã qua </span ><br >
<input type=”text” / ><br >
<span > Nơi trú thân</span ><br >
<input type=”text” / ><br >
<span > Tình hình hun nhân</span ><br >
<input type=”text” / >
</fieldset >

2.Label Fieldsets with Legends

Cái này ta phát triển từ fieldsets bên trên để làm rõ 1 dòng title nào đó có thể là title chủ đề của field

 <fieldset >
 <legend > Mèo Profile  <br >  <<<chú ý thẻ  <legend > ở đây
 <span > Tên cún cơm  <br >
 <input type=”text” / > <br >
 <span > Số mùa xuân đã qua   <br >
 <input type=”text” / > <br >
 <span > Nơi trú thân  <br >
 <input type=”text” / > <br >
 <span > Tình hình hun nhân  <br >
 <input type=”text” / >

3. Sử dụng optgroup để phân cấp options

Nếu bạn có nhiều option và thuộc vào những mục khác nhau vậy thì nên phân nó ra để tiện theo dõi hơn bằng cách sau

 <select>
 <optgroup label=”Pleiku”>
 <option > THPT Pleiku 
 <option > THPT Hung Vuong 
 <option > THPT Ban Cong Phan Boi Chau 
 
 <optgroup label=”TP Ho Chi Minh”>
 <option > DH KHTN 
 <option > DH Bach Khoa 
 <option > CD VH&DL SG 

4. Gán thuộc tính cho checkebox

Có 2 cách code cho vấn đề này nhưng chúng ta cùng xem ….

<label for=”live”>Fall in Love?
<input name=”live” id=”live” type=”checkbox” checked disabled />

và

<label for=”live”>Fall in Love?
<input name=”live” id=”live” type=”checkbox” checked=”checked” disabled=”disabled” />

Thực ra kết quả đều cho ra giống y chang nhau nhưng cách code thứ 2 mới là đúng chuẩn của HTML

5. Cần cân nhắc sử dụng giữa Buttons và Submit inputs

Thông thường khi bạn muốn thực hiện 1 button để submit thì làm như sau <input type=”submit” / > nhưng các bạn cũng nên để ý rằng HTML cũng có 1 thuộc tính y như vậy đó là <button > . Vậy điểm khác nhau là ở đâu?

Thuộc tính <button > của HTML cho phép bạn có thể design lại button đó như là thêm hình ảnh vào button chẳng hạn. Muốn tìm hiểu rõ hơn về vấn đề này các bạn nên tham khảo tại đây

6. Quy định khi bấm tab xuống dòng trong HTML

Đừng bao giờ xem thường thuộc tính này bởi vì nó làm cho ta chủ động hơn trong việc muốn người dùng thao tác nào trước trên textbox của chúng ta

<input type=”text” tabindex=”2″ />
<input type=”text” tabindex=”1″ />
<input type=”text” tabindex=”3″ />

khi chạy demo thử doạn code trên bản thử bấm tab trên bàn phím xem có đúng như chúng ta đã quy định không nhé 

7. Hiểu rõ hơn về thuộc tính Get và Post

Bao giờ khi bạn muốn gửi data thông qua form đều bằng 2 mothod GET và POST vậy đâu là điểm khác nhau và khi nào thì ta nên sử dụng 1 trong 2?

Điểm khác biệt lớn nhất đó chính là khi trình duyệt gửi 1 thông tin đi thì server có nhận thông tin đó không với GET thì khi data bạn được gửi đi nó sẻ được hiểu như là ta đang thực thi 1 query(truy vấn) và thông tin sẻ được hiển thị lên trên URL

<a>
<form action=”check.php” method=”get”>
<label for=”fname”>First Name
<input type=”text” name=”fname” id=”fname” value=”meo” />
<label for=”lname”>Last Name
<input type=”text” name=”lname” id=”lname” value=”pro” />

có dạng đường link như sau : http://www.abc.com/check.php?fname=meo&lname=pro

Với POST thì điều này hoàn toàn ngược lại và tất nhiên POST thì luôn là tốt hơn ví dụ như khi bạn submit 1 form có chưa password mà dùng GET thì ôi thôi rồi lượm ơi, nhưng ta cũng nên để ý không phải trường hợp nào cũng dùng POST chỉ dùng khi nào có liên quan đến database còn khi như bạn muốn upload file hay hình ảnh thì trường hợp này GET là lựa chọn tối ưu . Tham khảo để hiểu rõ hơn tại đây