HTML5 XP session 10 tạo form HTML T5

Bài 06:
Tạo Form HTML
NexTGen Web
© Aptech Ltd.
2
HTML5/HTML Forms
Mục tiêu

Mô tả HTML5 forms

Giải thích về các control input mới trong HTML5

Giải thích một số thuộc tính mới trong HTML5

Giải thích các phần tử mới trong HTML5
© Aptech Ltd.
Web form của HTML5 là khu vực trong trang web có chứa các
phần tử đặc biệt thường được gọi là các điều
khiển(control).
Các điều khiển này là check box, radio button, và text box
cung cấp một giao diện trực quan để người dùng tương tác
với chúng.
Người sử dụng cung cấp dữ liệu thông qua các điều khiển và
được gửi đến máy chủ để xử lý tiếp.
Việc tạo các form trong HTML5 được thực hiện dễ dàng hơn
cho các nhà phát triển Web bởi việc chuẩn hóa chúng bằng
các điều khiển form phong phú.
Nó cũng cung cấp việc kiểm tra dữ liệu hợp lệ ngay phía
client, chúng được xử lý một cách bản địa(natively) bởi các
trình duyệt.
Điều này làm giảm thời gian tải của trang và cũng loại bỏ

sự cần phải đưa vào trang các mã JavaScript lặp đi lặp lại.
Ngay cả sự hiện diện trực quan của form cũng được cải thiện
khi hiển thị trên các thiết bị khác nhau, chẳng hạn như
iPhone, ipad, màn hình cảm ứng, và các trình duyệt.
3
HTML5/HTML Forms
Giới thiệu về Form của HTML5
© Aptech Ltd.
4
Introduction to the HTML5 / Session 2
Giới thiệu về Form của HTML5
© Aptech Ltd.
Những thay đổi mới trong HTML5 forms:
Các phần tử form mới
Các kiểu input mới
Các thuộc tính mới
Kiểm tra tính hợp lệ dựa trên trình duyệt
Công nghệ CSS3
Forms API
5
HTML5/HTML Forms
Những tính năng mới trong HTML5 Forms

Web Form HTML5 mang lại những cải tiến lớn
liên quan đến việc tạo biểu mẫu cho các nhà
phát triển Web và cho người dùng tương tác với
chúng.
© Aptech Ltd.
6
HTML5/HTML Forms

Các phần tử mới

HTML5 đã giới thiệu một loạt các phần tử mới, chúng mở rộng các
lựa chọn cho một số phần tử liên quan đến input trên form.

Bảng sau liệt kê các phần tử mới trong HTML5.
Kiểu dữ liệu Mô tả
progress
Đại diện cho tiến trình hoàn thành một nhiệm vụ trên trang
meter
Đại diện cho một quy mô phạm vi được biết đến
datalist
Đại diện cho một tập hợp các tùy chọn sử dụng với danh
sách thuộc tính để làm một điều khiển dropdown-list
output
Đại diện cho kết quả của một phép tính
© Aptech Ltd.
7
HTML5/HTML Forms
Các loại input mới 1-2

Phần tử input là một trường dữ liệu cho phép người dùng soạn thảo
dữ liệu trên form.

Nó có một thuộc tính type điều khiển đặc điểm và kiểu dữ liệu và của
các phần tử đầu vào.

Bảng dưới đây liệt kê các loại input mới được hỗ trợ bởi HTML5.
Loại Mô tả
email

Cho phép nhập dữ liệu kiểu email
search
Cho nhập dữ liệu tìm kiếm
url
Cho nhập dữ liệu kiểu url
tel
Cho nhập dữ liệu kiểu sđt
number
Cho nhập dữ liệu kiểu số
© Aptech Ltd.
8
HTML5/HTML Forms
Các loại input mới 2-2
Loại Mô tả
range
Đại diện cho một giá trị số được lựa chọn từ một loạt các con số
date
Biểu diển một điều khiển cho phép nhập giá trị dạng date
week
Biểu diển một điều khiển cho phép nhập giá trị dạng year-week
month
Biểu diển một điều khiển cho phép nhập giá trị ở dạng year-month
time
Biểu diễn một điều khiển để nhập giá trị ở dạng hour và minute
datetime
Biểu diển một điều khiển cho phép nhập giá trị thời gian đầy đủ
gồm ngày giờ và timezone(giờ khu vực)
datetime-
local
Biểu diển một điều khiển cho phép nhập và hiển thị thời gian đầy

đủ gồm ngày giờ nhưng không có timezone
color
Biểu diễn cho một điều khiển hiển thị hộp thoại chọn màu sắc
© Aptech Ltd.
9
HTML5/HTML Forms
Một số thuộc tính mới

HTML5 đã giới thiệu một số thuộc tính mới có thể được sử
dụng với phần tử input form. Thuộc tính giúp các phần tử
thực hiện nhiệm vụ của mình.

Bảng sau liệt kê các thuộc tính mới trong HTML5.
Loại
Mô tả
placeholder
Đại diện cho một gợi ý giúp người dùng nhập dữ liệu chính
xác trong trường này
required
Bắt buộc phải nhập dữ liệu đầu vào
multiple
Cho phép nhập nhiều giá trị vào trong một phần tử
autofocus
Đặt tiêu điểm vào phần tử khi trang được tải
pattern
Biểu diễn cho một biểu thức quy tắc để kiểm tra hợp lệ giá trị
nhập vào
form
Cho phép các phần tử tham chiếu đến form chứa nó bởi tên
© Aptech Ltd.

10
Introduction to the HTML5 / Session 2
Một số thuộc tính mới
Thuộc tính Palcehoder
Thuộc tính required
© Aptech Ltd.
HTML4 hỗ trợ việc sử dụng các JavaScript tùy ý hoặc thư
viện để thực hiện việc kiểm tra dữ liệu hợp lệ trên các
trình duyệt phía client.
Các kiểm tra hợp lệ đảm bảo rằng các điều khiển input kiểm
tra dữ liệu đầu vào trước khi biểu mẫu được gửi đến máy
chủ để xử lý tiếp.
Các thuộc tính mới trong HTML5, chẳng hạn như required và
pattern có thể được sử dụng với các điều khiển input để
thực hiện việc kiểm tra đầu vào.
Điều này giúp các nhà phát triển Web giảm bớt việc phải
viết mã JavaScript để thực hiện công việc kiểm tra hợp lệ
phía client trong các trang web.
HTML5 cũng cung cấp kỹ thuật kiểm tra tiên tiến có thể được
sử dụng với JavaScript để thiết lập quy tắc kiểm tra hợp lệ
tùy ý mình và thông báo cho các phần tử input.
11
HTML5/HTML Forms
Kiểm tra hợp lệ dựa vào trình duyệt
© Aptech Ltd.
12
HTML5/HTML Forms
Các công nghệ styling CSS 1-2

Nhà phát triển Web có thể tăng cường các phần tử của

form với các bộ chọn pseudo-class, như là:required,
:valid, và :invalid.

Các trường input mà không thể được bỏ trống trong khi
submit có thể được hiển thị với một style bằng cách sử
dụng CSS.

Ví dụ.
<style>
input:required
{
outline: 1px red solid;
color: green ;
}
input:required:valid
{
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}
© Aptech Ltd.
13
HTML5/HTML Forms
Các công nghệ styling CSS 2-2
input:required:invalid
{
background-size:10px 10px;
background-position: right top;
background-repeat: no-repeat;
}

</style>
</head>
<body>
<form method="get" action="try.php">
Name: <input type="text" name="name" required="true" /><br/>
Email: <input type="email" name="emailid" required="true" />
<input type="submit" value="submit" />
</form>
………
© Aptech Ltd.
14
HTML5/HTML Forms
Forms API

HTML5 đã giới thiệu JavaScript API cho các form để tùy
biến các kiểm tra hợp lệ và xử lý thực hiện trên form.

Forms API mới cung cấp nhiều phương thức, các sự kiện, và
các thuộc tính mới để thực hiện việc kiểm tra các trường
hoặc tính toán phức tạp.

Bảng sau liệt kê các sự kiện và phương thức:
Sự kiện và Phương thức Mô tả
setCustomValidity(message)
Thiết lập nội dung thông báo lỗi tùy ý được hiển
thị khi form được gửi(subbmit) bởi người dùng
checkValidity()
Kiểm tra tính hợp lệ địa chỉ email được nhập bởi
người dùng.
oninvalid()

Sự kiện xảy ra khi dữ liệu nhập vào không hợp
lệ
onforminput()
Sự kiện xảy ra khi dữ liệu được nhập trên form.
onformchange()
Sự kiện xảy ra khi dữ liệu trên form thay đổi
© Aptech Ltd.
15
HTML5/HTML Forms
Sử dụng các kiểu input mới

Thuộc tính type của phần tử input sẽ xác định kiểu điều
khiển nhập nào sẽ được hiển thị trên trình duyệt của người
dùng.

Mặc đinh kiểu đầu vào là type="text".

Form đăng ký trong bài này sử dụng các kiểu điều khiển
đầu vào sau :

text

label

radio

textarea

checkbox


submit

HTML5 đã giới thiệu nhiều phần tử giao diện người dùng
cho từng dữ liệu cụ thể.
© Aptech Ltd.
16
HTML5/HTML Forms
Địa chỉ E-mail

Ví dụ
<form method="get" action="test.html">
<label for="emailid">Email:</label>
<input type="email" value=""
id="emailid"
name="emailaddress"
maxlength="255" />
<input type="submit" value="submit"/>
</form>
© Aptech Ltd.
17
HTML5/HTML Forms
URL

Ví dụ
<label for="url">Enter your Web page
address:</label>
<input type="url" value=""
id="urlname" name="urltext"
maxlength="255" />
<input type="submit" value="submit"/>

© Aptech Ltd.
18
HTML5/HTML Forms
Telephone Number

Ví dụ
<label for="telno">Telephone
Number:</label>
<input type="tel" value="" id="telno"
name="telephone_no"
maxlength="10" />
© Aptech Ltd.
19
HTML5/HTML Forms
Number

Ví dụ
<label for="stud_age">Age:</label>
<input type="number" value="15" id="stud_age"
name="studentage" min="15" max="45" step="1" />
<input type="submit" value="submit"/>
© Aptech Ltd.
20
HTML5/HTML Forms
Range

Ví dụ
<label>Survey for packages offered[scale:
1-10]:</label>
<input type="range" name="rating" min="1"

max="10" />
<input type="submit" value="submit"/>
© Aptech Ltd.
21
HTML5/HTML Forms
Date và Time 1-6

Date
<label for="stdate">Date:</label>
<input type="date" id="stdate"
name="startdate"
min="2000-01-01"/>
<input type="submit" value="Submit"
id="btnSubmit"></input>
© Aptech Ltd.
22
HTML5/HTML Forms
Date và Time 2-6

Month
<label for="stmonth">Month:</label>
<input type="month" id="stmonth"
name="startmonth" />
<input type="submit" value="submit"/>
© Aptech Ltd.
23
HTML5/HTML Forms
Date và Time 3-6

Week

<label>Week:</label>
<input type="week" name="week" />
<input type="submit" value="submit"/>
© Aptech Ltd.
24
HTML5/HTML Forms
Date và Time 4-6

Time
<label>Time:</label>
<input type="time" name="time" />
<input type="submit" value="submit"/>
© Aptech Ltd.
25
HTML5/HTML Forms
Date và Time 5-6

Datetime
<label for="mydatetime">Date-
Time:</label>
<input type="datetime"
name="mydatetime" />
<input type="submit" value="submit"/>