Form trong HTML

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

Một mẫu form sẽ nhận dữ liệu đầu vào từ site người sử dụng và sau đó sẽ thông báo nó tới các ứng 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, menu, checkbox …

Thẻ

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


    các phần tử font, chẳng hạn như input, textarea ...

Các thuộc tính của thẻ form trong HTML

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

Thuộc tính	Miêu tả
action	Ứng dụng quản trị back-end sẵn sàng để xử lý dữ liệu từ site khách.
method	Phương thức để tải dữ liệu lên. Thường sử dụng là GET và POST.
target	Xác định cửa sổ hoặc frame để hiển thị kết quả. Thuộc tính có thể nhận các giá trị như _blank, _self, _parent….
enctype	Bạn sử dụng thuộc tính này để xác định 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 thức tiêu chuẩn mà hầu hết các form sử dụng. mutlipart/form-data - Nó được sử dụng khi bạn muốn tải lên dữ liệu nhị phân trong mẫu form của các file như ảnh, word….

Một số form hữu ích trong HTML

Có các kiểu kiểm soát form khác nhau mà bạn có thể sử dụng để thu thập 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 người sử dụng như các hộp tìm kiếm hoặc tên. Form này được tạo ra bằng cách sử dụng thẻ .
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 khi người sử dụng nhập nó. Form này được tạo ra bằng cách sử dụng thẻ .
Text Input đa dòng - : Được sử dụng khi một người sử dụng được yêu cầu cung cấp thông tin mà có thể nhiều hơn một dòng. Form này được tạo ra bằng cách sử dụng thẻ </b>.</p></li> </ul> <h2>Text Input một dòng đơn trong HTML</h2> <h3>Ví dụ</h3> <p>Dưới đây là ví dụ cơ bản của việc sử dụng Text Input chỉ có một dòng sử dụng để nhận tên và họ.</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Text Input trong HTML</title> </head> <body> <form > First name: <input type="text" name="first_name" /> <br> Last name: <input type="text" name="last_name" /> </form> </body> </html> </pre> <p>Nó sẽ tạo ra kết quả sau:</p> <div class="result notranslate"> <form> First name: <input type="text" name="first_name"> <br> Last name: <input type="text" name="last_name"> </form> </div> <h3>Các thuộc tính</h3> <p>Dưới đây là danh sách các thuộc tính của thẻ <input> để tạo các trường văn bản:</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>type</td><td>Xác định kiểu của dữ liệu nhập vào và với Text Input thì thuộc tính này sẽ được thiết lập là <b>text</b>.</td></tr> <tr><td>name</td><td>Xác định tên cho trường được gửi tới Server để xác định và nhận giá trị đó.</td></tr> <tr><td>value</td><td>Xác định giá trị đầu tiên của form.</td></tr> <tr><td>size</td><td>Cho phép xác định độ rộng các ký tự của Text Input.</td></tr> <tr><td>maxlength</td><td>Cho phép xác định số lượng ký tự lớn nhất mà người sử dụng có thể nhập vào Text Input.</td></tr> </table> <h2>Password Input trong HTML</h2> <p>Tương tự như Input đơn dòng, nhưng nó giấu các ký tự ngay sau khi người sử dụng nhập mật khẩu vào. Form này được tạo ra bằng cách sử dụng thẻ <input> và thuộc tính type được thiết lập là <b>password</b>.</p> <h3>Ví dụ</h3> <p>Sau đây là một ví dụ đơn giản về Password Input được sử dụng để nhận mật khẩu người dùng:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Ví dụ Password Input trong HTML</title> </head> <body> <form > User ID : <input type="text" name="user_id" /> <br> Password: <input type="password" name="password" /> </form> </body> </html> </pre> <p>Kết quả sẽ là:</p> <div class="result notranslate"> <form> User ID : <input type="text" name="user_id"> <br> Password: <input type="password" name="user_id"> </form> </div> <h3>Các thuộc tính</h3> <p>Dưới đây là danh sách các thuộc tính của thẻ <input> để tạo trường mật khẩu:</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>type</td><td>Xác định kiểu của dữ liệu nhập vào và với Password Input thì thuộc tính này được thiết lập là <b>password</b>.</td></tr> <tr><td>name</td><td>Xác định tên trường được gửi tới Server để xác định và nhận giá trị.</td></tr> <tr><td>value</td><td>Xác định giá trị dữ liệu đầu vào ban đầu của form.</td></tr> <tr><td>size</td><td>Xác định độ rộng của các ký tự</td></tr> <tr><td>maxlength</td><td>Xác định số lượng ký tự lớn nhất mà người sử dụng có thể nhập vào form.</td></tr> </table> <h2>Text Input đa dòng trong HTML</h2> <p>Form này được tạo ra bằng cách sử dụng thẻ <textarea>, nó được sử dụng khi người sử dụng được yêu cầu cung cấp thông tin chi tiết mà có độ dài nhiều hơn một dòng.</p> <h3>Ví dụ</h3> <p>Dưới đây là ví dụ đơn giản về Text Input đa dòng:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Text Input đa dong</title> </head> <body> <form> Mieu ta: <br /> <textarea rows="5" cols="50" name="description"> Ban nhap phan mieu ta tai day...
Nó sẽ tạo kết quả sau:

Mieu ta:
Ban nhap phan mieu ta tai day...

Các thuộc tính

Sau đây là các thuộc tính của thẻ .</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>name</td><td>Cung cấp tên cho trường được gửi tới Server để xác định và nhận giá trị.</td></tr> <tr><td>rows</td><td>Xác định số hàng.</td></tr> <tr><td>cols</td><td>Xác định số cột.</td></tr> </table><h2>Checkbox trong HTML</h2> <p>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 ra bằng cách sử dụng thẻ <input> nhưng thuộc tính type được thiết lập là <b>checkbox</b>.</p> <h3>Ví dụ</h3> <p>Sau đây là một ví dụ cho một Form có hai Checkbox:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Checkbox trong HTML</title> </head> <body> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </body> </html> </pre> <p>Nó sẽ tạo ra một Form sau:</p> <div class="result notranslate"> <form> <input type="checkbox" name="maths" value="on"> Maths <input type="checkbox" name="physics" value="on"> Physics </form> </div> <h3>Các thuộc tính</h3> <p>Sau đây là các thuộc tính của thẻ <checkbox>.</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>type</td><td>Xác định kiểu của dữ liệu nhập vào và với Checkbox thì thuộc tính này được thiết lập là <b>checkbox</b>.</td></tr> <tr><td>name</td><td>Xác định tên trường được gửi tới Server để xác định và nhận giá trị.</td></tr> <tr><td>value</td><td>Các giá trị sẽ được sử dụng nếu Checkbox được chọn.</td></tr> <tr><td>checked</td><td>Thiết lập là <i>checked</i> nếu bạn muốn chọn nó theo mặc định.</td></tr> </table> <h2>Radio Button trong HTML</h2> <p>Radio Button được sử dụng khi ngoài rất 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 ra bằng cách sử dụng thẻ <input> và thuộc tính type được thiết lập là <b>radio</b>.</p> <h3>Ví dụ</h3> <p>Dưới đây là ví dụ cho một Form với 2 Radio Button:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Radio Box trong HTML</title> </head> <body> <form> <input type="radio" name="subject" value="maths"> Maths <input type="radio" name="subject" value="physics"> Physics </form> </body> </html> </pre> <p>Kết quả là:</p> <div class="result notranslate"> <form> <input type="radio" name="subject" value="maths"> Maths <input type="radio" name="subject" value="physics"> Physics </form> </div> <h3>Các thuộc tính</h3> <p>Sau đây là các thuộc tính cho Radio Button.</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>type</td><td>Xác định kiểu dữ liệu nhập vào và với Radio Button thì thuộc tính này sẽ được thiết lập là <b>radio</b>.</td></tr> <tr><td>name</td><td>Xác định tên trường được gửi tới Server để xác định và nhận giá trị.</td></tr> <tr><td>value</td><td>Xác định giá trị sẽ được sử dụng nếu Radio Button được chọn.</td></tr> <tr><td>checked</td><td>Thiết lập <i>checked</i> nếu bạn muốn chọn nó theo mặc định.</td></tr> </table><h2>Select Box trong HTML</h2> <p>Một Select Box cung cấp danh sách liệt kê từ trên xuống (hộp drop down) các tùy chọn đa dạng trong một form, và tại đó người sử dụng có thể chọn một hoặc nhiều lựa chọn.</p> <h3>Ví dụ</h3> <p>Dưới đây là một ví dụ về một Form với một hộp drop down.</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Select Box trong HTML</title> </head> <body> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </body> </html> </pre> <p>Đoạn mã trên sẽ cho kết quả sau:</p> <div class="result notranslate"> <form> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> </select> </form> </div> <h3>Các thuộc tính</h3> <p>Sau đây là danh sách các thuộc tính quan trọng của thẻ <select>:</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>name</td><td>Xác định tên được gửi tới Server để xác định và nhận giá trị.</td></tr> <tr><td>size</td><td>Được sử dụng để hiển thị một hộp danh sách có thanh cuốn.</td></tr> <tr><td>multiple</td><td>Nếu thiết lập là multiple, thì cho phép người sử dụng lựa chọn nhiều hơn một mục trên menu.</td></tr> </table> <p>Bảng dưới là các thuộc tính quan trọng của thẻ <option>:</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>value</td><td>Giá trị được sử dụng nếu một lựa chọn trong hộp được chọn.</td></tr> <tr><td>selected</td><td>Xác định tùy chọn này sẽ là giá trị được lựa chọn đầu tiên khi trang web được tải.</td></tr> <tr><td>label</td><td>Gán nhãn cho tùy chọn</td></tr> </table> <h2>File Upload Box trong HTML</h2> <p>Nếu bạn muốn cho phép một người sử dụng tải một file lên trang của bạn, bạn sẽ cần sử dụng một File Upload Box. File Upload Box được tạo ra bằng cách sử dụng phần tử <input> và thuộc tính type là để thiết lập là <b>file</b>.</p> <h3>Ví dụ</h3> <p>Ví dụ dưới đây về một Form với một File Upload Box:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du File Upload Box trong HTML</title> </head> <body> <form> <input type="file" name="fileupload" accept="image/*" /> </form> </body> </html> </pre> <p>Kết quả được tạo ra như sau:</p> <div class="result notranslate"> <form> <input type="file" name="fileupload" accept="image/*"> </form> </div> <h3>Các thuộc tính</h3> <p>Bảng dưới là danh sách các thuộc tính quan trọng của File Upload Box:</p> <table class="table table-bordered"> <tr><th>Thuộc tính</th><th>Miêu tả</th></tr> <tr><td>name</td><td>Xác định tên trường được gửi tới Server để xác nhận và nhận giá trị.</td></tr> <tr><td>accept</td><td>Xác định kiểu của file mà Server chấp nhận.</td></tr> </table><h2>Button trong HTML</h2> <p>Có nhiều cách trong HTML để tạo các nút có thể nhấn vào được (clickable). Bạn cũng có thể sử dụng thẻ <input> để tạo các nút này bởi thiết lập thuộc tính <b>type</b> là <b>button</b>. Thuộc tính <b>type</b> có thể nhận các giá trị sau:</p> <table class="table table-bordered"> <tr><th>Kiểu</th><th>Miêu tả</th></tr> <tr><td>submit</td><td>Tạo một nút mà tự động chấp nhận một form.</td></tr> <tr><td>reset</td><td>Tạo một nút mà tự động reset một form về giá trị ban đầu.</td></tr> <tr><td>button</td><td>Tạo một nút được sử dụng để kích hoạt một Client-side khi người sử dụng nhấn vào nút đó.</td></tr> <tr><td>image</td><td>Tạo một nút có thể nhấn nhưng chúng ta sử dụng một hình ảnh để làm nền cho nút này.</td></tr> </table> <h3>Ví dụ</h3> <p>Dưới đây là ví dụ về một Form với 3 kiểu Button:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du button trong HTML</title> </head> <body> <form> <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="/img/logo.png" /> </form> </body> </html> </pre> <p>Đoạn code trên sẽ tạo ra kết quả sau:</p> <div class="result notranslate"> <form> <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="/img/logo.png"> </form> </div> <h2>Hidden Form trong HTML</h2> <p>Hidden Form được sử dụng để ẩn dữ liệu bên trong trang và sau đó có thể được đẩy tới Server. Form này ẩn bên trong code và không xuất hiện trên các trang. Ví dụ, một Hidden Form được sử dụng để giữ số trang hiện tại. Khi một người sử dụng nhấn vào trang tiếp theo (next page) thì giá trị của Hidden Form sẽ được gửi tới Server và tại đây nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo trang hiện tại.</p> <h3>Ví dụ</h3> <p>Dưới đây là đoạn code về cách sử dụng của Hidden Form:</p> <pre class="prettyprint notranslate tryit"> <!DOCTYPE html> <html> <head> <title>Vi du Hidden Form trong HTML</title> </head> <body> <form> <p>Day la trang so 10</p> <input type="hidden" name="pagename" value="10" /> <input type="submit" name="submit" value="Submit" /> <input type="reset" name="reset" value="Reset" /> </form> </body> </html> </pre> <p>Nó sẽ tạo ra kết quả sau:</p> <div class="result notranslate"> <form> <p>Day la trang so 10</p> <input type="hidden" name="pagename" value="10"> <input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> </form> </div> <hr> <div class="pre-btn"> <a href="../html/font_trong_html.jsp"><i class="icon icon-arrow-circle-o-left big-font"></i> Trang trước</a> </div> <div class="pdf-btn"></div> <div class="nxt-btn"> <a href="../html/nhung_da_phuong_tien_trong_html.jsp">Trang sau <i class="icon icon-arrow-circle-o-right big-font"></i> </a> </div> <hr> <div class="fb-comments" data-order-by="social" data-href="http://hoconline.club/html/form_trong_html.jsp" data-width="100%" data-numposts="5"></div><hr> <div class="bottomgooglead"> <div class="bottomadtag">Bài viết liên quan</div> <div><ul class="list"> <li><p><a href="https://hoconline.club/ngu-phap-tieng-anh/">160 bài học ngữ pháp tiếng Anh hay nhất</a></p></li> <li><p><a href="https://hoconline.club/java/">155 bài học Java tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/android/">100 bài học Android tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/css/">247 bài học CSS tiếng Việt hay nhất</a></p></li> <li><p><a href="https://hoconline.club/html/">197 thẻ HTML cơ bản</a></p></li> <li><p><a href="https://hoconline.club/php/">297 bài học PHP</a></p></li> <li><p><a href="https://hoconline.club/cplusplus/">101 bài học C++ hay nhất</a></p></li> <li><p><a href="https://hoconline.club/bai_tap_cplusplus_co_giai/">97 bài tập C++ có giải hay nhất</a></p></li> <li><p><a href="https://hoconline.club/javascript/">208 bài học Javascript có giải hay nhất</a></p></li> </ul> </div> </div> </div> <div class="row"> </div></div> </div> </div> </div><div class="footer_ads"></div> <script type="text/javascript" src="../FrontEndWeb/js/sp.js"></script> <script type="text/javascript" src="/jvfrontend/javascript-v6.js?v=3"></script> </div><script type="text/javascript" src="../theme/js/custom-min.js"></script> <script type="text/javascript" src="../theme/js/jquery.colorbox-min.js"></script> <script type="text/javascript"> var tryit = new $.TryIt('../html/try_html.jsp'); tryit.compile(); </script> </div> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K2SNMM8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript></body></html>