HTML Form

HTML Form

HIML Form

thangld@uit.edu.vn Khoa Mang may tinh va Truyén thong

Đại học Công nghệ Thông tin

mẻ

Tao Form

= Méi HTML Form duoc tao lập bằng cặp

the <FORM>, </FORM>

= Thé Form can 2 thuéc tinh bat budédc

a

Form Fields

= Cac field duoc định nghĩa trong cap the

<FORM> tạo nên nội dung của Form

= Cac field duoc định nghĩa bằng các thẻ

# Có nhiêu loại field có thê đặt vào form:

Text fields: text, password, textarea

Radio buttons

Checkboxes

Buttons: submit, reset va button thong thuong Hidden field

Input Fields

" Có nhiều loại field cho phép người dùng

nhập dữ liệu dạng chuôi ký tự

= Cac field nay duoc tao lap sw dung the

<INPUT> voi thuéc tinh TYPE cu thé khac

nhau

# Thuộc tinh TYPE co thé la: TEXT,

PASSWORD, HIDDEN, FILE,

= Moi thé INPUT phải có thuộc tính NAME

"

TEXT Fields

= TEXT la loai INPUT field thong dung

Cho phép người dùng nhập vào 1 dòng văn bản

VALUE=“John Henry”>

a

Submission Buttons

# Nút nhân submit dữ liệu trên form là một loại

INPUT field

# Khi người dùng nhân nút submit trén form,

browser sẽ gửi toàn bộ nội dung của các

field trên form đên server sử dụng hai thuộc

tính METHOD và ACTION của form

<INPUT TYPE=“SUBMIT VALUE=“Press me”>

' /ẢANNHNNDH.Q

Reset Buttons

# Nút nhân RESET dùng đề xóa toàn bộ nội

dung của các field trên form và đưa chúng

vê trạng thái ban đâu

<INPUT TYPE=RESET VALUE=“Clear form’”>

<INPUT TYPE=TEXT NAME=“Name”><BR>

Your Age: <INPUT TYPE=TEXT NAME="Age”"><BR>

<INPUT TYPE=SUBMIT VALUE=‘“Submit”>

<INPUT TYPE=RESET VALUE=“Clear”>

</FORM>

SS 8#3}}§

Tables va Forms

" Table thường được sử dụng đề trình bày

các field trên form đẹp mắt hơn

m ï |

Checkboxes

# Môi checkbox có một tên và một giá trị và

có thê thiệt lập trạng thái ban đầu là

selected / deselected

Vị dụ

<INPUT TYPE=checkbox name=sports value=1>

<INPUT TYPE=checkbox name=movies value=l1>

m

Multiline Text

= Str dung the <TEXTAREA> dé tao vung

soạn thảo cho phép người dùng nhập

nhiều dòng văn bản

" Mỗi thẻ <TEXTAREA> có các thuộc tính cols, rows, và name

<TEXTAREA name=address rows=5 cols=40>

đữ-liệu-khởi-tạo (hoặc để trông)

</TEXTAREA>

m

Submit form

# Khi người dùng nhân vào nút submit trên

form:

Browser sử dụng các thuộc tính ACTION và

METHOD đề tạo ra một yêu câu

Một query string được hình thành ứng với môi

field trén form (tén=gia-tri)

Query string dwoc encode theo kiéu URL-

encode

a

Submit form

# Môi checkbox được chọn sẽ có một cặp

(tên=giá-trị) được tạo ra và gửi đên server

Nêu checkbox không được chọn dữ liệu

liên quan đên checkbox đó không được gửi

di

= Voi nhom các radio button, chỉ có một cặp

(tên=giá-trj) được gửi đên server

mm

Các loại field khác

# <SFELECT>: dropdown menu/combo-box hay list-box

# Nút nhân bình thường: input field với thuộc

tinh TYPE co gia tri BUTTON

' /ẢANNHNNDH.Q

Hidden Fields

# Không hiền thị ở browser

# (tên=giá-trj) được gửi đên server theo

request từ browser như các field khác

<INPUT TYPE=HIDDEN

NAME=SECRET VALUE=AGENT>

m

Hidden Fields

= Hidden fields khéng phải là an toàn (bảo

mật)

Người dùng có thê xem source code của trang

web và có thê đọc được thông tin này

# Nêu form sử dụng phương thức GET,

thông tin trên hidden fields cũng được hiên

thị trên URI