Form trong HTML

Form trong HTML

Các mẫu form trong HTML được yêu cầu khi bạn mong muốn thu thập một vài dữ liệu từ người tiêu dùng. Chẳng hạn, khi người tiêu dùng đăng ký, bạn có thể mong muốn thu thập thông tin như tên, địa chỉ tin nhắn hộp thư online, thẻ tín dụng….

Một mẫu form sẽ nhận dữ liệu đầu vào từ site người tiêu dùng & sau đó sẽ nhắc nhở nó tới các áp dụng back-end như CGI, ASP Script hoặc PHP Script….

Có nhiều phần tử form có sẵn như các trường text, các trường textarea, danh mục, checkbox …

Thẻ <formvàgt; được sử dụng để tạo một Form trong HTML & thẻ này có cú pháp:

<form action="Script URL" method="GET|POST">
    các phần tử font, ví dụ như input, textarea ...
</formvàgt;

Các tính chất của thẻ form trong HTML

Ngoài các tính chất thông thường, sau đây là các tính chất của form hay sử dụng:

Thuộc tínhMiêu tả
actionỨng dụng quản trị back-end sẵn sàng để giải quyết dữ liệu từ site khách.
methodPhương thức để tải dữ liệu lên. Thường sử dụng là GET & POST.
targetXác định cửa sổ hoặc frame để hiển thị kết quả. Tính chất có thể nhận các giá trị như _blank, _self, _parent….
enctype

Bạn sử dụng tính chất này để xác nhận cách mà trình duyệt mã hóa dữ liệu trước khi nó gửi tới Server. Các giá trị có thể nhận là:

  • application/x-www-form-urlencoded – Đây là phương pháp tiêu chí mà đa phần các form sử dụng.

  • mutlipart/form-data – Nó được sử dụng khi bạn mong muốn tải lên dữ liệu nhị phân trong mẫu form của các file như ảnh, word….

Marketing

Một số form hữu hiệu trong HTML

Có các kiểu kiểm tra form khác nhau mà bạn có thể sử dụng để craw dữ liệu:

  • Text Input

  • Checkbox

  • Radio Box

  • Select Box

  • File Select Box

  • Submit

Text Input trong HTML

Có 3 kiểu Text Input được sử dụng trên form:

  • Text Input một dòng đơn – Sử dụng cho các mục mà yêu cầu chỉ một dòng của dữ liệu đầu vào của khách hàng như các hộp tìm kiếm hoặc tên. Form này được tạo thành bằng cách dùng thẻ <inputvàgt;.

  • Password Input – Đây cũng là một Text Input một dòng đơn nhưng nó giấu các ký tự ngay sau khoảng thời gian người tiêu dùng nhập nó. Form này được tạo thành bằng cách dùng thẻ <inputvàgt;.

  • Text Input đa dòng – : Được sử dụng khi một người tiêu dùng được yêu cầu phân phối thông tin mà có thể nhiều hơn một dòng. Form này được tạo thành bằng cách dùng thẻ <textareavàgt;.

Text Input một dòng đơn trong HTML

Chẳng hạn

Dưới đây là chẳng hạn căn bản của việc sử dụng Text Input chỉ có một dòng sử dụng để nhận tên & họ.

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Text Input trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<form >
First name:  <input type="text" name="first_name" />
<brvàgt;
Last name:  <input type="text" name="last_name" />
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Nó sẽ tạo thành kết quả sau:

Xem Thêm  C++ Core Guidelines - lỗi main must return int

First name:

Last name:

Marketing

Các tính chất

Dưới đây là mục lục các tính chất của thẻ <inputvàgt; để tạo các trường văn bản:

Thuộc tínhMiêu tả
typeXác định kiểu của dữ liệu nhập vào & với Text Input thì tính chất này sẽ được seting là text.
nameXác định tên cho trường được gửi tới Server để xác nhận & nhận giá trị đó.
valueXác định giá trị trước tiên của form.
sizeCho phép xác nhận độ rộng các ký tự của Text Input.
maxlengthCho phép xác nhận số lượng ký tự lớn nhất mà người tiêu dùng có thể nhập vào Text Input.

Password Input trong HTML

Cũng giống như Input đơn dòng, nhưng nó giấu các ký tự ngay sau khoảng thời gian người tiêu dùng nhập mật khẩu vào. Form này được tạo thành bằng cách dùng thẻ <inputvàgt; & tính chất type được seting là password.

Chẳng hạn

Sau đây là một chẳng hạn dễ dàng về Password Input được sử dụng để nhận mật khẩu người dùng:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Chẳng hạn Password Input trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<form >
User ID :  <input type="text" name="user_id" />
<brvàgt;
Password:  <input type="password" name="password" />
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Kết quả sẽ là:

User ID :  

Password:

Các tính chất

Dưới đây là mục lục các tính chất của thẻ <inputvàgt; để tạo trường mật khẩu:

Thuộc tínhMiêu tả
typeXác định kiểu của dữ liệu nhập vào & với Password Input thì tính chất này được seting là password.
nameXác định tên trường được gửi tới Server để xác nhận & nhận giá trị.
valueXác định giá trị dữ liệu đầu vào ban đầu của form.
sizeXác định độ rộng của các ký tự
maxlengthXác định số lượng ký tự lớn nhất mà người tiêu dùng có thể nhập vào form.

Text Input đa dòng trong HTML

Form này được tạo thành bằng cách dùng thẻ <textareavàgt;, nó được sử dụng khi người tiêu dùng được yêu cầu phân phối thông tin cụ thể mà có độ dài nhiều hơn một dòng.

Chẳng hạn

Dưới đây là chẳng hạn dễ dàng về Text Input đa dòng:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Text Input đa dongvàlt;/titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
Mieu ta: <br />
<textarea rows="5" cols="50" name="description">
Ban nhap phan mieu ta tai day...
</textareavàgt;
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Nó sẽ tạo kết quả sau:

Mieu ta:

Các tính chất

Sau đây là các tính chất của thẻ <textareavàgt;.

Thuộc tínhMiêu tả
nameCung cấp tên cho trường được gửi tới Server để xác nhận & nhận giá trị.
rowsXác định số hàng.
colsXác định số cột.

Xem Thêm  CL3 - cl3

Checkbox trong HTML

Checkbox được sử dụng khi có nhiều hơn một tùy chọn được yêu cầu để chọn. Checkbox cũng được tạo thành bằng cách dùng thẻ <inputvàgt; nhưng tính chất type được seting là checkbox.

Chẳng hạn

Sau đây là một chẳng hạn cho một Form có hai Checkbox:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Checkbox trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Nó sẽ tạo thành một Form sau:

Maths
Physics

Các tính chất

Sau đây là các tính chất của thẻ <checkboxvàgt;.

Thuộc tínhMiêu tả
typeXác định kiểu của dữ liệu nhập vào & với Checkbox thì tính chất này được seting là checkbox.
nameXác định tên trường được gửi tới Server để xác nhận & nhận giá trị.
valueCác giá trị sẽ được sử dụng nếu Checkbox được chọn.
checkedThiết lập là nếu bạn mong muốn chọn nó theo mặc định.

Radio Button trong HTML

Radio Button được sử dụng khi ngoài rất là nhiều các tùy chọn, chỉ có một tùy chọn được yêu cầu để chọn. Radio Button được tạo thành bằng cách dùng thẻ <inputvàgt; & tính chất type được seting là radio.

Chẳng hạn

Dưới đây là chẳng hạn cho một Form với 2 Radio Button:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Radio Box trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Kết quả là:

Maths
Physics

Các tính chất

Sau đây là các tính chất cho Radio Button.

Thuộc tínhMiêu tả
typeXác định kiểu dữ liệu nhập vào & với Radio Button thì tính chất này sẽ được seting là radio.
nameXác định tên trường được gửi tới Server để xác nhận & nhận giá trị.
valueXác định giá trị sẽ được sử dụng nếu Radio Button được chọn.
checkedThiết lập nếu bạn mong muốn chọn nó theo mặc định.

Select Box trong HTML

Một Select Box phân phối mục lục liệt kê từ trên xuống (hộp drop down) các tùy chọn phong phú trong một form, & tại đó người tiêu dùng có thể chọn một hoặc nhiều lựa chọn.

Chẳng hạn

Dưới đây là một chẳng hạn về một Form với 1 hộp drop down.

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Select Box trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<select name="dropdown">
<option value="Maths" selectedvàgt;Mathsvàlt;/optionvàgt;
<option value="Physics">Physicsvàlt;/optionvàgt;
</selectvàgt;
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Đoạn mã trên sẽ cho kết quả sau:

Các tính chất

Sau đây là mục lục các tính chất trọng yếu của thẻ <selectvàgt;:

Thuộc tínhMiêu tả
nameXác định tên được gửi tới Server để xác nhận & nhận giá trị.
sizeĐược sử dụng để hiển thị 1 hộp mục lục có thanh cuốn.
multipleNếu seting là multiple, thì cho phép người tiêu dùng lựa chọn nhiều hơn một mục trên danh mục.

Bảng dưới là các tính chất trọng yếu của thẻ <optionvàgt;:

Thuộc tínhMiêu tả
valueGiá trị được sử dụng nếu một lựa chọn trong hộp được chọn.
selectedXác định tùy chọn này sẽ là giá trị được lựa chọn trước tiên khi website được tải.
labelGán nhãn cho tùy chọn

Xem Thêm  Tạo Frame trong HTML, Cách tạo thẻ Frame trong HTML

File Upload Box trong HTML

Nếu bạn mong muốn cho phép một người tiêu dùng tải một file lên trang của các bạn, bạn sẽ cần sử dụng một File Upload Box. File Upload Box được tạo thành bằng cách dùng phần tử <inputvàgt; & tính chất type là để seting là file.

Chẳng hạn

Chẳng hạn dưới đây về một Form với một File Upload Box:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du File Upload Box trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<input type="file" name="fileupload" accept="image/*" />
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Kết quả được tạo thành như sau:

Các tính chất

Bảng dưới là mục lục các tính chất trọng yếu của File Upload Box:

Thuộc tínhMiêu tả
nameXác định tên trường được gửi tới Server để công nhận & nhận giá trị.
acceptXác định kiểu của file mà Server chấp thuận.

Button trong HTML

Có nhiều cách trong HTML để tạo các nút có thể nhấp vào được (clickable). Bạn cũng có thể sử dụng thẻ <inputvàgt; để tạo các nút này bởi seting tính chất typebutton. Tính chất type có thể nhận các giá trị sau:

KiểuMiêu tả
submitTạo một nút mà auto chấp thuận một form.
resetTạo một nút mà auto reset một form về giá trị ban đầu.
buttonTạo một nút được sử dụng để kích hoạt một Client-side khi người tiêu dùng nhấp vào nút đó.
imageTạo một nút có thể nhấn nhưng tất cả chúng ta sử dụng một hình ảnh để làm nền cho nút này.

Chẳng hạn

Dưới đây là chẳng hạn về một Form với 3 kiểu Button:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du button trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
<input type="button" name="ok" value="OK"  />
<input type="image" name="imagebutton" src="../html/images/logo3.png" />
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Đoạn code trên sẽ tạo thành kết quả sau:

Hidden Form trong HTML

Hidden Form được sử dụng để ẩn dữ liệu bên trong trang & sau đó có thể được đẩy tới Server. Form này ẩn bên trong code & không hiện ra trên các trang. Chẳng hạn, một Hidden Form được sử dụng để giữ số trang bây giờ. Khi một người tiêu dùng nhấp vào trang kế đến (next page) thì giá trị của Hidden Form sẽ được gửi tới Server & tại đây nó sẽ quyết định trang nào sẽ được hiển thị kế đến trang bây giờ.

Chẳng hạn

Dưới đây là đoạn code về cách dùng của Hidden Form:

<!DOCTYPE htmlvàgt;
<htmlvàgt;
<headvàgt;
<titlevàgt;Vi du Hidden Form trong HTML</titlevàgt;
</headvàgt;
<bodyvàgt;
<formvàgt;
<pvàgt;Day la trang so 10vàlt;/pvàgt;
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset"  value="Reset" />
</formvàgt;
</bodyvàgt;
</htmlvàgt;

Nó sẽ tạo thành kết quả sau:

Day la trang so 10

Viết một bình luận