Thực hành HTML cơ bản

I. Dùng fieldsets để tạo đường viền bao quanh fields:

Thủ thuật này sẽ tạo một đườ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>Thiết Kế Số Profile<span><br>
<span>Tên Website</span><br>
<input type=”text” /><br>
<span>Thiết kế website</span><br>
<input type=”text” /><br>
<span>Quảng bá website</span><br>
<input type=”text” /><br>
<span>Dịch vụ trọn gói</span><br>
<input type=”text” />
</fieldset>

 

II.Label Fieldsets với 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</legend><br> <<< chú ý thẻ <legend> ở đây
<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>

 

III. Sử dụng optgroup để phân cấp tùy chọn

Nếu bạn có nhiều tùy chọn 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=”Thai Nguyen”>
<option>THPT Thai Nguyen</option>
<option>THPT Le Hong Phong</option>
<option>THPT Luong Ngoc Quyen</option>
</optgroup>
<optgroup label=”TP Ho Chi Minh”>
<option>DH KHTN</option>
<option>DH Bach Khoa</option>
<option>CD VH&DL SG</option>
</optgroup>
</select>

 

IV. 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?</label>
<input name=”live” id=”live” type=”checkbox” checked disabled />

<label for=”live”>Fall in Love?</label>
<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

 

V. 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

VI. 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é

VII. 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</label>
<input type=”text” name=”fname” id=”fname” value=”meo” />
<label for=”lname”>Last Name</label>
<input type=”text” name=”lname” id=”lname” value=”pro” />
</form>
</a>

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

FOLLOW US

Leave a Reply

Your email address will not be published. Required fields are marked *