Thẻ form trong HTML

Thẻ form là một trong những thẻ quan trọng nhất trong HTML, giữ vai trò tương tác giữa người dùng và trang web. Các thao tác trao đổi nội dung như đăng nhập, đăng ký, bình luận đều thông qua form và các thành phần khác liên quan.

Code mẫu

<form action="#" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Kết quả:

Họ tên:
Quê quán:

Trình duyệt hỗ trợ

Thẻ form được tất cả các trình duyệt thông dụng hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Các thành phần trong form

• Thẻ dùng nhiều nhất trong form là thẻ input, có rất nhiều input type khác nhau, bạn có thể tham khảo thêm bài 9 thẻ input hay dùng và bài dùng các input mới để tạo form trong HTML5
• Thẻ textarea chuyên dùng để nhập dữ liệu văn bản dài
• Thẻ select, radio button và checkbox để tạo các chọn lựa
• Thẻ fieldset dùng để nhóm các trường liên quan đến nhau trong form
• Thẻ label để đặt tên cho các trường

Các thuộc tính

2 thuộc tính quan trọng hàng đầu trong form là action và method

Thuộc tính action

<form action="xuly.php" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính action dùng để xác định địa chỉ trang web mà những dữ liệu được nhập vào được gửi đến và xử lý, tùy vào ngôn ngữ lập trình web mà bạn có thể thấy đuôi file là php hoặc asp - Đoạn code ở form trên có nghĩa là thông tin về họ tên và quê quán được gửi tới file xuly.php

Thuộc tính method

<form action="xuly.php" method="post">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính method dùng để xác định cách thức dữ liệu được đẩy lên. Có 2 giá trị cho method:

• get: dữ liệu sẽ được đưa lên và nhìn thấy được qua URL (và bạn sẽ thấy cặp tên=giá trị được gắn vào địa chỉ web), vì URL có chiều dài tối đa khoảng 3000 ký tự nên phương thức này không dành để gửi dữ liệu lớn. Ngoài ra vì dữ liệu đầu vào hiện trên URL nên phương thức này cũng không thích hợp với dữ liệu nhạy cảm - thí dụ như password. Tất nhiên ở phía ngược lại nó hợp với dữ liệu không nhạy cảm, chẳng hạn như các truy vấn tìm kiếm.
• post: không giới hạn dung lượng dữ liệu, thích hợp với dữ liệu nhạy cảm, password chắc chắn phải dùng phương thức post.

Xử lý form

• Vấn đề đầu tiên của form là chuẩn hóa dữ liệu, bạn có thể dùng HTML5 hoặc/và cách truyền thống là dùng JavaScript để chuẩn hóa.
• Vấn đề thứ hai là xử lý form bằng ngôn ngữ lập trình web. Trước đây tôi có viết bài xử lý form ngay tại trang trong PHP có thể hữu ích cho bạn.

Thẻ textarea trong HTML

Thẻ textarea chuyên dụng trong Form, dùng để nhập văn bản. Thẻ input kiểu text cũng để nhập văn bản, nhưng thường là đoạn ngắn còn textarea được dùng để nhập cả đoạn văn bản dài.

Code mẫu:

<textarea rows="5" cols="40" placeholder="Gõ nội dung thông điệp vào đây">
</textarea>

Kết quả:

Trình duyệt hỗ trợ

Thẻ textarea được tất cả các trình duyệt phổ thông hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Đặc điểm

• Không giới hạn số ký tự nhập vào.
• Kích thước của textarea được thay đổi thông qua thuộc tính rows và cols, nhưng cách tốt hơn để tác động đến kích thước là thông qua thuộc tính width và height trong CSS.

Các thuộc tính

#1. autofocus: khi vào trang thì con trỏ tập trung ngay lập tức tại textarea

Code:

<textarea rows="5" cols="40" autofocus>
</textarea>

Kết quả (nhấn phím F5 rồi kéo xuống đây - bạn sẽ thấy con trỏ chuột nhấp nháy trong ô textarea):

#2. cols - quy định chiều rộng tính theo số ký tự, rows - quy định số dòng

Code:

<textarea rows="5" cols="40">
</textarea>

Kết quả:

#3. disabled: vô hiệu hóa textarea

Code:

<textarea rows="5" cols="40" disabled>
</textarea>

Kết quả (bạn không thể gõ chữ vào texarea được nữa - vì nó đã bị vô hiệu hóa):



#4. form: quy định form mà textarea thuộc về.

Code:

<form action="#" id="yform">
Name: <input type="text" name="yname">
<input type="submit" value="Gửi">
</form>

<textarea name="comment" form="yform">Gõ vào đây...</textarea>

Kết quả (bạn có thể thấy textarea nằm ngoài thẻ form, nhưng nhờ thuộc tính form, trình duyệt vẫn biết rằng nó thuộc về form có id là yform):

Name:

Gõ vào đây...

#5. maxlength: số ký tự tối đa được phép nhập

Code:

<textarea rows="5" cols="40" maxlength="40">
</textarea>

Kết quả (bạn không thể nhập hơn 40 ký tự):



#6. name: tên của textarea - nó sẽ được dùng để định danh cho trường và là thông tin được gửi đi xử lý kèm văn bản được nhập.

Code:

<form action="xuly.php">
<textarea name="comment" rows="5" cols="40">Để lại bình luận của bạn.</textarea><br>
<input type="submit" value="Gửi">
</form>
Kết quả:

Để lại bình luận của bạn.

#7. placeholder: thông tin hướng dẫn, thường có màu xám và biến mất khi người dùng bắt đầu nhập dữ liệu



Code:

<textarea cols="40" placeholder="Văn bản màu xám này chính là placeholder" rows="5">
</textarea>

#8. readonly: quy định chỉ đọc văn bản trên textarea mà không cho nhập dữ liệu

Code:

<textarea rows="5" cols="40" readonly>
Bạn chỉ đọc được đoạn văn bản này mà không sửa hay thay đổi gì.
</textarea>

Kết quả:

Bạn chỉ đọc được đoạn văn bản này mà không sửa hay thay đổi gì.

#9. required: yêu cầu phải nhập văn bản mới được submit

Code:

<form action="#">
<textarea rows="5" cols="40" required>
</textarea><br >
<input type="submit" value="Submit">
</form>

Kết quả (bạn để trống textarea rồi nhấn Submit xem điều gì xẩy ra):

#10. wrap

Thuộc tính value trong thẻ input

Thuộc tính value là thuộc tính quan trọng trong thẻ input, chức năng của nó còn tùy thuộc vào loại thẻ input type cụ thể.

Code mẫu

<form action="#">

<label>Nam:<input type="radio" name="gioi" value="nam"></label><br />

<label>Nữ:<input type="radio" name="gioi" value="nu"></label><br />

<input type="submit" value="Gửi">

</form>

Kết quả:

Nam:
Nữ:

Trình duyệt hỗ trợ

Thuộc tính value được tất cả các trình duyệt phổ thông hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Cách dùng

Như đã nói ở phần đầu tùy loại input mà thuộc tính value có tác dụng khác nhau:

A. Trong các nút reset và submit thì value có tác dụng hiển thị đoạn text trên nút nhấn. Ví dụ:

Code:

<form>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>

B. Cho input kiểu text, password và hidden thì value xác định giá trị ban đầu của trường. Ví dụ:

Họ tên:

Code:

<label>Họ tên: <input type="text" value="Nguyễn Đức Anh" /></label>

C. Cho input kiểu checkbox, radio và image thì value xác định giá trị của các trường đó, và sẽ là thông tin được gửi đi khi submit. Ví dụ:

Xe máy
Xe bus
Xe đạp
Đi bộ

Code:

<label>Xe máy<input name="phuongtien" type="checkbox" value="xemay" /></label><br />
<label>Xe bus<input name="phuongtien" type="checkbox" value="xebus" /></label><br />
<label>Xe đạp<input name="phuongtien" type="checkbox" value="xedap" /></label><br />
<label>Đi bộ<input name="phuongtien" type="checkbox" value="dibo" /></label>

Các input type kiểu text, password hay hidden có thể không cần thuộc tính value vẫn OK, nhưng input kiểu checkbox và radio, thuộc tính value là bắt buộc, vì nếu không có thì nó sẽ gửi giá trị rỗng khi submit.

Thông tin cuối cùng, thuộc tính value không được phép sử dụng với <input type="file">

Thẻ fieldset trong HTML

Thẻ fieldset là thẻ chuyên dùng cho Form, nó có tác dụng nhóm các thành phần liên quan đến nhau trong Form.

Code mẫu

<form action="#">

<fieldset>

<legend>Thông tin cá nhân</legend>

<label>Họ và tên: <input type="text" name="hoten"></label><br>

<label>Quê quán<input type="text" name="quequan"></label>

</fieldset>

</form>

Kết quả:

Thông tin cá nhân

Họ và tên:
Quê quán

Đặc điểm

• Thẻ fieldset được hỗ trợ bởi tất cả các trình duyệt thông dụng, trong đó có Chrome, FireFox, Opera, Safari và IE.
• Thẻ fieldset tạo đường viền màu xám xung quanh các thành phần mà nó nhóm lại.
• Thẻ legend luôn đi kèm với fieldset, dùng để tạo tiêu đề cho nó. Trong thí dụ ở trên, đó chính là đoạn Thông tin cá nhân nằm trong legend. 

Các thuộc tính mới

• name: đặt tên cho fieldset
• disabled: vô hiệu hóa fieldset
• form: giúp bạn không cần lồng fieldset vào trong thẻ form nhưng vẫn chỉ định được nó thuộc về form nào.

Thuộc tính placeholder của thẻ input

Thuộc tính placeholder là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của placeholder là cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập dữ liệu gì.
Code mẫu:

<form action="#">
<label>Họ tên:<input type="text" name="hoten" placeholder="Điền đầy đủ họ tên"></label>
<label>Quê quán:<input type="text" name="quequan" placeholder="Quê trong Chứng Minh Thư"></label>
<input type="submit" value="Gửi">
</form>

Kết quả:

Họ tên:
Quê quán:

Khi người dùng bắt đầu nhập liệu, thông tin gợi ý sẽ biến mất.

Trình duyệt hỗ trợ

Được hầu hết các trình duyệt hỗ trợ trong đó có: Internet Explorer 10, Firefox, Opera, Chrome và Safari. Chú ý là IE 9 và các phiên bản sớm hơn không được hỗ trợ.

Những thẻ input type dùng placeholder

Gồm các input type sau: text, search, url, tel, email và password.

Thuộc tính required của thẻ input

Thuộc tính required là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit). Dĩ nhiên thao tác này đỡ cho chúng ta khá nhiều code JavaScript.
Code mẫu:

<form action="#">

   <label>Họ tên:<input type="text"  name="hoten" required></label>

   <input type="submit" value="Gửi">

</form>

Kết quả:

Họ tên:

Giờ bạn không điền gì vào trường Họ tên, rồi nhấn nút Gửi thử xem, bạn sẽ nhận được thông báo kiểu như "Vui lòng điền vào trường này"

Trình duyệt hỗ trợ

Thuộc tính required được Internet Explorer 10, Firefox, Opera và Chrome hỗ trợ, đáng tiếc hiện Safari chưa đưa tính năng này vào. Nhưng tôi nghĩ sớm muộn gì Safari cũng cập nhật, vì những thuộc tính mới của input rất hữu ích với người thiết kế và người dùng.

Những thẻ input type dùng requried

Các input sau đây dùng thuộc tính requried: text, checkbox, radio, email, password, search, url, tel, date pickers, number,  file.

Cách dùng

Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit.

Có sự khác biệt giữa XHTML và HTML. Vì XHTML không cho phép rút gọn thuộc tính cho nên với XHTML chúng ta phải viết đầy đủ như sau: <input required="required" />

Cách dùng thẻ abbr trong HTML

Thẻ abbr dùng để chú thích từ viết tắt giúp cho máy tìm kiếm, công cụ dịch thuật, công cụ kiểm tra chính tả hiểu nội dung web tốt hơn.
Code mẫu:

 <abbr title="Unidentified Flying Object">UFO</abbr> còn gọi là Vật thể bay không xác định.

Kết quả:

UFO còn gọi là Vật thể bay không xác định.

Thông tin được đưa vào thuộc tính title của thẻ abbr sẽ được sử dụng để biết từ đầy đủ của từ viết tắt. Khi bạn di chuột qua từ viết tắt, thông tin từ title cũng hiện ra.

Bonus

Nếu bạn muốn tìm nghĩa của các từ viết tắt mà mình chưa biết thì hãy vô trang web: http://www.acronymfinder.com/ nó chứa hơn 4 triệu từ viết tắt trong CSDL.

Cách dùng thẻ label trong HTML

Thẻ label dùng để định nghĩa nhãn cho các thẻ input trong HTML. Tác dụng của label là làm cho thao tác nhập liệu trở nên dễ dàng hơn.
Code mẫu:

<label for="hoten">Họ tên:</label><input type="text" name="hoten" id="hoten">

Kết quả:

Họ tên:

Giờ bạn có thể nhấn vào chữ Họ tên để vào ô nhập liệu, hay nói cách khác, thẻ label làm tăng diện tích click chuột bắt đầu thao tác nhập. Nếu không có thẻ label, khi click vào chữ Họ tên sẽ không có điều gì xảy ra, giống như ví dụ dưới đây:

Họ tên:

Cú pháp của thẻ label

Thẻ label yêu cầu thuộc tính for phải được điền giá trị, và giá trị trong thuộc tính id của input phải giống với giá trị trong thuộc tính for của label. Làm như thế để label biết được nó được dùng cho input nào.

Mẹo

Nếu bạn cho rằng cách dùng for và id lằng nhằng, thì bạn có thể không cần dùng nó mà vẫn cho kết quả tương tự, nhưng khi ấy bạn phải cho thẻ input nằm trong label, code mẫu:

<label>Họ tên:<input type="text" name="hoten"></label>

Kết quả:

Họ tên:

Các ví dụ khác

Label  cho thẻ radio button

Nam
Nữ

Code mẫu:

<form action="#">
<label for="nam">Nam</label><input id="nam" name="gioi" type="radio" value="Nam" /
<br />
<label for="nu">Nữ</label><input id="nu" name="gioi" type="radio" value="Nữ" />
<br />
<input type="submit" value="Gửi" />
</form>

9 thẻ input thường dùng trong HTML

Các thẻ input type chuyên dụng trong các form, dùng để nhập liệu, kiểu như: đăng ký, đăng nhập, liên hệ, gửi file...Hôm nay chúng ta sẽ xem xét các thẻ input phổ biến nhất.

Các input đều giống nhau về cấu trúc, chỉ khác nhau về type. Chính type này quyết định kiểu của input. Có đến hơn 20 type khác nhau. Một số type input chỉ được hỗ trợ trong HTML5. Các type giới thiệu trong ngày hôm nay được tất cả các trình duyệt thông dụng hỗ trợ.

Nhập text

Ví dụ:

Họ tên:

Code mẫu:

Họ tên: <input name="hoten" type="text" />

Giá trị của thuộc tính name sẽ được dùng để lấy giá trị input, cả PHP và JavaScript đều căn cứ vào name để biết giá trị nằm trong input.

Nhập password

Ví dụ:

Mật khẩu:

Code mẫu:

<input name="psw" type="password" />

Vì là nhập password nên khi bạn gõ vào trường này nó sẽ hiện ra các dấu hoa thị *, để người khác không nhìn thấy mật khẩu.

File đính kèm

Ví dụ:

Chọn ảnh của bạn:

Code mẫu:

<input type="file" name="anh">

Button reset

Tác dụng của nút nhấn reset là xóa các dữ liệu mà bạn nhập không đúng, giả dụ nhập tên và quê quán vào 2 trường dưới đây, rối nhấn reset xem điều gì xảy ra:

Họ tên:
Quê quán:

Code mẫu:

<form action="#">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="que"><br />
<input type="reset" value="Reset">
</form>

Button submit

Tác dụng của nút nhấn submit là gửi dữ liệu, khi bạn nhập đầy đủ các trường, và nhấn submit thì dữ liệu từ các trường bạn nhập sẽ được gửi đến đâu đó để xử lý tiếp. Có thể nó sẽ được Validate bằng JavaScript để chuẩn hóa, sau đó gửi lên Server để ghi thông tin vào cơ sở dữ liệu bằng PHP (hoặc ngôn ngữ lập trình web khác).

Ví dụ:

Tên đăng nhập:
Mật khẩu:

Code mẫu:

<form action="#">
Tên đăng nhập: <input name="user" type="text" /><br />
Mật khẩu: <input name="pass" type="text" /><br />
<input type="submit" value="Submit" />
</form>

Ẩn input

Họ tên:

Code mẫu:

<form action="#">
Họ tên: <input type="text" name="hoten"><br>
<input type="hidden" name="quocgia" value="Việt Nam">
<input type="submit" value="Submit">
</form>

Bạn có thể thấy input có name là quocgia bị ẩn không hiện trong form. Tuy bị ẩn nhưng nếu chúng ta Submit nó giá trị "Việt Nam" vẫn được gửi đi.

Radio button

Dùng để chọn chỉ 1 trong nhiều lựa chọn, ví dụ:

Nam
Nữ
Khác

Code mẫu:

<form action="#">

<input name="gioitinh" type="radio" value="Nam" />Nam<br />

<input name="gioitinh" type="radio" value="Nữ" />Nữ<br />

<input name="gioitinh" type="radio" value="Khác" />Khác

</form>

Checkbox

Dùng để chọn nhiều lựa chọn cùng lúc, có thể 1 hoặc nhiều, ví dụ:

Bóng đá
Bơi lội
Điền kinh
Cầu lông
Võ thuật

Code mẫu:

<form action="#">
<input name="thethao" type="checkbox" value="Bóng đá" />Bóng đá<br />
<input name="thethao" type="checkbox" value="Bơi lội" />Bơi lội<br />
<input name="thethao" type="checkbox" value="Điền kinh" />Điền kinh<br />
<input name="thethao" type="checkbox" value="Cầu lông" />Cầu lông<br />
<input name="thethao" type="checkbox" value="Võ thuật" />Võ thuật
</form>

Thông tin đầy đủ hơn về Checkbox và Radio button bạn có thể đọc để tham khảo thêm.

Email

Type cuối cùng tôi đề cập là email, sở dĩ như vậy vì type này chỉ được hỗ trợ trong HTML5 - tuy nhiên nói là vậy thôi, chứ chúng ta cũng không phải lo gì cả, vì input email đã được support tốt bới các trình duyệt. Code mẫu:

<form action="#">
Email: <input name="email" type="email" />
<input type="submit">
</form>

Kết quả:

Email:

Nó validate email cho chúng ta rồi, nên bạn không cần viết JavaScript - trừ khi bạn muốn chuẩn hóa dữ liệu nhập vào cao hơn nữa.

Thực hành thuộc tính word-spacing trong CSS

Trong bài viết trước đây về 8 thuộc tính văn bản trong CSS tôi có đề cập đến word-spacing. Tuy nhiên bài đó chỉ là cái nhìn tổng quát. Hôm nay chúng ta sẽ đi vào chi tiết và các ví dụ cụ thể.

Thuộc tính word-spacing được dùng để điều khiển khoảng cách chữ với nhau.

Code mẫu

p
{
word-spacing:20px;
}

Kết quả:

Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

Đặc điểm

• Giá trị mặc định: normal - giá trị này sẽ để khoảng cách chữ theo mặc định của font.
• Tính kế thừa: có kế thừa - tính kế thừa làm cho các thẻ con cháu tự động có cùng thuộc tính với thẻ cha. Nghĩa là thẻ cha có thuộc tính word-spacing như thế nào thì các thẻ con cháu cũng có thuộc tính word-spacing như thế.
• Phiên bản CSS: word-spacing thuộc về phiên bản CSS1
• Cú pháp trong JavaScript, thí dụ: object.style.wordSpacing="7px"
• Hỗ trợ trình duyệt: được hỗ trợ bởi hầu hết các trình duyệt lớn gồm: FireFox, Google Chrome, Opera, Safari, IE.

Các giá trị

• normal: khoảng cách mặc định
• độ dài: ngoài px các đơn vị pt, cm, em đều OK cả, các giá trị âm cũng được chấp thuận.

Thực hành

p {word-spacing: 5px;}

Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

p {word-spacing: 15px;}

Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

p {word-spacing: -5px;}Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

p {word-spacing: 1em;}
Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

p {word-spacing: 0.5em;}
Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

p {word-spacing: 1cm;}
Hà Nội mùa này vắng những cơn mưa. Cái rét đầu đông khăn em bay hiu hiu gió lạnh.

Cách dùng thẻ sup và sub trong HTML

Nếu hay phải viết các công thức toán học, hóa học, bạn sẽ cần dùng thường xuyên hai thẻ sup và sub. Nó được dùng để tạo chỉ số trên và chỉ số dưới.

Thẻ sub

Thí dụ công thức hóa học 2H2 + O2 = 2H2O, nếu không áp dụng chỉ số dưới sub thì trông sẽ như đoạn vừa gõ, để sửa lại, ta dùng đoạn code sau:

2H₂ + O₂ = 2H₂O

Kết quả:

2H₂ + O₂ = 2H₂O

Thẻ sup

Thí dụ phương trình bậc 2: ax2 + bx + c = 0

Đáng ra số 2 phải ở bên trên biến x. Để sửa lại dòng trên, ta dùng đoạn code sau:

ax² + bx + c = 0

Kết quả:

ax² + bx + c = 0

Ngoài ra thẻ sup cũng hay được dùng để tạo các chú thích, chẳng hạn:

Trăm năm trong cõi người ta

Chữ tài chữ mệnh khéo là ghét nhau^[1]

[1]: Trích trong tác phẩm Truyện Kiều của Nguyễn Du.

Bên cạnh cách dùng thẻ sub và sup, bạn có thể dùng thuộc tính vertical-align, nó cũng cho kết quả tương tự, nhưng bạn sẽ chủ động hơn trong việc điều chỉnh CSS.

Thực hành với thẻ select và option trong HTML

Thẻ select dùng để lựa chọn, ở khía cạnh nào đó nó giống với radio button, nhưng điểm khác biệt là select có kiểu dáng dạng drop-down menu (xổ xuống).
Code mẫu:

<select>
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Kết quả: Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

Thuộc tính name

Đây là thành phần không thể thiếu của các thẻ nằm trong form, trong đó phải kể đến các thẻ input, textarea. Thẻ select cũng vậy, thuộc tính name cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy được dữ liệu mà người dùng nhập sau khi họ nhấn nút submit. Code mẫu:

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Thuộc tính disabled

Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào đó không khả dụng, ví dụ:

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

Code mẫu:

<select disabled name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Giờ giả dụ các nhà có giá từ 300 - 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn select được:

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

<select name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option disabled value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Thuộc tính size

Với size, bạn sẽ quy định xem có bao nhiêu lựa chọn được hiển thị ra ngoài. Như ở trên có 4 giá nhà, và hiển thị ra ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ra ngoài 4 lựa chọn. Ví dụ:

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ Từ 1.2 tỷ đến 1.5 tỷ Từ 1.5 tỷ triệu đến 2 tỷ Từ 2 tỷ triệu đến 3 tỷ Từ 3 tỷ triệu đến 5 tỷ

Code mẫu:

<select name="gianha" size="4">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ</option>
   <option value="812">Từ 1.2 tỷ đến 1.5 tỷ</option>
   <option value="812">Từ 1.5 tỷ triệu đến 2 tỷ</option>
   <option value="812">Từ 2 tỷ triệu đến 3 tỷ</option>
   <option value="812">Từ 3 tỷ triệu đến 5 tỷ</option>
</select>

Có một số chú ý:

• Khi bạn sử dụng size lớn hơn 1, theo mặc định có ít nhất 4 lựa chọn sẽ hiện ra, tức là nếu bạn chọn size là 2, 3 hoặc 4 thì đều ra 4 lựa chọn hết. Từ 4 trở lên thì mới chính xác hoàn toàn, giả dụ để 5 thì có 5 lựa chọn, để 7 thì có 7 lựa chọn.
• Nếu size lớn hơn 1 nhưng nhỏ hơn số khả năng lựa chọn thì sẽ xuất hiện thanh cuộn dọc để bạn kéo lên kéo xuống.

Thuộc tính multiple

Với multiple, bạn sẽ cho phép người dùng có nhiều lựa chọn cùng lúc thay vì chỉ một lựa chọn như mặc định:

Chọn giá nhà bạn muốn mua Từ 300 triệu đến 400 triệu Từ 401 triệu đến 600 triệu Từ 601 triệu đến 800 triệu Từ 801 triệu đến 1.2 tỷ đồng

Giữ phím Ctrl và tick nhiều cái, với giả định là bạn có thể mua nhà từ giá thấp nhất đến gần cao nhất :)

Code mẫu:

<select multiple name="gianha">
   <option value="0">Chọn giá nhà bạn muốn mua</option>
   <option value="34">Từ 300 triệu đến 400 triệu</option>
   <option value="46">Từ 401 triệu đến 600 triệu</option>
   <option value="68">Từ 601 triệu đến 800 triệu</option>
   <option value="812">Từ 801 triệu đến 1.2 tỷ đồng</option>
</select>

Rõ ràng multiple làm cho select giống với checkbox hơn. Tuy nhiên cũng dễ thấy checkbox thì chuyên nghiệp hơn trong việc thiết kế ứng dụng đa lựa chọn.

Nhóm các lựa chọn liên quan bằng optgroup

Nếu bạn có một danh sách khá dài các chọn lựa, bạn có thể muốn nhóm các chọn lựa lại với nhau để người dùng dễ dàng quan sát và thao tác. Khi ấy bạn nên dùng thẻ optgroup. Code mẫu:

<select name="gianha">
<optgroup label="Dưới 500 triệu">
<option value="499">499 triệu - 60m2</option>
<option value="350">350 triệu - 40m2</option>

<option value="250">250 triệu - 25m2</option>
</optgroup>

<optgroup label="Trên 500 triệu">
<option value="700">700 triệu - 85m2</option>
<option value="900">350 triệu - 100m2</option>

<option value="1200">1.2 tỷ - 150m2</option>

</optgroup>
</select>

Kết quả:

499 triệu - 60m2350 triệu - 40m2250 triệu - 25m2700 triệu - 85m2350 triệu - 100m21.2 tỷ - 150m2

Bạn có thể thấy các nhà có giá dưới 500 triệu được nhóm lại dưới nhãn được bôi đậm. Thẻ optgroup có 2 thuộc tính, ngoài thuộc tính label bạn đã thấy trong code ở trên, nó còn thuộc tính disabled dùng để vô hiệu hóa một nhóm lựa chọn, giả dụ, tất cả các nhà có giá dưới 500 triệu đã được bán hết, ta sẽ không cho người dùng có chọn lựa này, code mẫu:

<select name="gianha">
<optgroup label="Dưới 500 triệu" disabled>
<option value="499">499 triệu - 60m2</option>
<option value="350">350 triệu - 40m2</option>

<option value="250">250 triệu - 25m2</option>
</optgroup>
<optgroup label="Trên 500 triệu"><option value="700">700 triệu - 85m2</option>
<option value="900">350 triệu - 100m2</option>

<option value="1200">1.2 tỷ - 150m2</option>

</optgroup>
</select>

Kết quả:

499 triệu - 60m2350 triệu - 40m2250 triệu - 25m2700 triệu - 85m2350 triệu - 100m21.2 tỷ - 150m2

Như vậy là cả nhóm dưới 500 triệu đã không thể chọn lựa được.

Thẻ radio button và checkbox trong HTML

Thực ra chúng đều thuộc về nhóm thẻ input nhưng có thuộc tính type là radio button và checkbox. Nhóm thẻ input là không thể thiếu khi muốn làm Form nhập liệu và chúng thường xuyên kết hợp với Javascript để validate. Bên cạnh 5 type rất hay dùng gồm: text, password, submit, reset và email thì 2 type chuyên dụng để tạo các lựa chọn là Radio button và Checkbox bạn cũng cần nắm rõ.

Radio button

Type này được dùng để chọn một trong nhiều lựa chọn, chẳng hạn chọn giới tính, chọn quốc gia đang sinh sống. Code mẫu:

<form>
<input name="gioitinh" type="radio" value="Nam" />Nam<br />
<input name="gioitinh" type="radio" value="Nữ" />Nữ<br />
<input name="gioitinh" type="radio" value="Khác" />Khác
</form>

Kết quả:

Nam
Nữ
Khác

Nếu bạn không để name có cùng tên thì bạn sẽ chọn được 2 cái cùng lúc, do vậy cần lưu ý name khi dùng radio.

Checkbox

Radio buttons dùng để chọn chỉ một cái trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn không chọn lựa cái nào hoặc chọn nhiều cái (từ một cho đến tất cả), code mẫu:

<form>
<input type="checkbox" name="thethao" value="Bóng đá">Bóng đá<br>

<input type="checkbox" name="thethao" value="Bơi lội">Bơi lội<br>

<input type="checkbox" name="thethao" value="Điền kinh">Điền kinh<br>
<input type="checkbox" name="thethao" value="Cầu lông">Cầu lông<br>

<input type = "checkbox" name= "thethao" value="Võ thuật">Võ thuật
</form>

Kết quả:

Bóng đá
Bơi lội
Điền kinh
Cầu lông
Võ thuật

Thuộc tính checked

Đây là thuộc tính được dùng để đánh dấu trước một lựa chọn nào đó, chẳng hạn một Form nhập liệu yêu cầu bạn nhập Quốc gia đang sinh sống, nhưng nó cũng xác định được địa chỉ IP của bạn xuất phát từ Việt Nam nên đã tick sẵn vào đây từ trước cho bạn. Điều này giúp bạn giảm thiểu các thao tác phải nhập. Ví dụ:

Việt Nam
Trung Quốc
Nhật Bản
Hàn Quốc

Code mẫu:

<form>
<input checked="checked" name="gioitinh" type="radio" value="VN" />Việt Nam<br />
<input name="gioitinh" type="radio" value="TQ" />Trung Quốc<br />
<input name="gioitinh" type="radio" value="NB" />Nhật Bản<br />
<input name="gioitinh" type="radio" value="HQ" />Hàn Quốc
</form>

Ngắt dòng tự động với thuộc tính word-wrap trong CSS3

Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout của trang.

Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.mangluoitoancau.com

Bạn dễ dàng thấy tên miền www.mangluoitoancau.com bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu:

<div style="border: 3px solid aqua; padding: 5px; width: 120px; word-wrap: break-word;">
1.vnexpress.net<br />
2.dantri.vn<br />
3.www.google.com<br />
4.www.mangluoitoancau.com
</div>

Kết quả:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.mangluoitoancau.com

Như bạn đã thấy, một từ dài đã không còn tràn ra ngoài nữa mà bị ngắt rồi xuống dòng kế tiếp (bình thường thì không thể ngắt được, vì nó thuộc về cùng một từ)

Ngoài giá trị break-word, còn có giá trị khác là normal. Giá trị normal là dạng mặc định, tức là từ quá dài sẽ tràn ra khỏi layout.

Cú pháp tổng quát: word-wrap: normal | break-word;

Dĩ nhiên là bạn chỉ được chọn một trong 2 giá trị thôi nhá, hoặc là normal, hoặc là break-word.

Câu hỏi: liệu còn cách nào để tránh tràn trong diện tích hẹp như vậy không?

Câu trả lời là có. Bạn có thể dùng thuộc tính overflow. Chẳng hạn tôi có thể sửa hộp trên như sau:

1.vnexpress.net
2.dantri.vn
3.www.google.com
4.www.mangluoitoancau.com

Tuy nhiên như bạn đã biết (hoặc bây giờ sẽ biết) đối với người dùng thì thanh cuộn dọc hoàn toàn OK nhưng họ không ưa thanh cuộn ngang cho lắm. Vì vậy word-wrap vẫn hữu ích hơn trong trường hợp này.

Thuộc tính box-shadow trong CSS3

Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Nó có tác dụng tạo bóng cho hộp (xem thêm mô hình hộp trong CSS).

Ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px 10px;

}

Kết quả:

Khi sử dụng box-shadow có một số lưu ý sau:

• Bóng là một hộp có kích thước tương tự hộp ban đầu
• Màu sắc mặc định của bóng là đen (mã màu: #000000)
• box-shadow: 20px 10px; quy định độ dịch chuyển của bóng so với vị trí gốc, theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px).

Bạn có thể đặt giá trị âm cho độ dịch chuyển, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px -10px;

}

Kết quả:

Tạo độ mờ cho bóng

Đã là bóng thì nó thường mờ (blur) hơn vật chủ, để bổ sung độ mờ cho bóng, ta thêm giá trị nữa đằng sau, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px 10px 10px;

}

Kết quả:

Thay đổi độ lớn của bóng

Để thay đổi độ lớn của bóng, bạn thêm tiếp giá trị vào đằng sau độ mờ, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px;

}

Kết quả:

Với giá trị -10px; kích thước bóng sẽ giảm đi 10px cả 2 chiều so với kích thước gốc, nghĩa là lúc này, bóng rộng 290px = 300px - 10px và cao 140px = 150px - 10px;

Thay đổi màu cho bóng

Để quy định màu cho bóng, bạn thêm mã màu vào (xem thêm: cách khai báo màu sắc trong CSS), nó nằm ở vị trí cuối cùng, code mẫu:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px gray;

}

Kết quả là bóng sẽ có màu xám:

Bóng đổ ngay bên trong hộp

Từ nãy đến giờ chúng ta vẫn chỉ thực hành với bóng bên ngoài hộp, nhưng bóng không phải lúc nào cũng ở bên ngoài, đôi khi ngay bên trong hộp cũng có bóng, để làm điều này, ta dùng giá trị inset:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px pink inset;

}

Kết quả:

Một vài kết quả khác:

Cũng là đổ bóng, nhưng dành cho văn bản, bạn dùng thuộc tính text-shadow.

Điều gì xẩy ra khi đổ bóng cho hình tròn

Ở một bài viết trước đây tôi có nói về code bo tròn ảnh - cũng bằng CSS3, giờ tôi sẽ thử đổ bóng cho bức ảnh hình tròn này xem sao.

Như vậy là không có vấn đề gì với việc tạo bóng cho hình tròn. Nó cho kết quả tương tự như hình chữ nhật. Giờ tôi sẽ nghịch thử một chút. Tôi sẽ tạo hào quang cho bức ảnh (nói ghê vậy chứ nó cũng không giống hào quang lắm), bí quyết là ta không dịch chuyển bóng nhưng làm tăng blur của nó lên, điều đó tạo ảo giác có vật chiếu sáng đằng sau bức ảnh:

Hiệu ứng cũng khá đẹp mắt, đây là code mẫu:
<img  border="0" src="images/cap-doi-hoan-canh.jpg" style="border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius: 50%; border-top-right-radius: 50%; box-shadow: 0px 0px 50px 0px blue;" />

• Thay đổi giá trị 50px để điều chỉnh độ rộng của hào quang.
• Thay đổi blue sang màu khác để đổi màu hào quang.

Bộ chọn hay Selector trong CSS

Trong khi code CSS, bộ chọn (selector) là cái được viết ra đầu tiên. Nó là đối tượng mà chúng ta muốn tác động, tiếp theo mới viết các khai báo, trong khai báo có thuộc tính và giá trị (xem thêm cú pháp của CSS).

Đễ cho dễ tưởng tượng hơn, giả dụ bạn là thợ sơn chuyên nghiệp, khách hàng alo cho bạn, anh ta muốn sơn ngôi nhà có màu xanh, và các viền cửa màu nâu. OK, chuyện đó chẳng khó gì với bạn, thế nhưng nếu khách hàng không cho biết địa chỉ cụ thể của ngôi nhà thì bạn biết sơn vào đâu? Địa chỉ ngôi nhà có thể nói là selector. Dưới đây là các dòng code thực tế. Thí dụ:

#menu {

font-size: 18px;

background-color: lime;

}

Cái #menu chính là bộ chọn.

Nếu không nắm rõ về selector, bạn sẽ gặp khó khăn trong việc CSS, rất có thể bạn sẽ lạm dụng id và class, các đoạn mã bị rối loạn, chồng chéo và thiếu kiểm soát.

Câu hỏi đầu tiên, CSS có những bộ chọn nào?

• Selector tất cả các thành phần HTML
• Selector các thành phần có cùng tên class
• Selector các thành phần có cùng tên id
• Selector các thẻ cùng loại
• Selector nhiều thẻ khác nhau
• Selector thành phần nằm trong thành phần khác
• Selector thành phần phải là con của thành phần khác
• Selector các lớp giả
• Selector dựa vào thuộc tính của thẻ

1. Chọn tất cả các thành phần HTML

Sử dụng dấu * để chọn tất cả các thành phần của HTML, ví dụ:

* {

    margin: 0;

    padding: 0;

}

Bạn có thấy đoạn code trên quen quen không? nó thường dùng để khử mặc định trình duyệt về lề và đệm của tất cả các thẻ trong HTML.

2. Chọn tất cả thành phần có cùng tên class

Sử dụng dấu chấm (.) theo sau đó là tên class để làm bộ chọn, thí dụ ta có mã đánh dấu HTML như sau:

<h2 class="tieude">Blog Mạng Lưới Toàn Cầu</h2>

Để tác động vào các thẻ có class là tieude, trong CSS viết:

.tieude {

   color: red;

}

Lưu ý: tất cả các class có cùng tên đều bị tác động bởi câu lệnh trên.

3. Chọn thành phần có tên id

Với id, sử dụng dấu # để bắt đầu bộ chọn, sau đấy là tên của íd, ví dụ đầu bài về menu chính là minh họa về cách sử dụng id làm selector.

#menu {

font-size: 18px;

}

 Bạn có thể đọc bài viết sự giống và khác nhau giữa id và class để có thêm thông tin.

4. Chọn tất cả các thẻ cùng loại

Thí dụ tôi muốn văn bản có font là arial thì viết như này:

p {

   font-family: Arial Helvetica sans-serif;

}

Khi ấy, bất kỳ văn bản nào trong trang web đều được quy định font là Arial...Tương tự, câu lệnh:

h2 {

   margin-left: 10px;

   padding: 5px;

}

 Làm tất các các thẻ h2 có lề về bên trái là 10px và khoảng đệm là 5 px.

5. Chọn nhiều thẻ khác nhau cùng một lúc

Giả dụ nếu bạn muốn cả thẻ h2, h3 và thẻ p cùng có lề trên là 10px thì viết như sau:

h2, h3, p {

   margin-top: 10px;

}

Lưu ý:

• Các thẻ ngăn nhau bằng dấu phẩy
• Không giới hạn số thẻ 

Tác dụng lớn nhất của selector này là nó giúp chúng ta đỡ phải viết code lặp đi lặp lại.

6. Chọn thành phần nằm trong một thành phần khác

Câu lệnh:

div h3 {

    font-weight: normal;

}

Dòng code trên sẽ làm tất cả các thẻ h3 nằm trong div đều chịu ảnh hưởng của lệnh, dù là thẻ con, cháu, chắt...của div

7. Chọn chính xác thành phần phải là con của một thành phần khác

Câu lệnh:

#right>h2{

   font-size: 12px;

   color: blue;

}

Selector trên sẽ chọn tất cả các thẻ h2 là con của id có tên là right. Có bạn sẽ hỏi: câu lệnh này với câu lệnh chọn thành phần nằm trong một thành phần khác có gì khác nhau?

Sự khác nhau nằm ở độ sâu của tác động. Một cái tác động rất sâu và rộng vào mọi thành phần con và cháu, còn một cái chỉ tác động vào các thẻ nào là con mà thôi.

8. Chọn các lớp giả

Các lớp giả bao gồm :link, :hover, :visited, :active, :focus, :first-letter, :first-line, :first-child, :before, :after, :lang (mã ngôn ngữ) - nổi tiếng nhất trong nhóm này là hover. Ví dụ:

a:hover {

   color: gray;

}

Câu lệnh này làm cho người dùng khi di chuột qua liên kết thì link đổi sang màu xám. Đọc thêm bài CSS cho thẻ a để biết chi tiết hơn cách tạo style cho liên kết.

9. Chọn dựa vào thuộc tính của thẻ

Bạn chọn thẻ muốn tác động dựa vào thuộc tính của nó, thí dụ đoạn code sau:

<!DOCTYPE html>

<html>

<head>

<style>

a[target=_blank]

{

background-color:lime;

}

</style>

</head>

<body>

<a href="http://vi.wikipedia.org">vi.wikipedia.org</a>

<a href="www.mangluoitoancau.com" target="_blank">www.mangluoitoancau.com</a>

<a href="http://vnexpress.net">vnexpress.net</a>

</body>

</html>

Có 3 thẻ a trong body, nhưng bằng cách sử dụng thuộc tính để tác động, làm cho chỉ thẻ a ở giữa có màu nền là lime, 2 thẻ a còn lại không bị ảnh hưởng gì.

Thuộc tính z-index trong CSS - lý thuyết và thực hành

Thuộc tính z-index dùng để chỉ thị thứ bậc của các lớp thẻ trong HTML. Nói một cách đơn giản, nếu các thẻ là các trang giấy thì số thứ tự của trang chính là chỉ số z-index, làm cho trang này ở trước trang kia.

Z-index luôn đi kèm với thuộc tính position. Trong ví dụ minh họa ở trên, tôi có nói về các trang sách, nó không hoàn toàn đúng hẳn, vì ở sách, trang nào có số lớn thì nằm dưới, nhưng với z-index, thẻ HTML nào có trị số lớn thì nằm lên trên - tức là gần mắt hơn.

Trị số của z-index phải là số nguyên, dương hoặc âm. Nếu chúng ta không quy định giá trị cụ thể của z-index thì nó mặc định là 0, và trong trang HTML khi đó, theo thứ tự từ trên xuống dưới của các dòng code, các thẻ ở dưới sẽ xếp phía trên. Ví dụ:

Code mẫu của đoạn trên:

<div style="height: 280px; margin: 20px; position: relative;">

<div style="background-color: blue; height: 200px; left: 0px; position: absolute; top: 0px; width: 200px;"></div>

<div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px;"></div>

<div style="background-color: red; height: 200px; left: 80px; position: absolute; top: 80px; width: 200px;"></div>

</div>

Tôi không viết ra giá trị cụ thể của z-index, do vậy các thẻ ở dưới sẽ xếp lên trên, căn cứ vào đoạn code trên thì đó chính là hộp màu đỏ.

Giờ tôi sẽ để hộp màu đen xếp lên trên cùng, hộp màu xanh ở vị trí thứ hai, và hộp màu đỏ ở vị trí cuối cùng, để làm được việc đó, tôi sẽ thêm z-index vào và để giá trị lớn hơn cho hộp cần xếp ở vị trí cao.

Code mẫu:

<div style="height: 280px; margin: 20px; position: relative;">

<div style="background-color: blue; height: 200px; left: 100px; position: absolute; top: 0px; width: 200px; z-index: 2;"></div>

<div style="background-color: black; height: 200px; left: 40px; position: absolute; top: 40px; width: 200px; z-index: 3;"></div>

<div style="background-color: red; height: 200px; left: 140px; position: absolute; top: 80px; width: 200px; z-index: 1;"></div>

</div>
Các dòng code vẫn giữ nguyên thứ tự, tuy nhiên tôi có dịch các hộp sang trái và phải đôi chút để bạn dễ quan sát các lớp - kết quả:

Để thẻ nào đó luôn xếp ở vị trí cao nhất, chúng ta thường để z-index của nó thật cao, chẳng hạn z-index: 10; ví dụ các thanh trượt dọc dùng để like và share ta hay để z-index giá trị cao.

Giờ chúng ta sẽ thực hành về z-index theo đề bài như sau: tôi muốn một hình ảnh, mà khi hover qua nó sẽ đổi thành ảnh khác.

Ý tưởng giải yêu cầu trên:

• Tôi sẽ tạo 2 ảnh ở cùng một vị trí và xếp chồng chúng lên nhau, ảnh có z-index cao sẽ ở trên.
• Khi tôi hover qua ảnh, thì tôi sẽ thay đổi giá trị z-index để ảnh dưới sẽ xếp lên trên.

Bạn có thể xem kết quả demo ở đây. Code mẫu:

A. Style

div {

position:relative;

height:252px;

}

img {

position:absolute;

}

#tren:hover {

z-index:-1;

}

#duoi:hover {

z-index:1;

}

B. HTML

<div>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCjVjALGuaDByqcpUPnw38bpfJcmKVNSAe7xAyDREqUKEmHKgYpu9aNB5cKoj9jnHDIFv9juWNjKGlQLPkkXySCY1WsvQ2NxACLt1oHpBX42SFRaLT0ahDF8SbsoYgiqwHlNAWtBZJg/s1600/stock-casting.jpg" id="duoi"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0hLJ-as6AhuhKgF1QeG_xxrfmVR4hDUcSs2iVyPEFmBCfs56UhdbcBB14bvusR8yZ7jwIDG7ht7J_IkpPx5D4XWpKdr_iso6WQJufTEnWXpQm1mf4f6tLJb3AO_yTtzsuCZkkGsof0A/s1600/stock-photo-lanka.jpg" width="380" height="251" id="tren">

</div>

Thông tin cuối cùng: Có bạn hỏi, sao lại để là z-index mà không phải a-index hay b-index? Sở dĩ là z, vì nó đại diện cho chiều sâu trên trục tọa độ 3 chiều x, y, z. Còn index dịch ra tiếng Việt là chỉ số, vậy z-index, hiểu cách nôm na là chỉ số theo chiều sâu.

Mô hình hộp trong CSS

Với CSS, các thẻ HTML được xem như chiếc hộp. Hộp này có nội dung, đệm (padding), đường viền (border) và lề (margin).

Sở dĩ bình thường bạn chẳng thấy cái hộp nào là bởi theo mặc định các giá trị trên được quy định là 0. Chỉ khi bạn gán một giá trị cụ thể cho nó, các đối tượng này mới hiện nguyên dạng.

Giả dụ như dòng chữ này, bạn sẽ không thấy gì cả.

Nhưng dòng chữ này bạn sẽ thấy nó có đường viền, có đệm và có cả lề nữa


Và dưới đây là hình ảnh mô phỏng cho mô hình hộp trong CSS:

Một điều cần chú ý trong mô hình hộp đó là kích thước của hộp sẽ thay đổi khi bạn gán các giá trị cho thuộc tính lề, đệm và viền, cụ thể:

• Chiều rộng hộp = chiều rộng  + padding trái + padding phải +  border trái + border phải + margin trái + margin phải
• Chiều cao hộp = chiều cao + padding trên + padding dưới +  border trên + border dưới + margin trên + margin dưới

Ví dụ một div được mô tả như sau:

div {

width:200px;

height: 100px;
padding:10px;
border:5px solid red;
margin:20px;

}

Bạn đừng lầm tưởng div có chiều rộng là 200px và chiều cao là 100px, đấy thực tế chỉ là không gian của nội dung, còn không gian của cả div có kích thước lớn hơn, cụ thể:

• chiều rộng = 200 + 10*2 + 5*2 + 20*2 = 270px
• chiều cao = 100 + 10*2 + 5*2 + 20*2 = 170px

Vấn đề nhầm lẫn kích thước rất hay xảy ra với padding, vì bạn nghĩ khi thêm padding kích thước sẽ không tăng lên.

Ảnh minh họa: http://www.dreamstime.com/

Hướng dẫn tạo Menu xổ bằng code CSS đơn giản

Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web cần nhiều điều hướng - cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích.

Hôm nay tôi và bạn sẽ cùng thực hành tạo menu xổ, tiếng Anh là dropdown menu, chúng ta sẽ code hoàn toàn bằng CSS chứ không cần Javascript, ngoài ra cũng chú ý để viết code sao cho đơn giản nhất có thể được mà vẫn tạo ra hiệu quả tương tự. Bạn có thể xem demo kết quả cuối cùng ở đây.

#1. Tạo mã HTML cho menu

Menu sử dụng danh sách không có thứ tự, tức là thẻ ul và li. Cụ thể mã sẽ kiểu như này:

<ul id="menu">

    <li><a href="#">Menu 1</a></li>

    <li><a href="#">Menu 2</a>

          <ul id="sub">

                 <li><a href="#">Sub Menu 1</a></li>

                 <li><a href="#">Sub Menu 2</a></li>

                 <li><a href="#">Sub Menu 3</a></li>

          </ul>

    </li>

    <li><a href="#">Menu 3</a></li>

    <li><a href="#">Menu 4</a></li>

    <li><a href="#">Menu 5</a></li>

</ul>

Bạn có thể thấy, Menu 2 chính là cái xổ ra, những menu còn lại là thường. Kết quả của đoạn code trên sẽ như dưới đây, vì bạn chưa CSS gì cả nên chúng ta chưa có hiệu ứng nào.

• Menu 1
• Menu 2
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu 3
• Menu 4
• Menu 5

#2. Tạo Style cho Menu

Đến bước này ta mới bắt đầu dùng CSS, trước tiên chúng ta bỏ mấy dấu chấm tròn và cho menu dàn hàng ngang. Code CSS

ul#menu li {
list-style-type: none; /* code này để bỏ các dấu chấm tròn*/
float: left; /* code này để menu dàn hàng ngang*/
margin-right: 10px; /* tạo lề cho các menu*/
}

Đây là kết quả của bước thứ hai:

Để trang trí đơn giản cho menu tôi thêm đoạn css:

ul#menu li a {
text-decoration:none;
background-color:#900;
padding: 5px;
color:white;
}

Kết quả: 

#3. Ẩn đi Sub Menu

Các Sub Menu 1 cho đến Sub Menu 3 sẽ bị ẩn đi, vì chúng chỉ hiện ra khi được hover qua Menu 2. Chúng ta sử dụng thuộc tính display để làm ẩn các sub menu:

ul#menu li ul#sub {

display: none;

}

Kết quả:

#4. Hover qua thì làm xuất hiện Sub Menu

Để hover qua Menu thì các submenu xuất hiện ta sử dụng đoạn CSS

ul#menu li:hover ul#sub {

display: block;

}

Nhưng bạn sẽ thấy các submenu xuất hiện chiếm không gian và làm xê dịch các menu cha. Để tránh điều này ta phải để thuộc tính position của submenu là absolute, và menu cha là relative, code mẫu:

ul#menu li {

positon: relative;

} 

ul#menu li ul#sub {

display: none;

position: absolute;

width: 100px;

}

Cái width: 100px là tùy chọn, mục đích để submenu dàn theo hàng dọc, nếu không có, nó sẽ dàn theo hàng ngang, tùy theo độ lớn của submenu mà bạn điều chỉnh giá trị này sao cho phù hợp để đạt được kết quả vừa mắt.

Muốn submenu hiện ngay ngắn hàng lối với menu được hover ta thêm đoạn code:

ul#menu, ul#menu ul#sub {

    padding:0;

    margin: 0;

}

Tổng kết, đoạn code mẫu CSS

Dưới đây là tổng hợp tất cả các CSS ở trên, nó hiện đã đủ để làm menu xổ, dĩ nhiên để đẹp hơn bạn cần tự tinh chỉnh thêm CSS cho bản thân.

ul#menu, ul#menu ul#sub {

    padding:0;

    margin: 0;

}

ul#menu li {

     list-style-type: none;    /* code này để bỏ các dấu chấm tròn*/

     float: left;    /* code này để menu dàn hàng ngang*/

     margin-right: 10px;    /* tạo lề cho các menu*/

}

ul#menu li a {

text-decoration: none;

background-color: #900;

padding: 5px;

color: white;

}

ul#menu li {

positon: relative;

} 

ul#menu li ul#sub {

display: none;

position: absolute;

width: 100px;

}

ul#menu li ul#sub li {

margin-top: 10px;

margin-bottom: 5px;

}

ul#menu li:hover ul#sub {

display: block;

Cách dùng thuộc tính display trong CSS

Thuộc tính display trong css quy định cách hiển thị của một thẻ, có 3 cách hiển thị chính:

• inline: nghĩa là hiển thị trên cùng một dòng, chúng ta có thể kể tên các thẻ trong HTML là inline, bao gồm: thẻ b, thẻ i, thẻ a, thẻ span...
• block: hiển thị theo khối tách riêng nhau. Một số thẻ HTML là block như thẻ h1 đến h6, thẻ p, thẻ div...
• none: không hiển thị thẻ đó. Đoạn code của nó trong HTML mặc dù vẫn còn nhưng về mặt hiển thị là giống với việc đoạn code đó đã bị xóa đi, vị trí trong luồng trang cũng mất.

Nếu muốn bạn có thể dễ dàng chuyển một thẻ từ kiểu inline sang block và ngược lại, ví dụ:

Dòng này có 2 thẻ inline gồm thẻ a và thẻ span, bạn có thể thấy chúng đang trên cùng một dòng.

Dòng dưới đây cũng bao gồm 2 thẻ inline như trên nhưng vì tôi chuyển nó thành block nên kết quả sẽ như thế này:

Blog Mạng Lưới Toàn Cầu chuyên về HTML và CSS ngoài ra là các thủ thuật Blog khác.

Vậy là thay vì hiển thị trên cùng dòng, chúng đã bị ngắt ra thành các khối khác nhau.

Code mẫu:

a, span {
    display: block;
}

Tiếp theo chúng ta sẽ thực hành xem giá trị none sẽ làm thẻ biến mất đi như thế nào, chẳng hạn ta có 3 div theo thứ tự như sau:

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba

Giờ nếu tôi để giá trị display: none; cho hộp thứ hai (cụ thể là thẻ div) thì kết quả của nó sẽ như thế này:

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba

Như bạn đã thấy, hộp thứ hai đã biến mất, và hộp thứ ba được đẩy lên thế chỗ như là chưa từng có hộp thứ hai vậy.

Chúng ta làm ví dụ khác, lần này tôi sẽ làm biến mất chữ.

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này.

Kết quả:

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này

Code mẫu:

Giả dụ tôi sẽ làm biến mất đoạn <span style="color: blue; display: none;">màu xanh này</span>, trong khi vẫn giữ đoạn <span style="color: red;">màu đỏ này</span>

Có bạn hỏi tôi, nếu dùng visibility: hidden; cũng làm thẻ biến mất như là display: none; Vậy thì chúng giống và khác nhau như thế nào?

Tôi sẽ trả lời bằng ví dụ minh họa, vẫn dòng trên nhưng dùng visibility: hidden; sẽ cho cách hiển thị như này:

Giả dụ tôi sẽ làm biến mất đoạn màu xanh này, trong khi vẫn giữ đoạn màu đỏ này

Bạn đã thấy sự khác biệt?

Vâng, tôi nghĩ là bạn đã thấy, nếu dùng visibility: hidden; thẻ biến mất nhưng vị trí của nó vẫn còn, tức là nó để lại khoảng trống (cho người ở lại!) nhưng display: none; thì biến mất đồng thời cả vị trí cũng mất luôn.

Về mặt ứng dụng thực tế, thuộc tính display hay được dùng làm menu xổ, các hiệu ứng ẩn hiện khá đẹp mắt...

Ảnh minh họa: http://www.dreamstime.com/

Thuộc tính position trong CSS

Thuộc tính position dùng để lấy điểm mốc tham chiếu cho việc xác định vị trí của hộp thẻ. Có thể bạn quen với việc dùng float để tạo bố cục nhưng không thành thạo position là thiệt thòi lớn, vì ít nhất menu xổ, popup xuất hiện khi hover, hoặc menu cố định đều cần đến position.

Chúng ta bắt đầu với nghĩa tiếng Việt của position, nó có nghĩa là vị trí. Dưới đây là các giá trị của nó...

Định vị static

Đây là giá trị mặc định của các thẻ, theo đó chúng sẽ được sắp xếp theo thứ tự từ trên xuống dưới đúng như trong mã đánh dấu, ví dụ:

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba

Đây là hộp thứ tư

Code mẫu:

div {
position: static;
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; 
}

Trong các ví dụ tiếp theo, tôi sẽ lấy hộp thứ ba để điều chỉnh position của nó.

Định vị relative

Khi sử dụng relative, nó sẽ lấy điểm mốc của hộp là thẻ liền kề nhất với nó, bao gồm các thẻ bên trên, bên dưới và bao quanh:

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba

Đây là hộp thứ tư

Code mẫu:

div {
position: relative;
top: 15px;
left: 15px;
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; 
}

Định vị relative thường đi kèm với top và left, right, bottom để lấy vị trí. Bạn có thể thấy relative vẫn còn nằm trong luồng của trang tức là vẫn còn liên quan đến thẻ đứng trước nó.

Định vị absolute

Theo mặc định, định vị absolute sẽ lấy thẻ body làm mốc (điểm trên cùng bên trái) - nếu tôi bao bốn hộp này bằng một hộp cha lớn - và để hộp cha lớn là relative thì hộp thứ ba với định vị absolute sẽ lấy mốc là hộp cha lớn chứ không phải là body nữa. Ví dụ:

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba

Đây là hộp thứ tư

Code mẫu:

div { 
position: absolute;
top: 15px; 
left: 15px; 
border: 1px solid red; 
margin: 10px 0px 10px 0px; 
padding: 10px; }

Điểm mấu chốt cần nhớ là định vị absolute làm cho hộp không còn liên quan đến các hộp bên cạnh nữa mà lại lấy định vị là thẻ body (theo mặc định) hoặc thẻ cha (nếu để thẻ cha là relative)

Định vị fixed

Về cơ bản fixed cũng giống với absolute, chỉ khác là nếu absolute lấy mốc là thẻ body hoặc thẻ cha thì fixed lại lấy mốc là trình duyệt web. Các nút like, share trượt dọc hoặc top menu luôn luôn ở trên đầu trang web sử dụng fixed để cố định. Dù bạn cuộn lên cuộn xuống để xem web, bạn vẫn thấy chúng ở cùng vị trí....Bạn liếc sang góc trái phía trên cùng đi, sẽ thấy cái hộp thứ ba đang ở đây, cuộn thanh trượt dọc xem, nó sẽ di chuyển theo bạn.

Đây là hộp thứ nhất 

Đây là hộp thứ hai

Đây là hộp thứ ba - position: fixed

Đây là hộp thứ tư

Code mẫu:

div { 
position: fixed; 
left: 0%; 
top: 0%; 
border: 1px solid red; 
padding: 10px; }

Như vậy với relative, hộp vẫn còn trong luồng của trang, nhưng với absolute và fixed, hộp thoát khỏi luồng của trang và lấy mốc định vị khác hẳn.

Thuộc tính float điều chỉnh vị trí trong CSS

Thuộc tính float thường được dùng để điều chỉnh vị trí của ảnh trôi sang trái hoặc phải, khi đó text sẽ bao quanh ảnh. Ngoài ảnh thì float cũng hay được dùng trong bố cục để điều chỉnh layout của trang, ví dụ các cột bên phải được để là float: right để nó trôi về phía phải.

Giờ chúng ta sẽ đi vào các ví dụ cụ thể, đầu tiên khi không sử dụng float cho ảnh thì kết quả sẽ như thế này:

Bức ảnh ở trên không được float, bạn có thể thấy ảnh và chữ nằm trên 2 khu vực riêng biệt

Nếu sử dụng thuộc tính float cho ảnh, thì ảnh sẽ được trôi về một bên, còn chữ sẽ bao quanh nó, như ví dụ dưới đây:

Bức ảnh này được float: left; Kết quả là ảnh được trôi về bên trái và chữ được đẩy lên bao quanh ảnh. Nếu không để lề cho ảnh, chữ sẽ dính sát vào ảnh như bạn thấy.

Bức ảnh này được để float:right; Kết quả là ảnh được trôi về bên phải và chữ được đẩy lên, không như lần trước, cái này tôi để lề cho ảnh nên bạn sẽ không thấy chữ dính vào ảnh nữa.

Code mẫu:

img {
      float: right;
     margin-left: 10px;
}

Trong bố cục layout cho trang web như dưới đây:

Header

Left

Right

Footer

Theo đó các div có tên left được để float: left; còn div có tên right được để float: right;

Nếu một yếu tố được để là float thì các thẻ đứng đằng sau nó sẽ được nổi lên trên để bao quanh nhưng các thẻ ở trước đó thì không ảnh hưởng.

Các thông tin kỹ thuật

• Giá trị mặc định của float: none;
• Kế thừa tự động: không. Có nghĩa là nếu một thẻ được đặt float: left; thì các thẻ con cháu của nó không tự động có cùng thuộc tính như vậy.
• Phiên bản CSS: thuộc tính float có ngay từ CSS1
• Trình duyệt hỗ trợ: tất cả các trình duyệt phổ thông.

Các giá trị của thuộc tính

• left: làm cho thẻ trôi trái.
• right: làm cho thẻ trôi phải
• none: thẻ không được float, đây là giá trị mặc định.
• inherit: nếu giá trị này được dùng thẻ sẽ có giá trị float giống thẻ cha

Thuộc tính clear

Thuộc tính clear hay đi cùng float, khi bạn sử dụng thuộc tính này các thành phần bên dưới sẽ không được phép trôi lên bao quanh nữa. Ví dụ text sẽ trôi lên bao quanh ảnh được float, nhưng nếu clear thì text sẽ ở dưới ảnh.

Các giá trị của clear:

• left: ngăn không cho trôi trái
• right: ngăn không cho trôi phải
• both: ngăn không cho trôi sang cả trái và phải, thường thì ta để cái này để nó khỏi trôi lên cả 2 bên luôn.

Code mẫu:

img {

float: left;

clear: both;

}