Thẻ form trong HTML

Thẻ form là một trong những thẻ quan trọng nhất trong HTML, giữ vai trò tương tác giữa người dùng và trang web. Các thao tác trao đổi nội dung như đăng nhập, đăng ký, bình luận đều thông qua form và các thành phần khác liên quan.

Code mẫu

<form action="#" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Kết quả:

Họ tên:
Quê quán:

Trình duyệt hỗ trợ

Thẻ form được tất cả các trình duyệt thông dụng hỗ trợ, trong đó có Chrome, FireFox, Opera, Safari và IE.

Các thành phần trong form

• Thẻ dùng nhiều nhất trong form là thẻ input, có rất nhiều input type khác nhau, bạn có thể tham khảo thêm bài 9 thẻ input hay dùng và bài dùng các input mới để tạo form trong HTML5
• Thẻ textarea chuyên dùng để nhập dữ liệu văn bản dài
• Thẻ select, radio button và checkbox để tạo các chọn lựa
• Thẻ fieldset dùng để nhóm các trường liên quan đến nhau trong form
• Thẻ label để đặt tên cho các trường

Các thuộc tính

2 thuộc tính quan trọng hàng đầu trong form là action và method

Thuộc tính action

<form action="xuly.php" method="get">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính action dùng để xác định địa chỉ trang web mà những dữ liệu được nhập vào được gửi đến và xử lý, tùy vào ngôn ngữ lập trình web mà bạn có thể thấy đuôi file là php hoặc asp - Đoạn code ở form trên có nghĩa là thông tin về họ tên và quê quán được gửi tới file xuly.php

Thuộc tính method

<form action="xuly.php" method="post">
Họ tên: <input type="text" name="hoten"><br />
Quê quán: <input type="text" name="quequan"><br />
<input type="submit" value="Submit">
</form>

Thuộc tính method dùng để xác định cách thức dữ liệu được đẩy lên. Có 2 giá trị cho method:

• get: dữ liệu sẽ được đưa lên và nhìn thấy được qua URL (và bạn sẽ thấy cặp tên=giá trị được gắn vào địa chỉ web), vì URL có chiều dài tối đa khoảng 3000 ký tự nên phương thức này không dành để gửi dữ liệu lớn. Ngoài ra vì dữ liệu đầu vào hiện trên URL nên phương thức này cũng không thích hợp với dữ liệu nhạy cảm - thí dụ như password. Tất nhiên ở phía ngược lại nó hợp với dữ liệu không nhạy cảm, chẳng hạn như các truy vấn tìm kiếm.
• post: không giới hạn dung lượng dữ liệu, thích hợp với dữ liệu nhạy cảm, password chắc chắn phải dùng phương thức post.

Xử lý form

• Vấn đề đầu tiên của form là chuẩn hóa dữ liệu, bạn có thể dùng HTML5 hoặc/và cách truyền thống là dùng JavaScript để chuẩn hóa.
• Vấn đề thứ hai là xử lý form bằng ngôn ngữ lập trình web. Trước đây tôi có viết bài xử lý form ngay tại trang trong PHP có thể hữu ích cho bạn.

Thuộc tính placeholder của thẻ input

Thuộc tính placeholder là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của placeholder là cung cấp thêm thông tin cho người dùng, giúp họ biết cần nhập dữ liệu gì.
Code mẫu:

<form action="#">
<label>Họ tên:<input type="text" name="hoten" placeholder="Điền đầy đủ họ tên"></label>
<label>Quê quán:<input type="text" name="quequan" placeholder="Quê trong Chứng Minh Thư"></label>
<input type="submit" value="Gửi">
</form>

Kết quả:

Họ tên:
Quê quán:

Khi người dùng bắt đầu nhập liệu, thông tin gợi ý sẽ biến mất.

Trình duyệt hỗ trợ

Được hầu hết các trình duyệt hỗ trợ trong đó có: Internet Explorer 10, Firefox, Opera, Chrome và Safari. Chú ý là IE 9 và các phiên bản sớm hơn không được hỗ trợ.

Những thẻ input type dùng placeholder

Gồm các input type sau: text, search, url, tel, email và password.

Thuộc tính required của thẻ input

Thuộc tính required là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit). Dĩ nhiên thao tác này đỡ cho chúng ta khá nhiều code JavaScript.
Code mẫu:

<form action="#">

   <label>Họ tên:<input type="text"  name="hoten" required></label>

   <input type="submit" value="Gửi">

</form>

Kết quả:

Họ tên:

Giờ bạn không điền gì vào trường Họ tên, rồi nhấn nút Gửi thử xem, bạn sẽ nhận được thông báo kiểu như "Vui lòng điền vào trường này"

Trình duyệt hỗ trợ

Thuộc tính required được Internet Explorer 10, Firefox, Opera và Chrome hỗ trợ, đáng tiếc hiện Safari chưa đưa tính năng này vào. Nhưng tôi nghĩ sớm muộn gì Safari cũng cập nhật, vì những thuộc tính mới của input rất hữu ích với người thiết kế và người dùng.

Những thẻ input type dùng requried

Các input sau đây dùng thuộc tính requried: text, checkbox, radio, email, password, search, url, tel, date pickers, number,  file.

Cách dùng

Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit.

Có sự khác biệt giữa XHTML và HTML. Vì XHTML không cho phép rút gọn thuộc tính cho nên với XHTML chúng ta phải viết đầy đủ như sau: <input required="required" />

Cách dùng thẻ input để làm Form trong HTML5

Email:

Làm Form trong HTML5 đơn giản hơn nhiều HTML thường, lý do nằm ở chỗ bạn không cần dùng Javascript để Validate (bắt lỗi dữ liệu) các trường nữa. Tất nhiên điều này không tuyệt đối, một số cái vẫn phải dùng Javascript, nhưng gì thì gì, chơi với HTML5, code mà bạn phải gõ sẽ ít hơn nhiều lần. Hiện trình duyệt Google Chrome hỗ trợ tốt nhất các thẻ input mới, do vậy tôi khuyên bạn nên dùng anh bạn này để xem các ví dụ trong bài viết.

Tôi sẽ bắt đầu luôn với thẻ input mà bạn thường xuyên phải bắt lỗi, đó là email. Nếu HTML thường bạn sẽ phải viết code JS khá dài thì với HTML5, bạn chỉ cần ghi: <input type="email">. Giờ bạn thử gõ một đoạn không phải email chuẩn rồi nhấn Gửi xem điều gì xẩy ra. Thẻ email được hỗ trợ tốt trên đa số trình duyệt, ngoại trừ Safari.

Email:

Đoạn code mẫu cho form trên là:

<form action="#">
Email: <input name="email" type="email" />
 <input type="submit" />
</form>

Bạn cũng còn nhớ, một yêu cầu khác mà chúng ta thường phải làm với Form, đó là không cho phép người dùng bỏ trống dữ liệu. Code JS cho điều này rất đơn giản, nhưng HTML5 còn đơn giản hơn! Bạn chỉ cần thêm thuộc tính required vào, cụ thể: <input type="email" required>

Email:

Bạn để trống và nhấn nút Gửi (submit) xem sao.

Như vậy, HTML5 không chỉ thêm các thẻ mới, nó còn thêm các thuộc tính mới nữa mà required ở trên là ví dụ.

Thuộc tính mới tiếp theo cũng rất hay dùng đó là placeholder, đây là đoạn văn bản trong thẻ input để nhắc người dùng nên nhập cái gì, ví dụ dòng chữ nhạt màu "Bạn nhập họ tên vào đây" được tạo bằng placeholder:

Họ tên:

Code mẫu:

<form action="#">
Họ tên: <input name="name" placeholder="Bạn nhập họ tên vào đây" required="" type="text" />
<input type="submit" />
</form>

Sau đây là các kiểu input mới khác trong HTML5...

Thẻ color - chọn màu

Chọn màu cho bạn:

Code mẫu:

<form action="#">
  Chọn màu cho bạn: <input type="color" name="mausac"><br>
  <input type="submit">
</form>

Hiện chỉ có Chrome và Opera hỗ trợ thẻ màu.

Thẻ number - số má

Nhập giá trị từ 1 đến 10:

Code mẫu:

<form action="#">
  Nhập giá trị từ 1 đến 10: <input type="number" name="quantity" min="1" max="10">
  <input type="submit">
</form>

Với thẻ number bạn buộc phải nhập số, thẻ number bổ sung thêm các thuộc tính giá trị nhỏ nhất min, giá trị lớn nhất max. Ngoài ra còn cả thuộc tính step - bước nhảy. Hiện thẻ number chưa được hỗ trợ trên FireFox.

Thẻ day - ngày tháng năm

Ngày sinh:

Code mẫu:

<form action="#">
  Ngày sinh: <input type="date" name="ngaysinh">
  <input type="submit">
</form>

Thẻ day sẽ giúp bạn nhanh chóng lấy ngày tháng năm cụ thể và dĩ nhiên bạn cũng không cần code để validate nữa, vì với thẻ này người dùng chỉ có thể nhập ngày tháng năm vào mà thôi.

Thẻ URL - thêm địa chỉ website

Địa chỉ web:

Code mẫu:

<form action="#">
  Địa chỉ web: <input type="url" name="page"><br>
  <input type="submit">
</form>

Thẻ này đa số các trình duyệt hỗ trợ, chỉ Safari là chưa. Yêu cầu nhập địa chỉ trang web phải có cả http://

Code nhúng video trong HTML5

HTML5 cho phép chúng ta nhúng video vào trang web rồi xem trực tiếp trên trình duyệt mà không cần phải sử dụng plugin của bên thứ ba như Adobe Flash Player. Hôm nay Blog Mạng Lưới Toàn Cầu sẽ cùng bạn xem code nhúng này cụ thể như thế nào.

Code mẫu:

<video width="640" height="480" controls posster="images/poster.png">

<source src="mangluoitoancau.mp4" type="video/mp4">

<source src="mangluoitoancau.ogg" type="video/ogg">

Trình duyệt của bạn không hỗ trợ thẻ video

</video>

Giải thích code:

• Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>
• width và height quy định chiều rộng và chiều cao của video
• controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn màn hình và nút điều khiển âm thanh.
• Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của video.
• Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg và webm. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất.
• Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ video, thí dụ IE8. Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safari và IE9+ đều có hỗ trợ thẻ video
• Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử dụng poster là bức ảnh dưới đây:

Các định dạng video được hỗ trợ trên trình duyệt:

Trình duyệt	MP4	WebM	Ogg
Internet Explorer	Có	Không	Không
Chrome	Có	Có	Có
Firefox	Có (FireFox 21+)	Có	Có
Safari	Có	Không	Không
Opera	Không	Có	Có

Ngoài ra chúng ta có thể sử dụng Javascript để điều khiển bật, tắt, thay đổi kích thước video như ví dụ dưới đây:

Tùy chọn movie

Theo đó:

• Trước tiên video được gán một id cụ thể, trong ví dụ này là myvideo
• Video sẽ được lấy bằng lệnh document.getElemnetById("myvideo")
• Sau đó video này sẽ được điều khiển thông qua các lệnh video.pause(), video.play(), video.width="xyz" , với xyz là giá trị cụ thể nào đó. Các lệnh này được lồng trong các hàm.
• Các button tương ứng khi được nhấn sẽ gọi các hàm này lên bằng lệnh onclick, ví dụ: <button onclick="play();">Chạy</button> sẽ gọi hàm play() và chạy video này.

Code cụ thể:
<div>
<button onclick="playPause();">Play/Pause</button>
<button onclick="size250();">250</button>
<button onclick="size400();">400</button>
<button onclick="size550();">550</button>
</div>
<video id="myvideo" width="250">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></source>
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"></source>
</video>
<script type="text/javascript">
var video = document.getElementById("myvideo");
function playPause()
{ 
if (video.paused) 
video.play(); 
else 
video.pause(); 
} 

function size250()
{video.width = 250;} 

function size400()
{video.width = 400;}

function size550()
{video.width = 550;} 
</script>