Hướng dẫn form action trong html

Khái niệm form HTML
Tạo form HTML đầu tiên
Nút bấm submit/reset
Các phần tử của form
Thẻ
Thẻ </li><li>Thẻ <button></li></ul><h2 id="khai-niem-web-form">Khái niệm web form</h2><p>Biểu mẫu - <strong>web form</strong> - được tạo ra trong HTML là khu vực hình thành nên sự tương tác giữa người dùng và ứng dụng web. Các form cho phép người dùng nhập dữ liệu vào, sau đó gửi dữ liệu đó cho web server, hoặc nhập dữ liệu vào sử lý dữ liệu ngay tại client side.</p><div class="mbtTOC mbtTocHide"><div class="tocTitle"> <label>Nội dung chính</label> <span class="mbtTOCStatus">Show</span></div> <ul id="mbtTOC"><li><a href='#khai-niem-web-form'>Khái niệm web form</a></li><li><a href='#the-lt-form-gt-tao-web-form-dau-tien'>Thẻ <form>, tạo web form đầu tiên</a></li><li><a href='#vi-du-tao-form-html'>Ví dụ tạo form html</a></li><li><a href='#tao-nut-bam-de-gui-form-html-submit-form-reset-form'>Tạo nút bấm để gửi form HTML, submit form, reset form</a></li><li><a href='#su-dung-the-lt-button-gt-tao-nut-bam'>Sử dụng thẻ <button> tạo nút bấm</a></li><li><a href='#cac-phan-tu-trong-form'>Các phần tử trong FORM</a></li><li><a href='#the-lt-input-gt-trong-form-html'>Thẻ <input> trong form HTML</a></li><li><a href='#the-lt-textarea-gt-nhap-van-ban-nhieu-dong'>Thẻ <textarea> nhập văn bản nhiều dòng</a></li><li><a href='#the-lt-button-gt-trong-html'>Thẻ <button> trong HTML</a></li></ul> </div><p> <strong>form</strong> trong HTML được tạo ra bằng thẻ <strong><form></strong>, bên trong form đó nó chứa một hoặc nhiều phần tử để nhập liệu gọi là các điều khiển (control), có nhiều loại điều khiển như: </p> <table><tr><th>Điều khiển</th><th>Ví dụ</th></tr><tr><td>Điều khiển nhập một dòng text (TextBox) </td><td> </td></tr><tr><td>Điều khiển cho nhập nhiều dòng text (textarea) </td><td> </td></tr><tr><td>Điều khiển là các nút bấm (button) </td><td> </td></tr><tr><td>Các phần tử checkbox (hộp chọn) </td><td> Đã học HTML <br> Đã học CSS </td></tr><tr><td>Các phần tử radio (chọn một): </td><td> Nam <br> Nữ </td></tr><tr><td>Danh sách đổ xuống </td><td> Chọn cách sắp xếp: </td></tr><tr><td>... và một số điều khiển khác ... </td></tr></table><p> Hầu hết các control (điều khiển) để người dùng nhập thông tin, dữ liệu được tạo ra bằng thẻ HTML <strong><input></strong> và đi cùng nó thường là phần tử <strong><label></strong> để tạo ra nhãn (tiêu đề) cho control. </p><h2 id="the-lt-form-gt-tao-web-form-dau-tien">Thẻ <form>, tạo web form đầu tiên</h2><p>Để tạo ra HTML Form thì dùng đến thẻ <span><form></span>, sau đó nội dung trong thẻ trình bày các HTML và các phần tử là điều khiển (control) có trong form. </p><pre><form action="http://xuanthulab.net/" method="post">  </form></pre><p>Thẻ <form> cơ bản có hai thuộc tính cần lưu tâm là action và method:</p><ul><li> Thuộc tính <strong>action</strong> trong form: thuộc tính để thiết lập URL sẽ nhận dữ liệu, là địa chỉ mà dữ liệu của form gửi đến (submit đến, post đến). Thiếu tham số này thì action bằng URL đang truy cập (tức gửi thông tin form đến server theo địa chỉ đang truy cập). Web server nhận được dữ liệu, xử lý và trả về nội dung nào đó. </li><li> Thuộc tính <strong>method</strong> trong form: thuộc tính để thiết lập HTTP Method, xem thêm HTTP Request Message thường có giá trị bằng <strong>get</strong> hoặc <strong>post</strong>. Nếu không viết thuộc tính này thì method mặc định của form là <strong>get</strong><hr><p>Sử dụng <code>method="get"</code> thì khi submit dữ liệu được biểu diễn (encoding) thông qua URL (người dùng thấy rõ dữ liệu trên thanh địa chỉ trình duyệt khi nó gửi đi). Sử dụng <code>method="post"</code> thì khi submit biểu diễn trong nội dung của Http Request gửi đến Server và là ẩn với người dùng. Sử dụng <code>post</code> an toàn hơn.</p></li></ul><p> Khi thông tin gửi tới địa chỉ máy chủ (tham số action), thì dự liệu nhận được xử lý thế nào là việc của server, bạn sẽ thực hiện việc sử lý này khi lập trình backend với một ngôn ngữ lập trình nào đó như php, c# ... Ở đây để nhanh chóng kiểm tra xem server nhận được dữ liệu FORM gửi đến như thế nào bạn có thể sử dụng httpbin với địa chỉ gửi đến là: <code>https://httpbin.org/anything</code></p><h3 id="vi-du-tao-form-html">Ví dụ tạo form html</h3><p> Ví dụ FORM HTML sau yêu cầu người dùng điền tên đăng nhập, password và bấm vào nút <strong><code>Đăng nhập</code></strong> để gửi đi. </p><pre><form action="https://httpbin.org/anything" method="get"> <label for="name">Tên đăng nhập:</label><br> <input id="name" name="name" type="text" value=""><br> <label>Mật khẩu:</label><br> <input name="pass" type="password" value=""><br> <input type="submit" name="submit" value="Đăng Nhập" /> </form></pre><p>(Bạn có thể điền thông tin và bấm vào nút đăng nhập để kiểm tra dữ liệu gửi đến server)</p><p><div class="imgBox"><img alt="Hướng dẫn form action trong html" src="/dist/images/loading.svg" data-orgimg="https://sg.cdnki.com/huong-dan-form-action-trong-html---aHR0cHM6Ly94dWFudGh1bGFiLm5ldC9waG90by9mb3JtLTQxOTQuanBn.webp"></img></div></p><p>Bên trong FORM trên có ba điều khiển (control), đều được tạo ra từ thẻ <input> chúng được đặt tên thông qua thuộc tính <strong>name</strong> gồm: name, pass, submit. Khi bấm nút gửi đi thi dữ liệu trong các control này sẽ được gửi đi, khi gửi đi mỗi dữ liệu gồm tên và giá trị.</p><p>Giả sử bạn nhập vào tên là <code>test</code>, mật khẩu là <code>abc</code> thì với <code>form</code> sử dụng phương thức <code>get</code>, nên bấm vào đăng nhập thì thông tin sẽ mô tả bởi URL và nhìn vào thanh địa chỉ trình duyệt sẽ có dạng</p><p>https://httpbin.org/anything?<span>name=test&pass=abc</span> </p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Bạn thấy các dữ liệu trong thẻ <code>input</code> đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của <code>input</code> là: <code>name, pass</code></p><p>Trong trường hợp bạn chọn method là <code>post</code> thì sẽ không nhìn thấy dữ liệu biểu diễn qua URL như thế này mà dữ liệu được tích hợp vào dữ liệu HTTP Request.</p><p>Sửa lại ví dụ trên, bạn thử submit lại để kiểm tra:</p><pre><form action="https://httpbin.org/anything" method="get"> <p>FORM này gửi dữ liệu bằng phương thức POST (an toàn hơn)</p> <label for="name">Tên đăng nhập:</label><br> <input id="name" name="name" type="text" value=""><br> <label>Mật khẩu:</label><br> <input name="pass" type="password" value=""><br> <input type="submit" name="submit" value="Đăng Nhập" /> </form></pre><p>Phần sau sẽ tìm hiểu các phần tử trong FORM (các phần tử để nhập liệu).</p><h2 id="tao-nut-bam-de-gui-form-html-submit-form-reset-form">Tạo nút bấm để gửi form HTML, submit form, reset form</h2> <p>Để submit (gửi) form, thường tạo ra một nút bấm từ phần tử <code><input></code> và chỉ ra thuộc tính <code>type="submit"</code>, khi bấm vào đó dữ liệu form sẽ gửi đi.</p><p>Thẻ <input> không có đóng thẻ, cú pháp là <input các-thuộc-tính /></p><pre><input type="submit" value="Gửi" /></pre><p>Để tạo ra nút bấm, bấm vào đó toàn bộ dữ liệu đang nhập trong FORM bị xóa đi để nhập lại thì thuộc tính type thiết lập bằng reset</p><pre><input type="reset" value="Nhập lại" /></pre><p>Chú ý, nếu nút bấm bạn cho thêm thuộc tính name, ví dụ name="submit" thì dữ liệu (value) của nút bấm cũng được gửi đi theo tên đó.</p><h3 id="su-dung-the-lt-button-gt-tao-nut-bam">Sử dụng thẻ <button> tạo nút bấm</h3><p>Ngoài cách tạo nút bấm dùng thẻ <input> như trên, bạn có thể dùng <button> (thẻ này có đóng thẻ)</p><pre><button type="submit">Gửi</button> <button type="reset">Nhập lại</button></pre><p>Kết quả tương tự</p><h2 id="cac-phan-tu-trong-form">Các phần tử trong FORM</h2><p>Các phần tử trong FORM là nơi mà người dụng nhập dữ liệu, lựa chọn dữ liệu, các phần tử dữ liệu hay dùng trong form có thể kể đến là: <code><input> <textarea> <select> <button> <datalist> <label> <fieldset> <datalist></code></p><p>Mỗi phần tử là control của form để người dùng nhập dữ liệu thì phần tử đó cần có thuộc tính <code>name</code> là tên loại dữ liệu cần nhập, tên này được submit kèm dữ liệu</p><hr><h3 id="the-lt-input-gt-trong-form-html">Thẻ <input> trong form HTML</h3><p>Thẻ <strong><input></strong> là thẻ cơ bản trong <strong>form</strong>, thẻ này tạo ra các loại điều khiển tùy vào giá trị thiết lập bởi thuộc tính <strong>type</strong>. Thẻ <strong><input></strong> trong html chỉ có phần mở thẻ.</p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p><p>Trong <code>form</code> người ta cũng thường dùng thẻ <code><label></code> để cho biết tiêu đề của control tạo ra bởi <code><input></code></p><p>Cú pháp chính với <input> là:</p><pre><input name="tên-control" type="kiểu-control" value="..." id="..." /></pre><p><strong>Thẻ <label> trong HTML</strong>: được dùng để tạo nhãn cho phần tử form, phối hợp với input thì thường là:</p><pre><lable for="idcontrol">Tiêu đề phần tử</lable> <input name="tên-control" type="kiểu-control" value="..." id="idcontrol" /> </pre><p>Nếu id của control là idcontrol thì lable của nó phải có thuộc tính for="idcontrol". Tất nhiên bạn có thể dùng các phần tử HTML khác nhau để tạo nhãn như <p> <div> ... Tuy nhiên dùng lable như trên có một số lợi ích ví dụ người dùng bấm vào dùng chữ tiêu để, thì control tương ứng được focus, kích hoạt nhập dữ liệu ...</p><p>Sau đây là một số <code>type</code> hay dùng trong thẻ <input>:</p> <table><tr><th>thuộc tính type</th><th>Ý nghĩa</th></tr><tr><td><code>type="text"</code> </td><td> Hộp nhập liệu một dòng <pre><form class="p-4"> <label for="firstname">Họ:</label><br> <input type="text" name="firstname" id="firstname"><br> <label for="lastname">Tên:</label><br> <input type="text" name="lastname" id="lastname"> </form></pre><p></p> Họ:<br> <br> Tên:<br><p></p> </td></tr><tr><td><code>type="password"</code> </td><td>Hộp nhập password <pre><form> Tên:<br> <input type="text" name="username"><br> Mật khẩu:<br> <input type="password" name="psw"> </form> </pre><p></p> Tên:<br> <br> Mật khẩu:<br><p></p> </td></tr><tr><td><code>type="submit"</code> </td><td>Tạo nút bấm gửi form (xem ví dụ trên) </td></tr><tr><td><code>type="reset"</code> </td><td>Tạo nút bấm - đưa dữ liệu đang nhập trên form về mặc định (ví dụ phía trên) </td></tr><tr><td><code>type="radio"</code> </td><td>Tạo lựa chọn radio (chọn một giá trị trong nhóm). Các radio cùng tên tạo thành một nhóm (như gioitinh, noisinh). Khi submit giá trị trong radio được lựa chọn sẽ gửi đi (giá trị này lưu trong value). Một radio có thuộc tính checked thì mặc định nó là lựa chọn ban đầu của nhóm. <pre><form action="https://httpbin.org/anything" method="post"> <p><strong>Chọn giới tính</strong></p> <input type="radio" name="gioitinh" value="1"> Nam<br> <input type="radio" name="gioitinh" value="0" checked> Nữ<br> <input type="radio" name="gioitinh" value="2"> Khác <p><strong>Chọn nơi sinh</strong></p> <input type="radio" name="noisinh" value="HN"> Hà Nội<br> <input type="radio" name="noisinh" value="ND"> Nam Định<br> <input type="radio" name="noisinh" value="Khac"> Khác <button type="submit">Gửi</button> </form></pre><p><p><strong>Chọn giới tính</strong></p> Nam<br> Nữ<br> Khác <p><strong>Chọn nơi sinh</strong></p> Hà Nội<br> Nam Định<br> Khác<br></p> </td></tr><tr><td><code>type="checkbox"</code> </td><td> Tạo lựa chọn hộp kiểm (chọn nhiều phương án). Các checkbox cùng tên tạo thành một nhóm, nếu có nhiều lựa chọn một mảng các giá trị theo tên nhóm sẽ được gửi đi. <pre><form action="https://httpbin.org/anything" method="post"> <input type="checkbox" name="love1" value="LovePHP"> Tôi thích PHP<br> <input type="checkbox" name="love1" value="LoveHTML"> Tôi thích HTML<br> <input type="checkbox" name="love1" value="LoveCSS"> Tôi thích CSS<br> <button type="submit">Gửi</button> </form></pre><p></p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p> Tôi thích PHP<br> Tôi thích HTML<br> Tôi thích CSS<br><p></p> </td></tr><tr><td><code>type="color"</code> </td><td> Tạo điều khiển chọn màu sắc, giá trị là mã màu lựa chọn. <pre><form class="p-1" action="https://httpbin.org/anything" method="post"> <label for="color">Chọn màu yêu thích</label> <input type="color" name="color" id="color" value="#d400ff"><br> <button type="submit">Gửi</button> </form></pre><p></p> Chọn màu yêu thích <br><p></p> </td></tr><tr><td><code>type="date"</code> </td><td> Tạo điều khiển chọn ngày tháng <pre><input type="date" name="ngaysinh"> </pre> </td></tr><tr><td><code>type="email"</code> </td><td> Tạo điều khiển nhập email, dữ liệu cần nhập đúng định dạng email mới submit được form <pre><form class="p-1" action="https://httpbin.org/anything" method="post"> <label for="mail">Nhập email</label> <input type="email" name="mail" id="mail" value=""><br> <button type="submit">Gửi</button> </form> </pre><p></p> Nhập email <br><p></p> </td></tr><tr><td><code>type="file"</code> </td><td> Tạo điều khiển chọn file upload, để form upload được file phần <strong><form></strong> cần có thêm thuộc tính enctype="multipart/form-data" và phương thức phải là post <p></p> Chọn file upload <br><p></p> </td></tr><tr><td><code>type="time"</code> </td><td> Tạo điều khiển nhập giờ </td></tr><tr><td><code>type="url"</code> </td><td> Tạo điều khiển nhập địa chỉ URL </td></tr></table><hr><h3 id="the-lt-textarea-gt-nhap-van-ban-nhieu-dong">Thẻ <textarea> nhập văn bản nhiều dòng</h3><p>Thẻ <code><textarea></code> tạo ra một hộp nhập dữ liệu dạng text có nhiều dòng. Có thuộc tính <code>col</code> độ rộng và <code>row</code> số dòng.</p><pre><form class="p-1" action="https://httpbin.org/anything" method="post"> <label for="info">Nhập văn bản</label><br> <textarea name="info" id="info" rows="5" cols="30"> Tôi đang học HTML

Nhập văn bản

Thẻ
Tạo các nút bấm bằng với type là submit, reset. Thì bạn cũng có thể dùng phầ tử

programming html

Hướng dẫn form action trong html

Thẻ trong HTML

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Thẻ