Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Form HTML Phần 1

Form HTML Phần 1


Ngày 31 Tháng 12 Năm 2019

HTML Bài 7

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về cấu trúc và cách tạo một bảng mẫu để người dùng có thể điền thông tin cá nhân ở trong HTML cho trang web của mình. Bây giờ hãy cùng nhau tìm hiểu nhé!

1) Biểu mẫu trong HTML:

Để dễ gọi hơn mình sẽ dùng từ form nhé! Thì mục đích của form là giúp chúng ta tạo sự tương tác giữa người dùng với trang web. Nó cho phép người dùng nhập và gửi dữ liệu đến web server (theo mình hiểu thì đây là nơi mà nó lưu trữ trang web và xử lý thông tin). Form được sử dụng rất là nhiều trong các trang web như đăng kí thành viên, tìm kiếm, người dùng đăng nhập... Để dễ hiểu thì các bạn xem một form ở dưới đây nhé!

Form Goole

Sau đây là hình ảnh về cách hoạt động của một form để giúp các bạn có thể dễ hình dung hơn:

Cấu trúc một form HTML

Như các bạn thấy khi người dùng nhập thông tin và nhấp vào đăng ký thì dữ liệu sẽ được gửi đến Web Server để xử lý với thông tin là yêu cầu đăng kí của người dùng. Sau khi xử lý xong, sẽ trả về một thông báo bằng HTML để cho người dùng biết là mình đã đăng ký thành công và tùy vào những mục đích khác nhau thì ta sẽ có những form tương ứng. Bây giờ chúng ta hãy tìm hiểu cấu trúc của thẻ form qua hình ảnh sau đây:

Cấu trúc thẻ form HTML

Do chúng ta mới chỉ học HTML nên mình không cần ghi hai thuộc tính này nhé! Nhưng giúp các bạn hiểu thêm để sau này có học về Web Back-End thì cũng dễ hình dung hơn.
Các bạn để ý thuộc tính action="/dangky.php" thì đuôi .php ở đây chính là ngôn ngữ PHP dùng để xử lý thông thông tin người dùng gửi đến Web Server. Và khi xây dựng web thì các bạn có thể dùng những ngôn ngữ khác để xử lý. Ở đây mình có liệt kê qua một vài ngôn ngữ để các bạn có thể tham khảo:

TênThông Tin Thêm
PHPĐây có thể được xem là ngôn ngữ phổ biến và được sử dụng rộng rải trong lập trình web. Nó có những framwork nổi tiếng xây dựng website dễ dàng như Wordpress... để xem thêm chi tiết các bạn xem ở đây nhé : PHP
Node JSNgôn ngữ này cho phép chúng ta viết ở phía Front-End và cả Back-End. Cái này rất thích hợp cho những trang web thời gian thực như là trò chuyện trực tuyến, livestream ... để xem thêm chi tiết các bạn xem ở đây nhé : Node JS
JavaĐây là ngôn ngữ được phát triển lâu đời và có cộng động lớn hỗ trợ. Các website lớn hay ngân hàng thường sử dụng vì vấn đề bảo mật tốt của ngôn ngữ này, để xem thêm chi tiết các bạn xem ở đây nhé : Java
RubyNgôn ngữ này theo mình thấy thì thường dùng cho những ứng dụng web nhỏ với thời gian phát triển sản phẩm khá là nhanh. Để xem thêm chi tiết các bạn xem ở đây nhé : Ruby
PythonNgôn ngữ này theo mình thấy khá là dễ học với những cú pháp đơn giản. Ngoài việc phát triển trong trí tuệ nhân tạo thì ngôn ngữ còn được sử dụng vào việc làm web. Để xem thêm chi tiết các bạn xem ở đây nhé : Python

Ở đây thì mình không sắp xếp theo thứ tự phổ biến và cũng còn rất nhiều ngôn ngữ tốt khác nữa nên khi các bạn chọn ngôn ngữ lập trình Web thì điều quan trọng là cảm thấy thích với cú pháp, cách sử dụng, cách xử lý logic của ngôn ngữ và phải phù hợp với nhu cầu của dự án web.

Thuộc tính method="POST" là phương pháp gửi dữ liệu bảo mật lên Web server thường dùng chủ yếu trong form. Còn một phương thức nữa nhưng kém bảo mật và an toàn là phương thức GET vì nó sẽ hiện thông tin dữ liệu lên trang URL. Khi lập trình thì mình khuyến khích các bạn nên sử dụng POST để cho an toàn nhé!

Các thẻ nhập dữ liệu trong Form:
Ô nhập chữ (Text):

<input type="text" />

Đây là thẻ được dùng với một hay nhiều chữ trên một dòng giúp các bạn có thể nhập chữ như tên, tên đăng nhập, sở thích... và thường được sử dụng nhiều nhất trong form. Bây giờ chúng ta cùng nhau xem ví dụ nhé:

Mã Code HTML
<label>Sở thích của bạn:</label>
<input type="text" name="soThich" maxlength="10" />
Hiện thị trên Web

Sở thích của bạn:

thì ở đây có các thuộc tính các bạn cần lưu ý:

  • type="text": Thuộc tính xác định dữ liệu người dùng nhập vào luôn là chuỗi.
  • name="soThich": Thuộc tính này giúp xác định tên của ô nhập khi gửi dữ liệu từ form tới Web Server.
  • maxlength="10": Thuộc tính này giới hạn người dùng nhập kí tự vào ô nhập chữ. (Ở ví dụ là giới hạn 10 kí tự nhé!)
  • Thẻ <label>: Dùng để miêu tả ô nhập chữ giúp người dùng biết mình cần nhập dữ liệu nào vào từng ô cho chính xác.
Ô nhập mật khẩu (Password):

<input type="password" />

Để bảo vệ tài khoản của các bạn thì người ta tạo ra một giá trị thuộc tính tên là password trong thuộc tính type giúp các bạn khi nhập mật khẩu hay những thông tin bí mật, riêng tư của mình ở nơi công cộng thì sẽ chỉ hiện **** hoặc ••••, những người xung quanh dù có xem điện thoại của bạn thì cũng không thể biết được mật khẩu hay thông tin riêng tư ở trong đó.

Mã Code HTML
<label>Nhập mật khẩu của bạn:</label>
<input type="password" name="matKhau" />
Hiện thị trên Web

Nhập mật khẩu của bạn:

Thì nó cũng có các thuộc tính khác như ô nhập chữ. Còn những thuộc tính mở rộng của thẻ <input /> thì mình sẽ nói sau nhé!

Thẻ nhập nhiều dòng (Textarea):

<textarea cols="Số Cột" rows="Số Dòng" >

Nội Dung

<textarea>

Thẻ này giúp người dùng có thể nhập nhiều thông tin mà họ mong muốn như là bình luận trên Facebook, miêu tả về sản phẩm, nêu cảm nghĩ... Việc điều chỉnh kích thước của thẻ này sẽ theo số cột và số dòng ví dụ cho các bạn dễ hiểu thì mình đặt giá trị thuộc tính như sau: cols="40" rows="5" thì số 5 là miêu tả số dòng (xác định chiều cao của thẻ) và 40 là số cột tương đương với chiều dài của thẻ sẽ là 40 kí tự cho một dòng. Để nắm rõ hơn mình hãy cùng nhau tìm hiểu ví dụ dưởi đây:

Mã Code HTML
<label>Nhập bình luận của bạn:</label><br />
<textarea name="binhLuan" cols="40" rows="5">Nhập bình luận</textarea>
Hiện thị trên Web

Ô chọn một trong nhiều lựa chọn (Radio):

<input type="radio" />

Ô này giúp chúng ta chọn một trong nhiều lựa chọn như là giới tính, sở thích ... Đi với ô này thì chúng ta có hai thuộc tính bắt buộc là name và value để xác định tên và giá trị để gửi từ form đến server. Và Thông thường thì các bạn sẽ thấy là những ô này sẽ đi cùng với nhau theo một nhóm (<ul>, <ol>...) Để nắm rõ hơn mình hãy đi vào ví dụ cụ thể nhé:

Mã Code HTML
<label>Chọn giới tính của bạn</label>
<ul style="list-style-type: none;">
<li><input type="radio" name="gioiTinh" value="nam" checked> Nam</li>
<li><input type="radio" name="gioiTinh" value="nu"> Nữ</li>
</ul>
Hiện thị trên Web
  • Nam
  • Nữ

Các bạn có thể thấy là ở đây mình đặt thuộc tính là style="list-style-type: none;" ngăn cho HTML tạo ra những kí hiệu mặc định trong thẻ danh sách làm cho form của chúng ta dễ nhìn và đơn giản hơn (Các bạn có thể xem lại trong bài 4 về thẻ danh sách). Thuộc tính checked đặt một lựa chọn làm mặc định giúp cho thông tin từ form gửi lên server sẽ không bị thiếu làm ảnh hưởng đến việc xử lý thông tin nếu người dùng không chọn. Và mình có thể thêm bao nhiêu lựa chọn tùy ý nhưng các bạn chỉ có thể chọn một thôi nhé!

Ô chọn hai hay nhiều lựa chọn (Radio):

<input type="checkbox" />

Cũng có những dữ liệu chúng ta cần thu thập nhiều thông tin từ người dùng như là màu yêu thích, loại nhạc bạn thích nghe, Sở thích... Nó cũng giống như ô radio là cần hai thuộc tính bắt buộc là name và value. Để hiểu rõ mình hãy đi vào ví dụ nhé:
Mã Code HTML
<label>Chọn sở thích của bạn</label>
<ul style="list-style-type: none;">
<li><input type="checkbox" name="soThich" value="daBanh" checked> Đá banh</li>
<li><input type="checkbox" name="soThich" value="ngheNhac"> Nghe nhạc</li>
<li><input type="checkbox" name="soThich" value="xemPhim"> Xem phim</li>
<li><input type="checkbox" name="soThich" value="diBo"> Đi Bộ</li>
</ul>
Hiện thị trên Web
  • Đá banh
  • Nghe nhạc
  • Xem phim
  • Đi Bộ
Thẻ chọn một trong danh sách sổ xuống (<select>):

<select name="ten" >

<option value="Giá Trị 1" >Giá Trị 1<option>

<option value="Giá Trị 2" >Giá Trị 2<option>

<option value="Giá Trị 3" >Giá Trị 3<option>

<select>

Nó cũng giống ô chọn một trong nhiều lựa chọn mà mình đã học ở trên nhưng điểm khác nhau ở đây là nó không hiển thị trực tiếp mà chỉ khi ta nhấp chuột vào thì nó mới hiện danh sách cho chúng ta chọn. Trong thẻ <select> thì mình có các thẻ con là <option> dùng để hiện thị các lựa chọn mà chúng ta muốn người dùng chọn. Và nó phải có thuộc tính bắt buộc là value. Để các bạn rõ hơn thì mình hãy tìm hiểu thông qua ví dụ nhé:

Mã Code HTML
<label>Thiết Bị mà bạn hay sử dụng để học tập: </label><br />
<select name="hocTap">
<option value="maytinhban">Máy tính bàn</option>
<option value="maytinhbang">Máy tính bảng</option>
<option value="maytinhxachtay">Máy tính xách tay</option>
</select>
Hiện thị trên Web

Thì thẻ này cũng cho phép chúng ta có thể chọn hai hay nhiều lựa chọn trở lên bằng cách thêm thuộc tính multiple. Lưu ý là khi các bạn muốn chọn nhiều thì mình phải giữ nút CTRL và nhấp chuột vào lựa chọn mình muốn. Để nắm rõ hơn các bạn xem ví dụ nhé:

Mã Code HTML
<label>Thiết Bị mà bạn hay sử dụng để học tập: </label><br />
<select name="hocTap">
<option value="maytinhban">Máy tính bàn</option>
<option value="maytinhbang">Máy tính bảng</option>
<option value="maytinhxachtay">Máy tính xách tay</option>
</select>
Hiện thị trên Web

Đôi khi chúng ta muốn hiển thị số lựa chọn được hiển thị mặc định còn những lựa chọn khác thì phải kéo chuột xuống mới thấy. Thì thuộc tính size cho phép chúng ta linh động hiện thị mà theo cách ta muốn. Để rõ hơn thì chúng ta hãy cung tìm hiểu thông qua ví dụ nhé:

Mã Code HTML
<label>Thiết Bị mà bạn hay sử dụng để học tập: </label><br />
<select name="hocTap" size="2">
<option value="maytinhban">Máy tính bàn</option>
<option value="maytinhbang">Máy tính bảng</option>
<option value="maytinhxachtay">Máy tính xách tay</option>
</select>
Hiện thị trên Web

Ô gửi form (<Submit>):

<input type="submit" />

Đây là ô mà khi người dùng đã nhập xong hết dữ liệu có trong form thì nút này dùng để gửi form lên Web Server để xử lý thông tin. Đa số trong form thì cũng phải có nút này và thuộc tính bắt buộc trong thẻ là value. Và thẻ này thường được đặt dưới cùng của form để tiện cho người dùng nhấp vào. Để rõ hơn thì hãy cùng nhau tìm hiểu thông qua ví dụ nhé:

Mã Code HTML
<form action="/dangky.php" method="POST">
<label>Tên</label><br />
<input type="text" name="ten" maxlength="30"/><br />
<label>Mật Khẩu</label><br />
<input type="password" name="matkhau" maxlength="30"/><br /><br />
<input type="submit" value="Đăng Ký" />
</form>
Hiện thị trên Web





Thì các bạn có thể thấy là giá trị thuộc tính value trong ô gửi sẽ hiển thị trên nút gửi, giúp cho người dùng biết là khi nhấn vào ô đó thì nó gửi dữ liệu của mình lên để Web Server xử lý thông tin là đăng ký tài khoản.

Bài tập HTML:

Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ những gì mà mình đã học trong ngày hôm nay.

  1. Các bạn tạo một cấu trúc file HTML với tên là HTML7baitap.html
  2. Sau đó các bạn nhập form có nội dung như sau đây nha:

    Đăng ký thành viên






    • Đi du lịch
    • Nghe nhạc
    • Gặp gỡ bạn bè
    • Đi Bộ



Các bạn chỉ cần đặt action="" method="". Vì chúng ta mới học nên chỉ cần hiển thị một form là được.

Đây là file lời giải của bài tập các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé!

<h4>Đăng ký thành viên</h4>
<form action="/dangky.php" method="POST">
<label>Tên của bạn:</label><br />
<input type="text" name="ten" maxlength="30"/><br />
<label>Mật Khẩu</label><br />
<input type="password" name="matkhau" maxlength="30"/><br />
<label>Sở Thích của bạn: </label><br />
<ul style="list-style-type: none;">
<li><input type="checkbox" name="soThich" value="daBanh" checked> Đi du lịch</li>
<li><input type="checkbox" name="soThich" value="ngheNhac"> Nghe nhạc</li>
<li><input type="checkbox" name="soThich" value="xemPhim"> Gặp gỡ bạn bè</li>
<li><input type="checkbox" name="soThich" value="diBo"> Đi Bộ</li>
</ul>
<label>Giới tính của bạn:</label>
<select name="gioitinh">
<option value="nam">Nam</option>
<option value="nu">Nữ</option>
</select>
<br />
<label>Hãy góp ý để dịch vụ chúng tôi phát triển hơn :</label> <br />
<textarea name="gopy" cols="40" rows="5">Hãy góp ý , xin chân thành cảm ơn!</textarea><br />
<input type="submit" value="Đăng Ký" />
</form>

Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML7baitap.html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé.

Tổng kết:

Do bài này hơi dài nên mình sẽ chia sẻ làm hai phần nhé các bạn. Ở phần này thì mình đã giới thiệu đến các bạn cách hoạt động và những thẻ cơ bản có trong Form. Phần tiếp theo mình sẽ tìm hiểu sâu hơn về những thẻ khác có trong Form. Và có gì thắc mắc thì cứ liên hệ mình sẽ trả lời sớm nhất có thể. Chúc các bạn làm việc và học tập thật tốt nhé!

Load WooCommerce Stores in 249ms!