Trần Ngọc Minh Notes

Các thuộc tính (attributes)

Với phiên bản HTML cũ, người phát triển phải dùng một vài đoạn mã JavaScript nếu muốn hợp lệ hay ràng buộc dữ liệu người dùng nhập vào form. HTML5 cung cấp nhiều thuộc tính giúp quá trình này đơn giản hơn và không cần dùng JavaScript.

Thuộc tính required

Bắt buộc người dùng phải điền thông tin trước khi submit form, nếu người dùng không nhập thông và submit thì sẽ hiện một vài cảnh báo (trong Opera, FireFox, Chrome) như Please fill out this field hay You have to specify a value, v.v…. Thuộc tính required sử dụng cho các kiểu input sau: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file. Thuộc tính required yêu cầu hai giá trị là true hay false. Với giá trị true có thể viết required = “true” hay required.

Ví dụ:

<form action=" ">

Username: <input type="text" name="usrname"  required>

<input type="submit">

</form>

Khi để trống textbox và nhấn submit, kết quả >

Chúng ta có thể thể thêm một số cảnh báo đến người dùng bằng một vài khai báo CSS với các lớp ảo (pseudo classes) như :required, :valid, hay :invalid. Ví dụ:

<style>

input:required {

background:red;

}

input:focus:invalid {

background:blue;

}

input:focus:valid {

background:green;

}

</style>

<form action="action_page.php">

Username: <input type="text" name="usrname" required = true>

<input type="submit">

</form>

Khi người dùng chưa nhập thông tin:

Khi nhấp chuột trái vào textbox nhưng chưa nhập gì:

Và khi nhập thông tin:

Thuộc tính placeholder

Thuộc tính đưa ra một số gợi ý về thông tin phải nhập cho người dùng. Thuộc tính này áp dụng cho các input: text, search, url, tel, email, và password. Không hỗ trợ IE 9 và các phiên bản trước đó. Ví dụ:

<form action="action_page.php">

Website: <input type="text" name="site" placeholder="http://example.com"><br>

Email:   <input type="text" name="email" placeholder="abc@gmail.com"><br>

<input type="submit" value="Submit">

</form>

Kết quả >

Thuộc tính pattern

Thuộc tính pattern cung cấp một biểu thức thường quy (regular expression) hỗ trợ xác thực dữ liệu người dùng. Ví dụ chúng ta yêu cầu người dùng nhập mật khẩu phải có ít nhất 6 kí tự và không có khoảng trắng như đoạn mã HTML sau:

<form action="action_page.php">

<label for="password">Mật khẩu(ít nhất 6 kí tự, không có khoảng trắng):</label>

<input type="password" id="password" name="password" required pattern="\S{6,}">

<input type="submit">

</form>

Hiển thị trên trình duyệt >

Nếu nhấn Submit thì thuộc tính required sẽ có tác dụng như sau:

Nếu nhập mật khẩu ít hơn 6 kí tự hay có chứa khoảng trắng sẽ xuất hiện thông báo:

Thuộc tính pattern không được hỗ trợ trong IE 9 trở về trước và Safari.

Thuộc tính disabled

Vô hiệu hoá các phần tử input (không thể nhập dữ liệu hay không thể click chuột) trong trình duyệt. Những phần tử bị vô hiệu hoá thường có màu xám.

HTML5 hỗ trợ thuộc tính disabled cho fieldset và tất cả các phần tử của form được chứa trong fieldset.

Ví dụ:

<form action="">

First name:<br>

<input type="text" name="firstname" value ="John" disabled>

<br>

Last name:<br>

<input type="text" name="lastname">

</form>

Kết quả:

Có thể dùng lớp ảo (pseudo class) :disabled để hỗ trợ khai báo CSS cho thuộc tính disabled. Ví dụ trên khai báo thêm css như sau:

:disabled {background:red;}

Kết quả:

Thuộc tính readonly

Input với thuộc tính readonly chỉ có thể đọc và giá trị không thể thay đổi. Ví dụ:

<form action="">

Website:<br>

<input type="text" name="website" value ="ngocminhtran.com" readonly>

<br>

Email:<br>

<input type="text" name="email">

</form>

Kết quả:

Thuộc tính multiple

Cho phép người dùng nhập nhiều hơn một giá trị trong phần tử input. Trong các phiên bản HTML trước đó, multiple chỉ áp dụng cho phần tử select; trong HTML5, multiple có thể được áp dụng cho phần tử file và email của form. Ví dụ:

<p>Nhấp vào nút Choose Files có thể chọn nhiều tập tin ảnh cùng lúc.</p>

<form action=" ">

Select images: <input type="file" name="img" multiple>

<input type="submit">

</form>

Nhấn vào nút Choose Files và chọn nhiều file ảnh cùng lúc như sau:

Nhấp Open:

Thuộc tính không hỗ trợ trong IE9 và các phiên bản trước đó.

Thuộc tính form

Cho phép một hay nhiều phần tử input có thể kết hợp hay trở thành thành phần của một form nào đó trong trang. Giá trị của thuộc tính form là giá trị của thuộc tính id của form cần kết hợp. Ví dụ Last name tuy ở bên ngoài form1 nhưng vẫn là một phần của form1 nhờ thuộc tính form:

<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>

<input type="submit" value="Submit">

</form>

Last name: <input type="text" name="lname" form="form1">

Thuộc tính autocomplete

Cho phép chức năng autocomplete – là chức năng tự động hiện ra thông tin mà người dùng đã nhập trước đó. Mặc định là on và nếu muốn tắt chức năng này thì chuyển sang off, đặc biệt là các thông tin quan trọng như số tài khoản, mật khẩu, v.v… Ví dụ sau dùng chức năng autocomplete cho tất cả các input, ngoại trừ email:

<form action="action_page.php" autocomplete="on">

First name:<input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

<input type="submit">

</form>

Nhập dữ liệu lần thứ nhất và nhấn submit:

Nhập dữ liệu lần 2, chức năng autocomplete như sau:

Với E-mail tính năng autocomplete không hoạt động do chúng ta đã chuyển giá trị off:

Phần tử datalist và thuộc tính list

Thuộc tính list liên kết đến datalist, một phần tử chứa các tuỳ chọn được định nghĩa trước cho một phần tử input. Ví dụ:

<form action="" method="get">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

Kết quả:

Datalist không hỗ trợ IE9 và các phiên bản trước đó hay Safari.

Thuộc tính autofocus

Cho phép một input của form xuất hiện focus ngay khi trang hiển thị. Ví dụ:

<form action="">

First name:<input type="text" name="fname" autofocus><br>

Last name: <input type="text" name="lname"><br>

<input type="submit">

</form>

Kết quả: khi trang vừa tải xong

Các kiểu input mới trong HTML5

Bên cạnh các input đã có trong các phiên bản HTML trước đó như button, checkbox, text,…. HTML5 cung cấp thêm các input mới bao gồm: search, email, url, tel, datetime, date, month, week, time, datetime-local, number, range, color.

Search

Là một điều khiển để nhập văn bản tìm kiếm. Thoạt nhìn nó giống một input kiểu text, nhưng nó có khác biệt. Khác biệt chủ yếu để phân biệt input kiểu text và search là input kiểu search có định dạng giống với các ô tìm kiếm của hệ điều hành hay của trình duyệt, và nó có một biểu tượng x bên phải để xoá toàn bộ thông tin nhập trong ô tìm kiếm. Ví dụ dùng input kiểu search:

<form action="">

Search Google: <input type="search" name="googlesearch"><br>

<input type="submit">

</form>

Kết quả:

Email

Cho phép nhập nhiều địa chỉ email cùng lúc với thuộc tính multiple. Nếu chúng ta nhập địa chỉ email không đúng định dạng, cụ thể là thiếu dấu @, trình duyệt sẽ xuất hiện một thông báo lỗi. Ví dụ đoạn mã sau:

<form action="">

E-mail: <input type="email" name="usremail">

<input type="submit">

</form>

Kết quả: nhập sai định dạng:

Thêm thuộc tính multiple với giá trị true để có thể nhập nhiều email cùng lúc:

E-mail: <input type="email" name="usremail" multiple="true">

Email không đươc hỗ trợ trong IE 9 và các phiên bản trước đó hay Safari.

Url

Dùng để cung cấp một địa chỉ website. Nếu nhập không đúng định dạng một url – thường là thiếu dấu hai chấm (:), trình duyệt sẽ xuất hiện thông báo lỗi. Đoạn mã minh hoạ dùng input kiểu url như sau:

<form action="">

Add your homepage: <input type="url" name="homepage"><br>

<input type="submit">

</form>

Kết quả khi nhập không đúng định dạng:

 

Chúng ta có thể dùng url kết hợp với các thuộc tính placeholder hay pattern để quy định định dạng của dữ liệu.

Url  không được hỗ trợ trong IE 9 và các phiên bản trước đó hay Safari.

Tel

Dùng để cung cấp số điện thoại. Không có một định dạng chung nào vì phụ thuộc vào mỗi quốc gia sẽ có những định dạng khác nhau cho số điện thoại. Có thể dùng tel kết hợp với các thuộc tính pattern hay placeholder. Đoạn mã minh hoạ cách dùng tel:

<form action="">

Telephone: <input type="tel"><br>

<input type="submit">

</form>

Tel chỉ hỗ trợ trong Safari 8 và các phiên bản kế tiếp.

Number

Dùng để cung cấp dữ liệu dạng số. Kiểu input này thường có các mũi tên hướng lên và xuống ở bên phải giúp người dùng chọn các con số trong giới hạn được quy định bởi hai thuộc tính min (giá trị số nhỏ nhất) và max (giá trị số lớn nhất). Mặc định, khi nhấp mũi tên hướng lên giá trị số sẽ tăng lên 1 và mũi tên hướng xuống giá trị sẽ giảm 1. Ví dụ đoạn mã sau:

<form action="">

Quantity (between 1 and 5): <input type="number" min="1" max="5">

<input type="submit">

</form>

Kết quả

Chúng ta có thể dùng thuộc tính step để quyết định độ tăng giảm sau mỗi lần nhấp các dấu mũi tên. Ví dụ thay vì tăng/giảm 1, chúng ta sẽ cho phép mỗi lần tăng/ giảm 2 như sau:

<input type="number" min="1" max="5" step="2" >

Number không được hỗ trợ trong IE 9 và các phiên bản trước đó.

Range

Hiển thị một thanh trượt (slider bar) (phụ thuộc vào các trình duyệt như Chrome hay Safari mà hình dáng của thanh trượt có thể khác nhau) cho phép chọn một giá trị số bất kỳ trong một phạm vi cho phép. Giống number, range đi kèm với các thuộc tính min, max, và step; khác với number, range thích hợp cho những trường hợp không cần một giá trị số chính xác (như tỉ lệ chẳng hạn). Giá trị mặc định là vị trí giữa của thanh trượt (giữa min và max).

Đoạn mã minh hoạ cách dùng input kiểu range (trong Chrome):

<form action="" method="get">

Points:

<input type="range" name="points" min="0" max="10">

<input type="submit">

</form>

Kết quả:

Range không được hỗ trợ trong IE 9 và các phiên bản trước đó.

Color

Cung cấp cho người dùng một color picker để chọn một giá trị màu (hệ RGB) – là một số thập lục phân, ví dụ như #FF3300. Phụ thuộc vào trình duyệt, color picker sẽ xuất hiện khi người dùng nhấp chuột vào input color. Đoạn mã minh hoạ dùng color (trong Chrome) với giá trị mặc định là #FF0000 như sau:

<form action="">

Select your favorite color:

<input type="color" name="favcolor" value="#ff0000">

<input type="submit">

</form>

Kết quả:

Nhấp vào input color sẽ xuất hiện một color picker:

Color không được hỗ trợ trong IE 11 và các phiên bản trước đó hay Safari 9.1 và các phiên bản trước đó.

Date

Cho phép người dùng nhập dữ liệu thời gian ngày, tháng, và năm theo một định dạng cho trước (ví dụ mm/dd/yyyy). Tuỳ theo trình duyệt, khi nhấp chuột vào nút mũi tên hướng xuống bên phải của date, một date picker sẽ xuất hiện cho phép người dùng chọn giá trị phù hợp. Date cũng hỗ trợ lựa chọn từng giá trị (ngày, tháng, hay năm) và có biểu tượng x giống kiểu number. Minh hoạ dùng date (trong Chrome) như sau:

<form action="">

Birthday:

<input type="date" name="bday">

<input type="submit">

</form>

Kết quả:

Hiển thị date picker:

Chúng ta cũng có thể thiết lập ràng buộc về thời gian hiển thị như ví dụ minh hoạ dưới đây:

<form action="">

Nhập trước ngày 01-01-1980:<br>

<input type="date" name="bday" max="1979-12-31"><br><br>

Nhập sau ngày 01-01-2000:<br>

<input type="date" name="bday" min="2000-01-02"><br><br>

<input type="submit">

</form>

Date không được hỗ trợ trong IE 11 và các phiên bản trước đó hay Firefox.

Month

Cho phép người dùng nhập dữ liệu thời gian chỉ gồm tháng và năm theo một định dạng cho trước. Giống date, month cho cũng hỗ trợ date picker, lựa chọn giá trị, hay biểu tượng x. Minh hoạ dùng month:

<form action="action_page.php">

Birthday (month and year):

<input type="month" name="bdaymonth">

<input type="submit">

</form>

Kết quả:

Month không được hỗ trợ trong IE 11 và các phiên bản trước đó hay Firefox.

Week

Cho phép người dùng chọn tuần và năm theo định dạng cho trước. Giống date, week cho cũng hỗ trợ date picker, lựa chọn giá trị, hay biểu tượng x. Minh hoạ dùng week:

<form action="action_page.php">

Select a week:

<input type="week" name="year_week">

<input type="submit">

</form>

Kết quả:

Week không được hỗ trợ trong IE 11 và các phiên bản trước đó hay Firefox.

Time

Cho phép người dùng chọn thời gian giờ, phút trong một ngày theo định dạng cho trước (ví dụ 10:00 PM). Hỗ trợ tính năng chọn giá trị, biểu tượng x để xoá giá trị và tuỳ vào trình duyệt sẽ hỗ trợ time picker. Minh hoạ dùng Time (trong Chrome không hỗ trợ time picker):

<form action="">

Select a time:

<input type="time" name="usr_time">

<input type="submit">

</form>

Kết quả:

Time không được hỗ trợ trong IE 12 và các phiên bản trước đó hay Firefox.

Datetime, Datetime-local

Cho phép người dùng chọn thời gian bao gồm cả ngày và giờ theo một định dạng cho trước. Giờ và ngày cách nhau bởi chữ “T”. Chữ T cho máy tìm kiếm biết bắt đầu giờ. Giờ giấc thường theo múi giờ (time zone) UTC và thể hiện bằng chữ Z cuối cùng. Có thể thể hiện sự chênh lệch múi giờ giữa các vùng miền (time zone offset) bằng cách kết hợp dấu + hay -. Ví dụ vào lúc 10 giờ 11 phút sáng ngày 10 tháng 1 năm 2017 sẽ thể hiện như sau:  2017-01-10T10:11Z – 5:00 (trừ 5 giờ theo chuẩn EST).

Datetime và datetime-local là như nhau, ngoại trừ datetime-local không dùng time zone (hay múi giờ). Nếu dùng datetime-local thì thời gian ở ví dụ trên sẽ được biểu diễn là: 2017-01-10T10:11.

Đôi khi một số trình duyệt sẽ không dùng datetime mà dùng datetime-local (tìm hiểu thêm thông tin tại http://stackoverflow.com/questions/21263515/why-is-html5-input-type-datetime-removed-from-browsers-already-supporting-it và https://www.w3.org/TR/html5/infrastructure.html#dates-and-times).

Minh hoạ dùng datetime-local:

<form action="">

Birthday (date and time):

<input type="datetime-local" name="bdaytime">

<input type="submit" value="Send">

</form>

Kết quả:

Một vài phần tử mới cho form trong HTML5

Các phần tử mới cho form trong HTML5 gồm: output, keygen, progress, và meter. Progress và meter đã đề cập ở trên.

Output

Dùng để hiển thị kết quả của một quá trình tính toán. Kết quả sẽ được hiển thị giữa cặp <output> và </output>. Output có thuộc tính for dùng để tham chiếu đến thuộc tính id của các phần tử chứa giá trị tham gia tính toán – một phần của giá trị kết quả sẽ hiển thị trong output. Khi chúng ta nhấn submit, tên (trong thuộc tính name) và giá trị (trong thuộc tính value) của output sẽ được gửi đi cùng với form. Minh hoạ dùng output qua đoạn mã sau:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0

<input type="range" id="a" value="50">100

+<input type="number" id="b" value="50">

=<output name="x" for="a b"></output>

</form>

Kết quả: khi nhấp chuột vào range để chọn giá trị

Output không được hỗ trợ trong IE hay Edge (một trình duyệt mới cho windows 10).

Keygen

Phát sinh cặp khoá riêng tư – công khai (private – public keypair) cho form. Khi nhấn submit, khoá riêng tư (private key) được lưu lại và khoá công khai (public key) được gửi đến server. Keygen hiển thị trên trình duyệt như một menu sổ xuống gồm hai tuỳ chọn (cho đến thời điểm này) là 1024 (Medium Grade) và 2048 (High Grade) quy định chiều dài cho các khoá. Keygen cũng có hai thuộc tính là challenge xác dịnh một chuỗi kèm theo khoá công khai gửi đến server và thuộc tính keytype xác định kiểu khoá được phát sinh (như RSA – một thuật toán dùng trong mã hoá). Đoạn mã minh hoạ dùng keygen:

<form action="demo_keygen.asp" method="get">

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security">

<input type="submit">

</form>

Kết quả:

Keygen không được hỗ trợ trong IE.

Các thay đổi cho các phần tử trong form đã tồn tại

Form

• Có sự hỗ trợ hợp lệ (validation) đến các phần tử của form, như emai hay url. Các thuộc tính như pattern hay required cũng rất hiệu quả trong hợp lệ dữ liệu. Nếu chúng ta muốn tắt chức năng hợp lệ dữ liệu của các phần tử, có thể dùng thuộc tính novalidate với các giá trị là true hay false kèm theo.
• Trong HTML5, thuộc tính action của form có thể không định nghĩa (trình duyệt sẽ hiểu là trang hiện tại).
• Thuộc tính autocomplete có thể được thêm trực tiếp đến form (sẽ ảnh hưởng đến tất cả các phần tử trong form).

Optgroup

Trong HTML5, optgroup có thể lồng nhau.

Textarea

Trong HTML4, chúng ta được yêu cầu phải xác định kích cỡ của textarea thông qua các thuộc tính cols và rows. Trong HTML5 thì không cần thiết; có thể định nghĩa kích cỡ cho textarea trong CSS.

Một số thuộc tính mới được thêm vào textarea như bảng dưới đây:

Thuộc tính	Giá trị
autofocus	autofocus
dirname	textareaname.dir
form	form_id
maxlength	number
placeholder	text
required	required
wrap	hard/soft

 

(có thể tham khảo chi tiết cách sử dụng và ý nghĩa các thuộc tính trên tại http://www.w3schools.com/tags/tag_textarea.asp).

Học HTML & CSS >