[Lab 02]

phongnt.1999

New Member

Form – cách tạo một form




Định Nghĩa:

Form dùng để tạo các biểu mẫu thu thập thông tin của người xem trang web.


Cách tạo một Forrm:



Trong giao diện của Dreamweaver chọn Insert > Form > Form.

Tiếp tục chọn Insert > Table. Trong cửu sổ hiện ra ta điền đầy đủ thông tin và tùy chỉnh theo nhu cầu sử dụng của mình. Tạo table


Tại các hàng bên trái ta them các thông tin này vào: Họ tên, Tên đăng nhập, Mật khẩu, Gõ lại mật khẩu, Phái, Ngoại ngữ, Nghề nghiệp, Hình ảnh, Sở thích. Phần cột bên trái ta tiến hành tạo form như sau:

  • Hàng 1: Insert > Form > Text. Lưu ý: xóa hết những phàn thừa chỉ để lại ô nhập dữ liệu.

  • Hàng 2: Insert > Form > Text.

  • Hàng 3: Insert > Form > Password.

  • Hàng 4: Insert > Form > Password.

  • Hàng 5: Insert > Form > Radio Group.

  • Hàng 6: Insert > Form > Checkbox Group.

  • Hàng 7: Insert > Form > Select.

  • Hàng 8: Insert > Form > File.

  • Hàng 9: Insert > Form > Text Area.

  • Hàng 10: Insert > Form > Submit Button.
Insert > Form > Reset Button.​

Dưới đây là kiểu định dạng cho hàng 1, 2, 3, 4, 8, 9, 10.

 Thêm tên và ID cho các đối tượng


Các hàng còn lại ta làm như sau:

 Thêm tên và ID cho các đối tượng


Sau đó ta tiến hành nhúng CSS để định dạng lại cho Form:
Code:
<style>[/INDENT]
    #form1 { border:solid 5px #0000FF; width:600px; color:#093; margin:auto; }
.txt { background-color:#999; border:solid 2px #FF6633; width:450px}
#submit,#reset { color:#F33; background-color:#060; border:#000 solid 3px; height: 36px}
#form1 tr:nth-child(odd) { background-color:#CCC}
#form1 tr:nth-child(even) { background-color: #DD9C53}
    </style>
Thẻ 'tr:nth-child' dùng để định đạng những đối tượng có cùng một tính chất, ở đây là định dạng màu nền (background-color) cho tag <tr> thuộc tag form1 (#form1) với odd- "số lẻ" định dạng cho các tag <tr> có số thứ tự lẻ, even- "số chẵn" định dạng cho các tag <tr> có số thứ tự chẵn.
Thêm class="txt" vào các mục form đã chèn vào bảng của hàng 1, 2, 3, 4, 7, 8, 9.
Khi hoàn thành nhấn F12 để chạy thử Form, đây là sản phẩm khi hoàn thành.

 Mẫu Form khoàn thiện
 
Top