[Lab 02] - Cách tạo một Form với HTML

phongnt.1999

Internship/Fresher
Sep 26, 2018
7
0
1
24
vn

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>
    #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
 
Last edited:

About us

  • Securityzone.vn là một trang web chuyên về an ninh mạng và công nghệ thông tin. Trang web này cung cấp các bài viết, tin tức, video, diễn đàn và các dịch vụ liên quan đến lĩnh vực này. Securityzone.vn là một trong những cộng đồng IT lớn và uy tín tại Việt Nam, thu hút nhiều người quan tâm và tham gia. Securityzone.vn cũng là nơi để các chuyên gia, nhà nghiên cứu, sinh viên và người yêu thích an ninh mạng có thể trao đổi, học hỏi và chia sẻ kiến thức, kinh nghiệm và giải pháp về các vấn đề bảo mật trong thời đại số.

Quick Navigation

User Menu