Sử dụng biểu mẫu và khung

        Chương 4
Mục tiêu
   Sử dụng biểu mẫu và các phần tử nhập
    thông thường trong HTML
   Sử dụng khung




            ...
Giới thiệu biểu mẫu
   Sử dụng biểu mẫu
       Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail
        và ...
Ví dụ một biểu mẫu




               Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 4 of 18
Sử dụng biểu mẫu
   Phần tử FORM
     <FORM> … </FORM>
   Các thuộc tính của FORM
      ACCEPT

      ACTION...
Thuộc tính các phần tử nhập
HTML
   Phần tử INPUT
      TYPE

      NAME

      VALUE

      SIZE

      MAX...
Input – Các kiểu TYPE
     TEXT [ Default ]
     CHECKBOX
     RADIO
     SUBMIT
     RESET
     IMAGE
     BUTTO...
Các phần tử nhập khác -1
   Phần tử TextArea
      cols

      rows

      Size

      type

      Value

  ...
Các phần tử nhập khác -2
   Phần tử SELECT
      Name

      size

      Multiple

   Phần tử LABEL




    ...
Tạo biểu mẫu
   Điều khiển các phần tử
     Thiết lập tiêu điểm

     Thứ tự Tab

     Phím truy nhập (...
Khung
   Khung chia một cửa sổ trình duyệt thành nhiều
    vùng riêng biệt, mà mỗi vùng có thể hiển thị
 ...
Sử dụng khung
   Hiển thị một biểu tượng (logo) hoặc thông tin
    tĩnh trên một vị trị cố định trên trang ...
Phần tử FRAMESET
   Khung được tạo ra bằng cách sử
    dụng thẻ FRAMESET
   Các thuộc tính bao gồm :
     ...
Phần tử FRAME
   Các thuộc tính của FRAME bao gồm :
      name

      src

      noresize

      scrolling

      ...
Khung lồng
<HTML>
  <HEAD>
      <TITLE>Nested Frames</TITLE>
  </HEAD>
  <FRAMESET cols="33%, 33%, 34%">
      <FRAME sr...
Kết quả




            Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 16 of 18
Phần tử NOFRAMES
<HTML>
   <FRAMESET COLS=”40%,60%”>
        <FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes>
    ...
Khung trên dòng (IFRAME )
   Thuộc tính
      Name

      Width

      Height




                   Web Page Progra...
Upcoming SlideShare
Loading in …5
×

Session 04 Final Sua

661 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
661
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Session 04 Final Sua

  1. 1. Sử dụng biểu mẫu và khung Chương 4
  2. 2. Mục tiêu  Sử dụng biểu mẫu và các phần tử nhập thông thường trong HTML  Sử dụng khung Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 2 of 18
  3. 3. Giới thiệu biểu mẫu  Sử dụng biểu mẫu  Thu thập tên, địa chỉ, số điện thoại, địa chỉ e-mail và các thông tin khác để người dùng đăng ký vào một dịch vụ nào đó  Tập hợp thông tin dùng để đăng ký mua một mặt hàng nào đó, ví dụ, khi muốn mua một cuốn sách trên Internet, ta phải điền tên, địa chỉ gửi thư qua bưu điện, phương thức thanh toán và các thông tin liên quan... Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 3 of 18
  4. 4. Ví dụ một biểu mẫu Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 4 of 18
  5. 5. Sử dụng biểu mẫu  Phần tử FORM <FORM> … </FORM>  Các thuộc tính của FORM  ACCEPT  ACTION  METHOD Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 5 of 18
  6. 6. Thuộc tính các phần tử nhập HTML  Phần tử INPUT  TYPE  NAME  VALUE  SIZE  MAXLENGTH  CHECKED  SRC Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 6 of 18
  7. 7. Input – Các kiểu TYPE  TEXT [ Default ]  CHECKBOX  RADIO  SUBMIT  RESET  IMAGE  BUTTON Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 7 of 18
  8. 8. Các phần tử nhập khác -1  Phần tử TextArea  cols  rows  Size  type  Value  Phần tử BUTTON  name  value  type Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 8 of 18
  9. 9. Các phần tử nhập khác -2  Phần tử SELECT  Name  size  Multiple  Phần tử LABEL Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 9 of 18
  10. 10. Tạo biểu mẫu  Điều khiển các phần tử  Thiết lập tiêu điểm  Thứ tự Tab  Phím truy nhập (phím tắt)  Vô hiệu hóa phần tử Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 10 of 18
  11. 11. Khung  Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt, mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn được  Ví dụ, ta có thể sử dụng ba khung trong trang Web, một làm biểu ngữ (banner), một làm menu điều hướng và một để hiển thị dữ liệu Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 11 of 18
  12. 12. Sử dụng khung  Hiển thị một biểu tượng (logo) hoặc thông tin tĩnh trên một vị trị cố định trên trang Web  Người dùng có thể kích vào và di chuyển quanh web site mà không cần phải liên tục quay lại trang nội dung  Nhiều cách hiển thị (Multiple views) Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 12 of 18
  13. 13. Phần tử FRAMESET  Khung được tạo ra bằng cách sử dụng thẻ FRAMESET  Các thuộc tính bao gồm :  Rows  Cols Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 13 of 18
  14. 14. Phần tử FRAME  Các thuộc tính của FRAME bao gồm :  name  src  noresize  scrolling  frameborder  marginwidth  marginheight Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 14 of 18
  15. 15. Khung lồng <HTML> <HEAD> <TITLE>Nested Frames</TITLE> </HEAD> <FRAMESET cols="33%, 33%, 34%"> <FRAME src = "flowers.jpg"> <FRAMESET rows="40%, 50%"> <FRAME src = "x.html"> <FRAME src = "y.html"> </FRAMESET> <FRAME src = "flowers.jpg"> </FRAMESET> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 15 of 18
  16. 16. Kết quả Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 16 of 18
  17. 17. Phần tử NOFRAMES <HTML> <FRAMESET COLS=”40%,60%”> <FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes> <FRAMESET ROWS=”60,*”> <FRAME SRC=”x.html” NAME=”x” SCROLLING=no FRAMEBORDER=no> <FRAME SRC=”y.html” NAME=”y”> <NOFRAMES> Frames are not being displayed. Click here <A href=”main.htm”>for a non-frames version</A> </NOFRAMES> </FRAMESET> </FRAMESET> </HTML> Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 17 of 18
  18. 18. Khung trên dòng (IFRAME )  Thuộc tính  Name  Width  Height Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 18 of 18

×