Học Làm Web

Tự học thiết kế trang web từng bước từng bước một – bài 15 +16

Bài trước chúng ta đã học về cách tạo form nhập liệu trên trang. Bài này ta sẽ hoàn thiện một form bằng một ví dụ cụ thể để phân tích cụ thể:

Ồ, đến nay thì phát hiện ra một điều quan trọng mà chưa từng nói cho bạn biết: bạn có thể viết những ghi chú trong trang web của bạn mà nó sẽ không hiện ra màn hình khi người ta xem trang web. Bạn sẽ thấy ở ví dụ:

MÃ: CHỌN TẤT CẢ
<!-- dòng sau chính là dòng giúp trình duyệt hiển thị đúng tiếng Việt Unicode -->

Để tạo ghi chú, bạn đặt dòng ghi chú vào giữa cặp (như dòng mã trên bạn vừa thấy)
<!– và –>

Đoạn mã bên dưới có 2 dòng ghi chú đấy, bạn quan sát nhé, khi hiển thị trang nó sẽ không hiện đâu. Những ghi chú là cần thiết để có thể dễ dàng hiểu được ý đồ trang web một khi chúng ta cần xem lại, nhưng chúng ta đừng lạm dụng bạ đâu ghi chú đấy nhé, làm như vậy trang web sẽ nạp rất chậm chạp vì chứa nhiều mỡ thừa.

MÃ: CHỌN TẤT CẢ
<html>
<head>
<!-- dòng sau chính là dòng giúp trình duyệt hiển thị đúng tiếng Việt Unicode -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tự học làm web với Khoan Cắt Bê Tông</title>
</head>
<body>
<!-- phần bên dưới thiết lập một form nhập liệu -->
<form name="lienhe" action="lienhe.php" method="post">
Họ và tên: <input type="text" name="hoten" size="30" maxlength="30" /><br />
Giới tính: <input type="radio" name="gioitinh" /> Nam &nbsp; &nbsp;
<input type="radio" name="gioitinh" /> Nữ<br /><br />
Địa chỉ: <input type="text" name="diachi" size="50" maxlength="50" /><br />
Tự giới thiệu:<br /><textarea name="gioithieu" rows="7" cols="20"></textarea><br /><br />
<input type="submit" value="Gửi thông tin" />  &nbsp; &nbsp; <input type="reset" value="Xóa form" />
</form>
</body>
</html>

Kết quả của “tác phẩm” trên như sau:

Hình ảnh

Bạn thử gõ vào form họ tên của bạn, chọn giới tính, viết phần tự giới thiệu và rồi thử bấm nút Gửi thông tin xem nó thế nào nhé. Tương tự, bạn cũng bấm nút Xóa form để xem nó sẽ làm gì?

Bạn thấy nó còn rất thô sơ đúng không nào? Con đường chúng ta còn dài lắm. Chúng ta sẽ hoàn thiện dần để có một trang web cũng tạm gọi là như thiên hạ. Bạn có sự kiên nhẫn và cứ thực hành theo, Khoan Cắt Bê Tông sẽ dần dần hỗ trợ bạn để có một trang web hoàn chỉnh, đúng chuẩn.

Ở bài 15 vừa qua, chúng ta đã học xong việc thiết kế form cho nhập liệu trên trang web ở những bước căn bản nhất. Bài này chúng ta sẽ nâng cao thêm một chút về kỹ năng làm việc với form, những điểm cần lưu ý, các lỗi thường mắc phải,…

Giờ thì bạn thiết lập một form như sau:

MÃ: CHỌN TẤT CẢ
<form name="myform" action="xuly.php" method="post">
<p>Họ đệm: <input type="text" name="hodem" maxlength="23" size="23" /></p>
<p>Tên: <input type="text" name="" maxlength="8" size="8" /></p>
<p>Giới tính:</p>
<blockquote>
<input type="radio" name="gioitinh" value="bimat" /> Không xác định<br />
<input type="radio" name="gioitinh" value="nu" /> Nữ<br />
<input type="radio" name="gioitinh" value="nam" /> Nam<br />
</blockquote>
<p>Sở thích:</p>
<blockquote>
<input type="checkbox" name="sothich" value="muasam" /> Mua sắm<br />
<input type="checkbox" name="sothich" value="amnhac" /> Âm nhạc<br />
<input type="checkbox" name="sothich" value="hoihoa" /> Hội họa<br />
<input type="checkbox" name="sothich" value="dulich" /> Du lịch<br />
<input type="checkbox" name="sothich" value="docsach" /> Đọc sách<br />
<input type="checkbox" name="sothich" value="thethao" /> Thể thao<br />
</blockquote>
</form>

Kết quả sẽ là:

Hình ảnh

Như vậy, với ví dụ trên thì chúng ta luôn luôn ghi nhớ:

– Nút chọn dạng radio thì khi chọn, người ta chỉ có thể chọn 1 trong một nhóm, đã chọn nút này, nút khác sẽ mất tác dụng.
– Nút chọn dạng checkbox thì ta có thể chọn một vài hoặc tất cả các nút chọn trong một nhóm nút.
– Để các nút trở thành một nhóm thì thuộc tính name của chúng có cùng giá trị. Ở ví dụ trên làname=”gioitinh” cho radio và name=”sothich” cho checkbox.

Khảo sát ví dụ bên dưới:

Hình ảnh

Với ví dụ này, có 2 nhóm checkbox, vì thế, nếu bạn muốn biết được người ta chọn những lựa chọn nào trong số các boxes (hộp) thì đặt tên cho các nút từ 1-5 ở hàng một là cùng tên nhóm, chẳng hạn nhưname=”box” và các nút từ 1-4 hàng 2 là name=”hat”. Nếu quên điều này, ta chỉ đặt tên chung làname=”boxhat” cho tất cả các nút thì lúc này tình duyệt web sẽ hiểu là ta có một nhóm duy nhất mà thôi.

<< Quay Lại – Tiếp Theo>>

%d bloggers like this: