KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?
Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!
>>>> Tham khảo khóa học đã giúp mình tại:
unica.vn
Description
Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix
Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40
Còn bây giờ thì vào bài viết thôi!
Hãy cùng web webaffiliatevn.com tìm hiểu cách tạo form trong html nhé!
Biểu mẫu (form) rất phổ biến trên trang web html, khi bạn muốn thu thập một số dữ liệu từ khách truy cập trang web. Ví dụ: trong quá trình đăng ký người dùng, bạn muốn thu thập thông tin như tên, địa chỉ email, số điện thoại, v.v.
Một biểu mẫu sẽ lấy thông tin đầu vào từ khách truy cập website (tên, email…) và sau đó sẽ gởi nó lên một ứng dụng back-end như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý yêu cầu trên dữ liệu được truyền dựa trên logic nghiệp vụ được xác định bên trong ứng dụng.
Có nhiều yếu tố hình thức khác nhau có sẵn khi tạo form trong html như trường văn bản, trường văn bản, menu thả xuống, nút radio, hộp kiểm, v.v.
Thẻ <form> HTML được sử dụng để tạo biểu mẫu HTML và nó có cú pháp sau :
<form action = "Script URL" method = "GET|POST"> form elements like input, textarea etc. </form>
1. Thuộc tính của form trong html
Sau đây là danh sách các thuộc tính biểu mẫu được sử dụng thường xuyên nhất:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | action
Kịch bản cuối cùng đã sẵn sàng để xử lý dữ liệu của bạn. |
| 2 | method
Phương pháp được sử dụng để tải lên dữ liệu. Phương thức sử dụng thường xuyên nhất là GET và POST. |
| 3 | target
Chỉ định cửa sổ đích hoặc khung nơi kết quả của tập lệnh sẽ được hiển thị. Nó nhận các giá trị như _blank, _elf, _parent, v.v. |
| 4 | enctype
Bạn có thể sử dụng thuộc tính enctype để chỉ định cách trình duyệt mã hóa dữ liệu trước khi gửi đến máy chủ. Các giá trị có thể là : application / x-www-form-urlencoding – Đây là phương thức tiêu chuẩn mà hầu hết các biểu mẫu sử dụng trong các tình huống đơn giản. mutlipart / form-data – Điều này được sử dụng khi bạn muốn tải lên dữ liệu nhị phân ở dạng tệp như hình ảnh, tệp từ, v.v. |
2. Điều khiển biểu mẫu HTML
Có nhiều loại điều khiển biểu mẫu khác nhau mà bạn có thể sử dụng để thu thập dữ liệu bằng biểu mẫu HTML :
-
- Điều khiển nhập văn bản
- Kiểm soát hộp kiểm
- Điều khiển hộp radio
- Chọn điều khiển hộp
- Chọn tệp
- Điều khiển ẩn
- Các nút có thể nhấp
- Nút gửi và đặt lại
a. Điều khiển nhập văn bản
Có ba loại nhập văn bản được sử dụng trên các biểu mẫu –
- Điều khiển nhập văn bản một dòng – Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ <input>.
- Điều khiển nhập mật khẩu – Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ HTMl <input>.
- Điều khiển nhập văn bản nhiều dòng – Điều này được sử dụng khi người dùng được yêu cầu cung cấp chi tiết có thể dài hơn một câu. Điều khiển nhập nhiều dòng được tạo bằng thẻ <textarea>.
a.1/ Điều khiển nhập văn bản một dòng
Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng đầu vào của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ <input> HTML.
Ví dụ:
Dưới đây là một ví dụ cơ bản về nhập văn bản một dòng được sử dụng để lấy tên và họ:
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
Họ: <input type = "text" name = "ho" /> <br>
Tên: <input type = "text" name = "ten" />
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZRKmK” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZRKmK’>GRZRKmK</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường văn bản.
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | type
Cho biết loại điều khiển đầu vào và đối với điều khiển nhập văn bản, nó sẽ được đặt thành văn bản . |
| 2 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value
Điều này có thể được sử dụng để cung cấp một giá trị ban đầu trong điều khiển. |
| 4 | size
Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo các ký tự. |
| 5 | maxlength
Cho phép chỉ định số lượng ký tự tối đa mà người dùng có thể nhập vào hộp văn bản. |
a.2/ Điều khiển nhập mật khẩu
Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành password (mật khẩu) .
Ví dụ:
Dưới đây là một ví dụ cơ bản về nhập mật khẩu một dòng được sử dụng để lấy mật khẩu người dùng :
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
Mã người dùng : <input type = "text" name = "user_id" />
<br>
Mật khẩu: <input type = "password" name = "password" />
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”XWdWWpQ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/XWdWWpQ’>XWdWWpQ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | type
Cho biết loại điều khiển đầu vào và đối với điều khiển nhập mật khẩu, nó sẽ được đặt thành mật khẩu . |
| 2 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value
Điều này có thể được sử dụng để cung cấp một giá trị ban đầu trong điều khiển. |
| 4 | size
Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo các ký tự. |
| 5 | maxlength
Cho phép chỉ định số lượng ký tự tối đa mà người dùng có thể nhập vào hộp văn bản. |
a.3/ Điều khiển nhập văn bản nhiều dòng
Điều này được sử dụng khi người dùng được yêu cầu cung cấp chi tiết có thể dài hơn một câu. Điều khiển nhập nhiều dòng được tạo bằng thẻ <textarea> HTML.
Ví dụ:
Dưới đây là một ví dụ cơ bản về kiểu nhập văn bản nhiều dòng được sử dụng để lấy mô tả:
<!DOCTYPE html>
<html>
<head>
<title>Điều khiển nhập nhiều dòng</title>
</head>
<body>
<form>
Mô tả: <br />
<textarea rows = "5" cols = "50" name = "description"> Nhập mô tả ở đây..... </textarea>
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”zYqYYwQ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/zYqYYwQ’>zYqYYwQ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính cho thẻ <textarea>.
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | rows
Cho biết số lượng hàng của hộp vùng văn bản. |
| 3 | cols
Cho biết số lượng cột của hộp văn bản |
b. Kiểm soát hộp kiểm (checkbox control)
Các checkbox được sử dụng khi cần chọn nhiều hơn một tùy chọn. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành checkbox.
Ví dụ:
Dưới đây là mã HTML mẫu cho một biểu mẫu có hai checkbox :
<!DOCTYPE html>
<html>
<head>
<title>Điều khiển Checkbox</title>
</head>
<body>
<form>
<input type = "checkbox" name = "toan" value = "on"> Toán
<input type = "checkbox" name = "vatli" value = "on"> Vật lí
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”ZEWEKKJ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/ZEWEKKJ’>ZEWEKKJ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính cho thẻ <input>.
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | type
Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành checkbox. . |
| 2 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value
Giá trị sẽ được sử dụng nếu hộp kiểm được chọn. |
| 4 | checked
Đặt thành checked nếu bạn muốn chọn nó theo mặc định. |
c. Điều khiển nút radio
Các nút radio được sử dụng khi có nhiều tùy chọn, chỉ cần chọn một tùy chọn. Chúng cũng được tạo bằng thẻ <input> HTML nhưng thuộc tính type được đặt thành radio .
Ví dụ:
Dưới đây là ví dụ mã HTML cho một biểu mẫu có hai nút radio:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "toan"> Toán
<input type = "radio" name = "subject" value = "vatli"> Vật lí
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”vYGYWxG” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/vYGYWxG’>vYGYWxG</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính cho nút radio.
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | type
Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành radio. |
| 2 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value
Giá trị sẽ được sử dụng nếu hộp radio được chọn. |
| 4 | checked
Đặt thành checked nếu bạn muốn chọn nó theo mặc định. |
d. Chọn điều khiển hộp
Một hộp chọn, còn được gọi là hộp thả xuống cung cấp tùy chọn để liệt kê các tùy chọn khác nhau dưới dạng danh sách thả xuống, từ đó người dùng có thể chọn một hoặc nhiều tùy chọn.
Ví dụ:
Dưới đây là ví dụ mã HTML cho một biểu mẫu với một hộp thả xuống:
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "toan" selected>Toán</option>
<option value = "vatli">Vật lí</option>
</select>
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRZROEr” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/GRZROEr’>GRZROEr</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính quan trọng của thẻ <select>
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | size
Điều này có thể được sử dụng để trình bày một hộp danh sách cuộn. |
| 3 | multiple
Nếu được đặt thành “multiple” thì cho phép người dùng chọn nhiều mục từ menu. |
Sau đây là danh sách các thuộc tính quan trọng của thẻ <option>
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | value
Giá trị sẽ được sử dụng nếu một tùy chọn trong hộp chọn được chọn. |
| 2 | selected
Chỉ định rằng tùy chọn này sẽ là giá trị được chọn ban đầu khi tải trang. |
| 3 | label
Một cách khác của tùy chọn ghi nhãn |
e. Hộp tải tệp (File Upload Box)
Nếu bạn muốn cho phép người dùng tải tệp lên trang web của mình, bạn sẽ cần sử dụng hộp tải lên tệp, còn được gọi là hộp chọn tệp. Điều này cũng được tạo bằng phần tử <input> nhưng thuộc tính type được đặt thành file.
Ví dụ:
Dưới đây là ví dụ mã HTML cho một biểu mẫu với một hộp tải lên tệp:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”PoNoOEj” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/PoNoOEj’>PoNoOEj</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Thuộc tính:
Sau đây là danh sách các thuộc tính quan trọng của hộp tải lên tệp:
| STT | Thuộc tính & Mô tả |
|---|---|
| 1 | name
Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | accept
Chỉ định các loại tệp mà máy chủ chấp nhận. |
f. Nút điều khiển
Có nhiều cách khác nhau trong HTML để tạo các nút có thể nhấp. Bạn cũng có thể tạo nút có thể nhấp bằng thẻ <input> bằng cách đặt thuộc tính loại của nó thành button. Thuộc tính type có thể lấy các giá trị sau:
| STT | Loại & Mô tả |
|---|---|
| 1 | submit
Điều này tạo ra một nút tự động gửi một biểu mẫu. |
| 2 | reset
Điều này tạo ra một nút tự động đặt lại các điều khiển biểu mẫu về các giá trị ban đầu của chúng. |
| 3 | button
Điều này tạo ra một nút được sử dụng để kích hoạt tập lệnh phía máy khách khi người dùng nhấp vào nút đó. |
| 4 | image
Điều này tạo ra một nút có thể nhấp nhưng chúng ta có thể sử dụng một hình ảnh làm nền của nút. |
Ví dụ:
Dưới đây là ví dụ mã HTML cho một biểu mẫu có ba loại nút:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</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 = "https://webaffiliatevn.com/wp-content/uploads/2020/03/webaffiliatevn-logo.png" />
</form>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”RwawjJK” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/RwawjJK’>RwawjJK</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
g. Điều khiển biểu mẫu ẩn
Điều khiển biểu mẫu ẩn được sử dụng để ẩn dữ liệu bên trong trang mà sau này có thể được đẩy lên máy chủ. Điều khiển này ẩn bên trong mã và không xuất hiện trên trang thực tế. Ví dụ: theo mẫu ẩn đang được sử dụng để giữ số trang hiện tại. Khi người dùng nhấp vào trang tiếp theo thì giá trị của điều khiển ẩn sẽ được gửi đến máy chủ web và ở đó nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo dựa trên trang hiện tại đã thông qua.
Ví dụ:
Dưới đây là ví dụ mã HTML để hiển thị việc sử dụng điều khiển ẩn:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>Đây là trang 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>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”abNbVjb” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/abNbVjb’>abNbVjb</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
>> Xem thêm”
