[back] [index]

Form, List và một mớ ḅng bong ;-)


 Form
Khi vào một trang contact, bạn thường thấy một form như sau:

Tên bạn:
Địa chỉ E-Mail:
Giới tính: nữ nam
Bạn thích: xem TV đọc sách
Bạn đến từ:
Bạn nói tiếng:
Lời nhắn nhủ:
 

Dùng form này, bạn có thể ghi vào sổ lưu bút, gửi ư kiến tới người chủ website... Để có được form như trên, bạn phải viết HTML Code sau:
 
<form method="post" action="mailto:webmaster@DOTHANHLONG.ORG">

Tên bạn: <input type="text" size="30" name="ten">

E-Mail: <input type="text" size="30" name="e-mail">

Giới tính:<input type="radio" value="f" name="sex" checked> nữ <input type="radio" value="m" name="sex"> nam

Bạn thích:<input type="checkbox" value="Xem TV" name="TV"> xem TV <input type="checkbox" value="Doc sach" name="Book"> đọc sách

Bạn đến từ: <select name="land"><option value="VN">Vietnam <option value="USA"> USA <option value="De"> Germany</select>

Bạn nói tiếng:
<select name="language" size="2"><option value="Viet">Viet <option value="Engl"> Anh <option value="Deutsch"> Duc</select>

Lời nhắn nhủ: <textarea cols="10" rows="3" name="tin">Viết vào đây</textarea>

<input type="submit" value="send">
<input type="reset" value="clear">
</form>
  • Cặp TAG <form></form> khai báo với browser một form, giữa cặp TAG này là các (cặp) TAG khác của form.
     
  • Một form có 2 phương thức (method): postget, ở ví dụ này ta đề cập đến phương thức post.

  •  
  • <action=""> quyết định cho hành động của form khi nút send được nhấn. Trong ví dụ này là gửi e-mail tới địa chỉ webmaster@DOTHANHLONG.ORG

  •  
  • <input type = "text" name="ten" size="30"> tạo ra một control cho phép bạn nhập tên vào form. Control này có tên là "ten", kích cỡ là "30". Tên và kích cỡ bạn có thể tuỳ chọn.
     
  • <input type = "text" name="thu" size="30"> tạo ra một control cho phép bạn nhập e-mail vào form. Control này có tên là "e-mail", kích cỡ là "30". Tên và kích cỡ bạn có thể tuỳ chọn.
     
  • <input type="radio" value="f" name="sex" checked> nữ và <input type="radio" value="m" name="sex"> nam: cho phép bạn chọn giới tính. Trong control thứ nhất, bạn thấy chữ checked và đồng thời ở form, giới tính nữ cũng được chọn sẵn.
     
  • <select name="land"><option value="VN">Vietnam <option value="USA"> USA <option value="De"> Germany</select> cho phép bạn chọn nước từ một list có sẵn.
     
  • <select name="language" size="2"><option value="Viet">Viet <option value="Engl"> Anh <option value="Deutsch"> Duc</select> cho phép bạn chọn tiếng từ một list có sẵn nhưng ở đây size="2" có nghĩa là list này có 2 ḍng (bạn thấy cả Viet và Anh)
     
  • <textarea cols="10" rows="3" name="tin">viết vào đây</textarea> tạo ra một control cho phép bạn viết cả một đoạn text dài với nhiều ḍng. rowscols cho phép bạn định kích cỡ của control. Đây là một cặp TAG mà ở giữa chúng bạn có thể viết sẵn Text.
     
  • <input type="submit" value="send"> tạo ra một nút mang tên "send". Nếu gơ vào nút này, tất cả các thông tin của form được gửi đi.
     
  • <input type="reset" value="clear"> tạo ra một nút mang tên "clear" với tác dụng chuyển form về trạng thái ban đầu.

 



 Listing (odered & unodered list)
Nếu đang quen sử dụng Word, chắc bạn sẽ hỏi, làm thế nào để tạo được một danh sách có thứ tự (numbering - 1, 2, 3, 4 ....) hoặc có các dấu chấm tṛn (bullets) ở đầu từng ḍng như dưới đây (danh sách mua đồ ăn bà xă viết và tính cách của bả psssst...):
 
Numbering Bullets
  1. Mua rau tươi nhà bà Tám béo
  2. Qua chợ Mơ mua chả ở quầy chị Hảo vẩu cho rẻ
  3. 4 lạng thịt băm trên chợ Cầu Giấy
  4. 1 con gà làm sẵn ở chợ Vĩnh Hồ
  • Ra vẻ thích ăn đồ đắt tiền (disc)
  • Nhưng thực ra lại rất ki bo (disc)
  • Không thương chồng (disc)
  • Lười như hủi ;-) (square)

Rất đơn giản, bạn chỉ cần biết đến một số TAG sau: <ol></ol> (ordered list) <ul></ul> (unordered list) <li> (list) và những thuộc tính của các TAG đó: type="disc", type="square", type="circle". Hai Lists trên được viết bằng HTML Code sau, bạn xem sẽ hiểu ngay:

<ol>
<li>
Mua rau t&#432;&#417;i nhà bà Tám béo</li>
<li>
Qua ch&#7907; M&#417; mua ch&#7843; &#7903; qu&#7847;y ch&#7883; H&#7843;o v&#7849;u cho r&#7867;</li>
<li>
4 l&#7841;ng th&#7883;t b&#259;m trên ch&#7907; C&#7847;u Gi&#7845;y</li>
<li>
1 con gà làm s&#7861;n &#7903; ch&#7907; V&#297;nh H&#7891;</li>
</ol>
</font>
</td>

<td width="50%" valign="top">
<font size="2" face="verdana, arial, tahoma">
<ul type="circle">
<li>
Ra v&#7867; thích &#259;n &#273;&#7891; &#273;&#7855;t ti&#7873;n</li>
<li>
Nh&#432;ng th&#7921;c ra l&#7841;i r&#7845;t ki bo</li>
<li type="disc">
Không th&#432;&#417;ng ch&#7891;ng</li>
<li type="square">
L&#432;&#7901;i nh&#432; h&#7911;i ;-)</li>
</ul>

 

List bên trái (danh sách mua đồ) chắc không cần giải thích v́ <ol> nghĩa là ordered list (có thứ tự 1, 2, 3...). List bên phải (tính cách vợ) là unodered và type của <ul> circle nên ở tất cả các đầu ḍng đều được tự động đặt một c̣ng tṛn (rỗng). Riêng ḍng dưới, do <li> type disc square nên đầu ḍng thứ 3 là một chấm đen, đầu ḍng thứ 4 lại là một h́nh vuông đen.



[index]