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

Discussion in 'Lập trình web' started by phongnt.1999, Nov 10, 2018.

Tags:
  1. phongnt.1999

    phongnt.1999 New Member

    Joined:
    Sep 26, 2018
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    1
    Gender:
    Male
    Location:
    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: Nov 10, 2018

Share This Page