- 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ẻ <input>
- Thẻ <textarea>
- Thẻ <button>
Tóm Tắt
Khái niệm web form
Biểu mẫu – web form – đượ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.
Nội dung chính
Show
- Khái niệm web form
- Thẻ <form>, tạo web form đầu tiên
- Ví dụ tạo form html
- Tạo nút bấm để gửi form HTML, submit form, reset
form - Sử dụng thẻ <button> tạo nút bấm
- Các phần tử trong FORM
- Thẻ <input> trong form HTML
- Thẻ <textarea> nhập văn bản nhiều dòng
- Thẻ <button> trong HTML
form trong HTML được tạo ra bằng thẻ <form>, 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ư:
Điều khiểnVí dụĐiều khiển nhập một dòng text (TextBox)
Điều khiển cho nhập nhiều dòng text (textarea)
Điều khiển là các nút bấm (button)
Các phần tử checkbox (hộp chọn)
Đã học HTML
Đã học CSS
Các phần tử radio (chọn một):
Nam
Nữ
Danh sách đổ xuống
Chọn cách sắp xếp:
… và một số điều khiển khác …
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 <input> và đi cùng nó thường là phần tử <label> để tạo ra nhãn (tiêu đề) cho control.
Thẻ <form>, tạo web form đầu tiên
Để tạo ra HTML Form thì dùng đến thẻ <form>, 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.
<form action="http://xuanthulab.net/" method="post"> <!--Các mã HTML, các phần tử trong form --> </form>
Thẻ <form>
cơ bản có hai thuộc tính cần lưu tâm là action và method:
- Thuộc tính action 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 đó.
- Thuộc tính method 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 get hoặc post. Nếu không viết thuộc tính này thì method mặc định của form là getSử dụng
method="get"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ụngmethod="post"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ụngpostan toàn hơn.
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à: https://httpbin.org/anything
Ví dụ tạo form html
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 Đăng nhập để gửi đi.
<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>
(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)
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 name 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ị.
Giả sử bạn nhập vào tên là test, mật khẩu là abc thì với form sử dụng phương thức get, 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
https://httpbin.org/anything?name=test&pass=abc
Bạn thấy các dữ liệu trong thẻ input đã được biểu diễn bằng URL với tên dữ liệu tương ứng với tên của input là: name, pass
Trong trường hợp bạn chọn method là post 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.
Sửa lại ví dụ trên, bạn thử submit lại để kiểm tra:
<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>
Phần sau sẽ tìm hiểu các phần tử trong FORM (các phần tử để nhập liệu).
Tạo nút bấm để gửi form HTML, submit form, reset
form
Để submit (gửi) form, thường tạo ra một nút bấm từ phần tử <input> và chỉ ra thuộc tính type="submit", khi bấm vào đó dữ liệu form sẽ gửi đi.
Thẻ <input> không có đóng thẻ, cú pháp là <input các-thuộc-tính />
<input type="submit" value="Gửi" />
Để 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
<input type="reset" value="Nhập lại" />
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 đó.
Sử dụng thẻ <button> tạo nút bấm
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ẻ)
<button type="submit">Gửi</button> <button type="reset">Nhập lại</button>
Kết quả tương tự
Các phần tử trong FORM
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à: <input> <textarea> <select> <button> <datalist> <label> <fieldset>
<datalist>
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 name là tên
loại dữ liệu cần nhập, tên này được submit kèm dữ liệu
Thẻ <input> trong form HTML
Thẻ <input> là thẻ cơ bản trong form, 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 type. Thẻ <input> trong html chỉ có phần mở thẻ.
Trong form người ta cũng thường dùng thẻ <label> để cho biết tiêu đề của control tạo ra bởi <input>
Cú pháp chính với <input>
là:
<input name="tên-control" type="kiểu-control" value="..." id="..." />
Thẻ <label> trong HTML: được dùng để tạo nhãn cho phần tử form, phối hợp với input thì thường là:
<lable for="idcontrol">Tiêu đề phần tử</lable> <input name="tên-control" type="kiểu-control" value="..." id="idcontrol" />
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 …
Sau đây là
một số type hay dùng trong thẻ <input>:
thuộc tính typeÝ nghĩatype="text"
Hộp nhập liệu một dòng
<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>
Họ:
Tên:
type="password"
Hộp nhập password
<form> Tên:<br> <input type="text" name="username"><br> Mật khẩu:<br> <input type="password" name="psw"> </form>
Tên:
Mật khẩu:
type="submit"
Tạo nút bấm gửi form (xem ví dụ trên)
type="reset"
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)
type="radio"
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.
<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>
Chọn giới tính
Nam
Nữ
Khác
Chọn nơi sinh
Hà Nội
Nam Định
Khác
type="checkbox"
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.
<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>
Tôi thích PHP
Tôi thích HTML
Tôi thích CSS
type="color"
Tạo điều khiển chọn màu sắc, giá trị là mã màu lựa chọn.
<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>
Chọn màu yêu thích
type="date"
Tạo điều khiển chọn ngày tháng
<input type="date" name="ngaysinh">
type="email"
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
<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>
Nhập email
type="file"
Tạo điều khiển chọn file upload, để form upload được file phần <form> cần có thêm thuộc tính enctype=”multipart/form-data” và phương thức phải là post
Chọn file upload
type="time"
Tạo điều khiển nhập giờ
type="url"
Tạo điều khiển nhập địa chỉ URL
Thẻ <textarea> nhập văn bản nhiều dòng
Thẻ <textarea> 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 col độ rộng và row số dòng.
<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
</textarea><br>
<button type="submit">Gửi</button>
</form>
Nhập văn bản
Thẻ <button> trong HTML
Tạo các nút bấm bằng <input> với type là submit, reset. Thì bạn cũng có thể dùng phầ tử <button> với type bằng
submit hoặc reset. Ngoài ra <button> có type bằng button, bấm vào đó không thực hiện submit hay reset, loại nút bấm này được sử dụng kết hợp với Javascript để người dùng tương tác với form.
<button type="submit">Gửi thông tin</button>
