SlideShare una empresa de Scribd logo
1 de 18
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




                             Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 2 of 18
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
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

      METHOD




                             Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 5 of 18
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
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
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
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
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
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
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
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
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
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
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>
        <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
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

Más contenido relacionado

Similar a Session 04 Final Sua

Session 05 Final
Session 05 FinalSession 05 Final
Session 05 FinalSamQuiDaiBo
 
Session 01 Final
Session 01 FinalSession 01 Final
Session 01 FinalSamQuiDaiBo
 
Bai tap java_script-html-2016
Bai tap java_script-html-2016Bai tap java_script-html-2016
Bai tap java_script-html-2016viethoang89
 
Session 06 Final
Session 06 FinalSession 06 Final
Session 06 FinalSamQuiDaiBo
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1Cà Rốt
 
Tài liệu seo onpage
Tài liệu seo onpageTài liệu seo onpage
Tài liệu seo onpageGiang Triệu
 
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoBài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoMasterCode.vn
 
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...MasterCode.vn
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnNhóc Nhóc
 
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can banXuân Nam
 
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can banToilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can banHải Finiks Huỳnh
 
Dịch vụ giúp việc nhà theo giờ chuyên nghiệp
Dịch vụ giúp việc nhà theo giờ chuyên nghiệpDịch vụ giúp việc nhà theo giờ chuyên nghiệp
Dịch vụ giúp việc nhà theo giờ chuyên nghiệpThe Trip
 

Similar a Session 04 Final Sua (20)

Session 05 Final
Session 05 FinalSession 05 Final
Session 05 Final
 
Session 01 Final
Session 01 FinalSession 01 Final
Session 01 Final
 
Graffiti CMS
Graffiti CMSGraffiti CMS
Graffiti CMS
 
Bai tap java_script-html-2016
Bai tap java_script-html-2016Bai tap java_script-html-2016
Bai tap java_script-html-2016
 
Session 06 Final
Session 06 FinalSession 06 Final
Session 06 Final
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Java script
Java scriptJava script
Java script
 
Asp control
Asp controlAsp control
Asp control
 
Tài liệu seo onpage
Tài liệu seo onpageTài liệu seo onpage
Tài liệu seo onpage
 
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theoBài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
Bài 1: Làm quen với ASP.NET - Giáo trình FPT - Có ví dụ kèm theo
 
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...
 
Slide5
Slide5Slide5
Slide5
 
Lập trình web - HTML cơ bản
Lập trình web - HTML cơ bảnLập trình web - HTML cơ bản
Lập trình web - HTML cơ bản
 
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban
 
[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban[Kienthuc.name.vn]html can ban
[Kienthuc.name.vn]html can ban
 
05 web course form
05 web course   form05 web course   form
05 web course form
 
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can banToilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
Toilaquantri.blogspot.com - Giao trinh html thiet ke website can ban
 
Bai tap php_m123
Bai tap php_m123Bai tap php_m123
Bai tap php_m123
 
Giáo trình asp.net với c sharp
Giáo trình asp.net với c sharpGiáo trình asp.net với c sharp
Giáo trình asp.net với c sharp
 
Dịch vụ giúp việc nhà theo giờ chuyên nghiệp
Dịch vụ giúp việc nhà theo giờ chuyên nghiệpDịch vụ giúp việc nhà theo giờ chuyên nghiệp
Dịch vụ giúp việc nhà theo giờ chuyên nghiệp
 

Más de SamQuiDaiBo (20)

Test
TestTest
Test
 
T3
T3T3
T3
 
T2
T2T2
T2
 
Bai Tap Thuc Hanh Javascript
Bai Tap Thuc Hanh JavascriptBai Tap Thuc Hanh Javascript
Bai Tap Thuc Hanh Javascript
 
Hangman Game
Hangman GameHangman Game
Hangman Game
 
Session 08 Final
Session 08 FinalSession 08 Final
Session 08 Final
 
Session 02 Final
Session 02 FinalSession 02 Final
Session 02 Final
 
Html overview
Html overviewHtml overview
Html overview
 
Ittlgc2
Ittlgc2Ittlgc2
Ittlgc2
 
Ittlgc3
Ittlgc3Ittlgc3
Ittlgc3
 
Ittlgc1
Ittlgc1Ittlgc1
Ittlgc1
 
Ittlgc
IttlgcIttlgc
Ittlgc
 
Baitap C
Baitap CBaitap C
Baitap C
 
Epc Assigment2
Epc Assigment2Epc Assigment2
Epc Assigment2
 
Epc Assignment1
Epc Assignment1Epc Assignment1
Epc Assignment1
 
Epc Assignment1 Vn
Epc Assignment1 VnEpc Assignment1 Vn
Epc Assignment1 Vn
 
Epc Assignment2 Vn
Epc Assignment2 VnEpc Assignment2 Vn
Epc Assignment2 Vn
 
Epc Assignment4 Vn
Epc Assignment4 VnEpc Assignment4 Vn
Epc Assignment4 Vn
 
Epc Assignment6 Vn
Epc Assignment6 VnEpc Assignment6 Vn
Epc Assignment6 Vn
 
Test1
Test1Test1
Test1
 

Session 04 Final Sua

  • 1. Sử dụng biểu mẫu và khung Chương 4
  • 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. 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. Ví dụ một biểu mẫu Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 4 of 18
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Kết quả Web Page Programming with HTML,DHTML & JavaScript/Session 4/ 16 of 18
  • 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. 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