Bài giảng Lập trình Web - Bài 3: Layout-Form

12/30/2016

Layout - Form

Nội dung

• Cấu trúc trang Web HTML5

• Form HTML5

12/30/2016

ĐTTH

2

1

12/30/2016

Ví dụ

<nav>

<aside>

12/30/2016

ĐTTH

4

2

12/30/2016

HTML5

• Cấu trúc HTML5 được chia theo ngữ cảnh (semantic) của

trang web

<Header>: phần tiêu đề trang

<Nav>: thanh Menu thể hiện các liên kết

<Section>: nội dung

<aticle>: nội dung chứa trong section

<Aside>: nội dung độc lập Section

<Footer>: Phần cuối trang

12/30/2016

ĐTTH

5

Ví dụ 1

<nav>

12/30/2016

ĐTTH

6

3

12/30/2016

ĐTTH

7

12/30/2016

ĐTTH

8

4

12/30/2016

ĐTTH

9

12/30/2016

ĐTTH

10

5

12/30/2016

Ví dụ 2

<nav>

12/30/2016

ĐTTH

11

12/30/2016

ĐTTH

12

6

12/30/2016

Ví dụ 3 - Demo

<nav>

<aside>

Form

Text

Selection List

Radio

Check box

File select

Submit, Reset

Textarea

12/30/2016

ĐTTH

14

7

12/30/2016

•GIỚI THIỆU FORM

Form được sử dụng khi cần:

Thu thập thông tin tên, địa chỉ, số điện thoại, email,

…để đăng ký cho người dùng vào một dich vụ hoặc

một sự kiện

Tập hợp thông tin để mua hàng

Thu thập thông tin phản hồi về một Website

Cung cấp công cụ tìm kiếm trên website

12/30/2016

15

ĐTTH

<html>

<body>

. . .

Nội dung các phần tử của Form

</form>

. . .

</body>

</html>

12/30/2016

16

ĐTTH

8

12/30/2016

Trong đó:

 id: tên của form, xác định duy nhất.

 action: chuyển đến file action khi sự kiện trên form

được thực thi

12/30/2016

ĐTTH

17

CÁC PHẦN TỬ CỦA FORM

•Phần tử <Input>

•Phần tử <Select> [Dropdown list]

•Phần tử <textarea>

•Phần tử <button>

•Phần tử <datalist>

•Phần tử <keygen> [***]

•Phần tử <output>[***]

12/30/2016

ĐTTH

18

9

12/30/2016

Phần tử Input

• Input type: text

Nhập dữ liệu dạng text và numbergiá trị là dạng text

• Cú pháp:

<Input Type=”Text” Value=”Value” Name=”name”

Size=n Maxlength=m readonly disabled>

• Name : định danh [txtten/txtpass/…]

• Value: Dữ liệu ban đầu trong textbox

• Size: chiều rộng của textbox (số ký tự: 20)

• Maxlength: số ký tự tối đa có thể nhập vào text box

12/30/2016

ĐTTH

19

• Readonly: không cho thay đổi dữ liệu

• Disabled: khóa không thực thi textbox

12/30/2016

ĐTTH

20

10

12/30/2016

Phần tử Input

• Input type: password

Nhập dữ liệu dạng text và numbergiá trị là dạng text mã

hóa ****

• Cú pháp:

<Input Type=”Password” Value=”Value”

Name=”name” Size=n Maxlength=m readonly

disable>

• Name : định danh [txtten/txtpass/…]

• Value: Dữ liệu ban đầu trong textbox

• Size: chiều rộng của textbox (số ký tự: 20)

• Maxlength: số ký tự tối đa có thể nhập vào text box

12/30/2016

ĐTTH

21

• Readonly: không cho thay đổi dữ liệu

• Disable: khóa không thực thi textbox

12/30/2016

ĐTTH

22

11

12/30/2016

Phần tử Input

• Input type: submit

Nút bấm cho phép người dùng thực hiện action trên

form

12/30/2016

ĐTTH

23

Phần tử Input

Input type: Radio

Dùng để chọn một và chỉ một tùy chọn trong danh sách

các tùy chọn có sẵn

• Cú pháp:

<input type="radio" name="name"

value="Value" checked>Nhãn

• Name: định danh

• Value: giá trị nhận được khi radio button được chọn

• Checked: radio button được chọn mặc định

12/30/2016

ĐTTH

24

12

12/30/2016

Phần tử Input

• Input type: checkbox

Dùng để chọn một hoặc nhiều tùy chọn trong danh sách các tùy

chọn có sẵn

<Input Type=”Checkbox” Name=”Name”

Value=”Value” Checked> Nhãn

• Name: định danh của checkbox

• Value: giá trị nhận được khi radio button được chọn

• Checked: thuộc tính để hộp checkbox được chọn

mặc định hoặc không

12/30/2016

ĐTTH

25

12/30/2016

ĐTTH

26

13

12/30/2016

Phần tử Input

• File upload:

12/30/2016

ĐTTH

27

Phần tử Input

• Input type: Button

Nút bấm thông thường

<Input Type=”button” Name=”Name”

Value=”Value” name_event=“function”>

• Name: định danh của button

• Value: Chuỗi text hiển thị trên button

• Name_event: sự kiện xảy ra khi người dùng thực

thi button theo function

12/30/2016

ĐTTH

28

14

12/30/2016

Phần tử Input mới HTML5

Phần tử Input mới của HTML5 được thể hiện bằng

chính các chức năng hay dữ liệu tương ứng cho người

dùng:



• Color

• Date *

• Search

• Tel

• Email *

• Month

• Time

• url

• Number *

• Range

• week

12/30/2016

ĐTTH

29

Các thuộc tính mới phần tử Input

HTML5

• Input HTML5 vẫn có các thuộc tính HTML4

• Min = “giá trị”

• Max = “giá trị”

• Autofocus

• Placeholder=“Chuỗi text”

• Required

• Step=“giá trị”

12/30/2016

ĐTTH

30

15

12/30/2016

Phần tử Input mới HTML5

• Number

12/30/2016

ĐTTH

31

Phần tử Input mới HTML5

• Email

12/30/2016

ĐTTH

32

16

12/30/2016

Phần tử Input mới HTML5



Date

12/30/2016

ĐTTH

33

Phần tử <Select> [Dropdown list]

• Chứa danh sách các tùy chọn cho phép user chọn 1 trong

danh sách tùy chọn

• Cú pháp:

<Option Value=”Value”>Option1</option>

<Option Value=”Value”>Option2</option>

. . .

</Select>

12/30/2016

ĐTTH

34

17

12/30/2016

Các thuộc tính

• Name: tên Selection

• Size: là chiều cao của menu tính bằng hàng chữ

• Multiple: là thuộc tính cho phép chọn nhiều đề mục (listbox)

• Selected: đề mục được chọn mặc định

• Value: xác định dữ liệu gởi cho server nếu đề mục được

chọn

12/30/2016

ĐTTH

35

12/30/2016

ĐTTH

36

18

12/30/2016

Phần tử <textarea>

• Cho phép nhập nhiều dòng

Default text

</Textarea>

12/30/2016

ĐTTH

37

•TextArea: Cho phép người dung nhập nhiều dòng

•Cú pháp:

<TextArea Name=”name” Rows=n Cols=m

Wrap>

Default text

</Textarea>

12/30/2016

38

ĐTTH

19

12/30/2016

•Các thuộc tính

•Rows: số dòng có thể nhập vào TextArea

(mặc định là 4)

•Cols: độ rộng của textarea (tính bằng số ký

tự, mặc định là 40)

•Wrap: các dòng chữ tự động dàn ra trong lề

của vùng text area, Value: virtual, physical

12/30/2016

39

ĐTTH

Các thành phần form mới HTML5

• <datalist>: sự kết hợp input text và data list

12/30/2016

ĐTTH

40

20