Form trong HTML – WebVN https://webvn.com Cộng đồng web Việt Nam Sat, 10 Oct 2015 14:45:33 +0000 en-US hourly 1 https://webvn.com/wp-content/uploads/2014/10/cropped-1024-32x32.png Form trong HTML – WebVN https://webvn.com 32 32 Thuộc tính trong thẻ Input https://webvn.com/thuoc-tinh-trong-the-input/ https://webvn.com/thuoc-tinh-trong-the-input/#respond Wed, 02 Sep 2015 18:49:21 +0000 https://webvn.com/?p=2000 Chi tiết các thuộc tính có thể sử dụng trong thẻ input: readonly, disabled, multiple, placeholder... từ định nghĩa tới ví dụ minh họa.

The post Thuộc tính trong thẻ Input appeared first on WebVN.

]]>
Thuộc tính value

Thuộc tính value được sử dụng để thiết lập giá trị cho thẻ input:

Demo

Thuộc tính readonly

Thuộc tính readonly quy định giá trị trong thẻ input chỉ được dùng để hiển thị (không thể thay đổi):

Demo

Thuộc tính readonly không cần giá trị. Bạn cũng có thể viết readonly=”readonly”, hai cách đều như nhau.

Thuộc tính disabled

Thuộc tính disabled được sử dụng để vô hiệu hóa một thẻ input.

Khi thuộc tính này được thiết lập, bạn không thể nhấn hay sử dụng thẻ.

Những thông tin trong thẻ có thuộc tính disabled sẽ không được gửi đi khi submit.

Demo

Thuộc tính disabled không cần giá trị. Bạn cũng có thể viết disabled=”disabled”, hai cách đều như nhau.

Thuộc tính size

Thuộc tính size được sử dụng để thiết lập chiều dài (đơn vị là ký tự) của một thẻ input:

Demo

Thuộc tính maxlength

Thuộc tính maxlength được sử dụng để thiết lập số ký tự tối đa cho một thẻ input:

Demo

Khi thiết lập thuộc tính maxlength, thẻ input sẽ bỏ qua các ký tự vượt quá số được thiết lập.

Thuộc tính maxlength không cung cấp thêm bất kỳ thiết lập nào khác. Nếu bạn muốn cảnh báo người dùng đã sử dụng hết số ký tự cho phép, bạn phải sử dụng JavaScript.

Việc thêm các điều kiện vào thẻ chỉ hạn một phần những dữ liệu không hợp lệ.
Để việc nhận thông tin từ người dùng được an toàn, bạn phải kiểm tra lại một lần nữa trên máy chủ (bằng php, asp…).

Thuộc tính trong HTML5

HTML5 thêm một số thuộc tính cho thẻ <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

và một số thuộc tính mới cho thẻ <form>:

  • autocomplete
  • novalidate

Thuộc tính autocomplete

Thuộc tính autocomplete quy định một form hoặc một thẻ input trong form có được sử dụng chức năng tự động điền, gợi ý thông tin hay không.

Khi thuộc tính autocomplete có giá trị “on”, trình duyệt sẽ tự động gợi ý những giá trị dựa trên thông tin người dùng nhập vào.

Mẹo: Bạn có thể thiết lập giá autocomplete là “on” cho thẻ form và “off” cho một vài thẻ input hoặc ngược lại.

Thuộc tính autocomplete có thể sử dụng trong thẻ <form> và thẻ <input> với các kiểu: text, search, url, tel, email, password, datepickers, range và color.

Demo

Thuộc tính novalidate

novalidate là một thuộc tính của thẻ <form>.

Khi thêm thuộc tính novalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.

Thuộc tính novalidate không được hỗ trợ trên trình duyệt Internet Explorer 9 (cùng với các phiên bản trước) và Safari.

Demo

Thuộc tính autofocus

Khi thuộc tính autofocus được thiết lập, trình duyệt sẽ tự động chuyển con trỏ tới thẻ <input> chứa thuộc tính.

Thuộc tính autofocus trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính form

Thuộc tính form cho phép một thẻ input thuộc về một hoặc nhiều form khác nhau.

Mẹo: Để một thẻ input thuộc nhiều form, sử dụng dấu cách trong danh sách các id của form.

Demo

Thuộc tính formaction

Thuộc tính formaction quy định địa chỉ trang sẽ xử lý dữ liệu khi submit form.

Thuộc tính formaction sẽ ghi đè giá trị của thuộc tính action trong thẻ <form>.

Thuộc tính formaction được sử dụng với type=”submit” và type=”image”.

Thuộc tính formaction trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính formenctype

Thuộc tính formenctype quy định cách dữ liệu trong form sẽ được mã hóa khi gửi thông tin lên máy chủ (chỉ dành cho form có thuộc tính method=”post”).

Thuộc tính formenctype sẽ ghi đè giá trị của thuộc tính enctype trong thẻ <form>.

Thuộc tính formenctype được sử dụng với type=”submit” và type=”image”.

Thuộc tính formenctype trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính formmethod

Thuộc tính formmethod quy định phương thức gửi dữ liệu từ form tới máy chủ.

Thuộc tính formmethod sẽ ghi đè giá trị của thuộc tính method trong thẻ <form>.

Thuộc tính formmethod được sử dụng với type=”submit” và type=”image”.

Thuộc tính formmethod trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính formnovalidate

Khi thêm thuộc tính formnovalidate, dữ liệu trong form sẽ không bị kiểm tra trước khi gửi đi.

Thuộc tính formnovalidate sẽ ghi đè giá trị của thuộc tính novalidate trong thẻ <form>.

Thuộc tính formnovalidate được sử dụng với type=”submit”.

Thuộc tính formnovalidate trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính formtarget

Thuộc tính formtarget quy định cửa sổ trình duyệt sẽ hiển thị phản hồi từ máy chủ khi submit form.

Thuộc tính formtarget sẽ ghi đè giá trị của thuộc tính target trong thẻ <form>.

Thuộc tính formtarget được sử dụng với type=”submit” và type=”image”.

Thuộc tính formtarget trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính height và width

Thuộc tính height và width quy định chiều dài và chiều cao của một thẻ <input>.

Thuộc tính height và width chỉ được sử dụng trong thẻ <input type=”image”>.

Hãy luôn nhớ quy định kích thước khi sử dụng ảnh. Nếu trình duyệt không biết kích thước ảnh, trang sẽ bị co giãn trong khi tải.

Demo

Thuộc tính list

Thuộc tính list trỏ tới dữ liệu đã được chuẩn bị sẵn trong thẻ <datalist> để đưa ra một số gợi ý khi người dùng nhập liệu trong thẻ <input>.

Demo

Thuộc tính min và max

Thuộc tính min và max quy định giá trị tối thiểu và tối đa mà người dùng có thể nhập vào thẻ <input>.

Thuộc tính min, max được sử dụng trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.

Demo

Thuộc tính multiple

Thuộc tính multiple được sử dụng để cho phép người dùng chọn một hoăc nhiều giá trị trong thẻ <input>.

Thuộc tính multiple được sử dung trong thẻ input với các type có giá trị: email và file.

Thuộc tính multiple trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính pattern

Thuộc tính pattern được sử dụng để thiết lập điều kiện cho giá trị nhập vào thẻ <input> (sử dụng biểu thức chính quy – regular expression).

Thuộc tính pattern được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.

Mẹo: Sử dụng thuộc tính title để miêu tả về các điều kiện trong thẻ input, giúp người dùng dễ dàng hơn trong việc nhập liệu.

Mẹo: Bạn có thể tìm hiểu thêm về regular expressions trong các bài về JavaScript.

Thuộc tính pattern trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.

Demo

Thuộc tính placeholder

Thuộc tính placeholder được sử dụng để đưa ra những gợi ý cho người dùng trước khi nhập liệu vào thẻ.

Thuộc tính placeholder được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email và password.

Thuộc tính placeholder trong thẻ input không được hỗ trợ trong Internet Explorer 9 và các phiên bản trước.

Demo

Thuộc tính required

Thuộc tính required được sử dụng để quy định một thẻ bắt buộc phải nhập nội dung trước khi submit form.

Thuộc tính required được sử dung trong thẻ input với các type có giá trị: text, search, url, tel, email, password, date pickers, number, checkbox, radio và file.

Thuộc tính required trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Safari.

Demo

Thuộc tính step

Thuộc tính step quy định dữ liệu nhập vào phải là bộ số của một số.

Ví dụ: nếu step=”3″, số hợp lệ được nhập vào là -3, 0, 3, 6, …

Mẹo: Thuộc tính step có thể kết hợp với thuộc tính max, min để tạo ra vùng giá trị hợp lệ.

Thuộc tính step được sử dung trong thẻ input với các type có giá trị: number, range, date, datetime, datetime-local, month, time và week.

Thuộc tính step trong thẻ input không được hỗ trợ trong các phiên bản Internet Explorer 9 trở về trước và trong Firefox.

Demo

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4

The post Thuộc tính trong thẻ Input appeared first on WebVN.

]]>
https://webvn.com/thuoc-tinh-trong-the-input/feed/ 0
Thẻ input trong HTML https://webvn.com/the-input-trong-html/ https://webvn.com/the-input-trong-html/#respond Sun, 30 Aug 2015 19:03:59 +0000 https://webvn.com/?p=1940 Ví dụ và cách sử dụng thẻ input với tất cả các kiểu type: text, submit, radio, checkbox, number, date, color, range, month... trong HTML.

The post Thẻ input trong HTML appeared first on WebVN.

]]>
Thuộc tính type trong thẻ input

Bài này sẽ đề cập đến tất cả các giá trị của thuộc tính type trong thẻ input.

Kiểu text

<input type=”text”> tạo ra một dòng giúp người dùng nhập liệu:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:

Tên:

Kiểu password

<input type=”password”> tạo ra một dòng để người dùng nhập mật khẩu:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Tên đăng nhập:

Mật khẩu:

Những ký tự trong ô mật khẩu sẽ được che đi (bằng dấu hoa thị hoặc chấm tròn).

Kiểu submit

<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.

Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.

Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:
Tên:

Nếu thiếu giá trị value trong thẻ input subit, nút sẽ lấy giá trị mặc định:

Demo

Kiểu radio

<input type=”radio”> giúp bạn tạo một nút nhấn radio.

Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Nam

Nữ

Kiểu checkbox

<input type=”checkbox”> giúp bạn tạo một ô tích giá trị.

Người dùng có thể chọn nhiều hơn một giá trị hoặc không chọn giá trị nào.

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Tôi có một chiếc xe đạp

Tôi có một chiếc ô tô

Thẻ <button>

Thẻ <button> được sử dụng để tạo nút nhấn:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Các kiểu input trong HTML5

HTML5 đã thêm những kiểu input sau:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
Những kiểu input không được hỗ trợ trong những trình duyệt cũ sẽ trở thành kiểu input text.

Kiểu number

Thẻ <input type=”number”> tạo ô nhập liệu chỉ có giá trị là số.

Bạn có thể thiết lập điều kiện các số được nhập vào.

Những điều kiện của bạn có được áp dụng hay không thì còn tùy thuộc vào sự hỗ trợ của trình duyệt.

Demo

Điều kiện trong thẻ input

Dưới đây là danh sách các điều kiện phổ biến được sử dụng trong thẻ input (có một vài điều kiện mới thuộc HTML5):

Thuộc tínhMiêu tả
disabledKhóa thẻ input
max HTML5Giá trị lớn nhất có thể nhập vào trong thẻ input
maxlengthSố ký tự tối đa có thể nhập vào trong thẻ input
min HTML5Giá trị nhỏ nhất có thể nhập vào trong thẻ input
pattern HTML5Kiểm tra dự liệu nhập vào có đúng theo định dạng mẫu hay không
readonlyDữ liệu chỉ có tác dụng hiển thị (không thể thay đổi)
required HTML5Ô nhập liệu bắt buộc (không được bỏ trống)
sizeQuy định chiều dài của khung nhập liệu (đơn vị là ký tự, không phải px)
step HTML5Quy định mức nhảy cho ô nhập liệu (dự liệu nhập vào phải là bội số của step)
valueThiết lập giá trị mặc định của ô nhập liệu

Demo

Kiểu date

Thẻ <input type=”date”> tạo ô nhập liệu chỉ có giá trị là ngày tháng.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn ngày tháng trong phần nhập liệu.

Kiểu date chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

Demo

Ngoài ra, bạn có thể thêm một số điều kiện khi nhập ngày tháng:

Demo

Kiểu color

Thẻ <input type=”color”> tạo ô nhập liệu chỉ chứa giá trị là màu.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn màu trong phần nhập liệu.

Kiểu color chưa được hỗ trợ trong trình duyệt Internet Explorer và Safari.

Demo

Kiểu range

Thẻ <input type=”range”> tạo ô nhập liệu chỉ chứa giá trị trong một khoảng nhất định.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy thanh kéo thay vì ô nhập liệu.

Kiểu range không được hỗ trợ trong các trình duyệt Internet Explorer 9 trở về trước.

Demo

Bạn có thể thêm một số điều kiện trong thẻ input range như: min, max, step, value.

Kiểu month

Thẻ <input type=”month”> tạo ô nhập liệu cho phép người dùng chọn tháng và năm.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tháng năm trong phần nhập liệu.

Kiểu month chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

Demo

Kiểu week

Thẻ <input type=”week”> tạo ô nhập liệu cho phép người dùng chọn tuần trong năm.

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn tuần trong năm ở phần nhập liệu.

Kiểu week chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

Demo

Kiểu time

Thẻ <input type=”time”> tạo ô nhập liệu cho phép người dùng chọn thời gian (không có múi giờ).

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian trong phần nhập liệu.

Kiểu time chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

Demo

Kiểu datetime

Thẻ <input type=”datetime”> tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng (có múi giờ).

Kiểu input datetime đã bị gỡ bỏ khỏi chuẩn HTML. Bạn sử dụng kiểu datetime-local để thay thế.

Kiểu datetime-local

Thẻ <input type=”datetime-local”> tạo ô nhập liệu cho phép người dùng chọn thời gian và ngày tháng (không có múi giờ).

Nếu trình duyệt hỗ trợ, bạn sẽ nhìn thấy khung chọn thời gian và ngày tháng trong phần nhập liệu.

Kiểu datetime-local chưa được hỗ trợ trong trình duyệt Internet Explorer và Firefox.

Demo

Kiểu email

Thẻ <input type=”email”> tạo ô nhập liệu chỉ chứa giá trị là email.

Nếu trình duyệt hỗ trợ, địa chỉ email sẽ tự động được kiểm tra khi nhấn submit.

Một số điện thoại thông minh có thể nhận dạng kiểu email  và thêm nút “.com” trên bàn phím ảo.

Kiểu email không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.

Demo

Kiểu search

Thẻ <input type=”search”> tạo ô nhập liệu tìm kiếm.

Kiểu search không được hỗ trợ trong trình duyệt Internet Explorer, Firefox và Opera.

Demo

Kiểu tel

Thẻ <input type=”tel”> tạo ô nhập liệu chỉ chứa giá trị là số điện thoại.

Hiện tại kiểu tel chỉ được hỗ trợ trên trình duyệt Safari 8.

Demo

Kiểu url

Thẻ <input type=”url”> tạo ô nhập liệu chỉ chứa giá trị là địa chỉ web.

Nếu trình duyệt hỗ trợ, địa chỉ sẽ tự động được kiểm tra khi nhấn submit.

Một số điện thoại thông minh có thể nhận dạng kiểu url và thêm nút “.com” trên bàn phím ảo.

Kiểu url không được hỗ trợ trong trình duyệt Internet Explorer 9 (cùng các phiên bản trước đó) và Safari.

Demo

Bài tập

Bài tập 1 Bài tập 2 Bài tập 3 Bài tập 4 Bài tập 5

The post Thẻ input trong HTML appeared first on WebVN.

]]>
https://webvn.com/the-input-trong-html/feed/ 0
Các thẻ trong form HTML https://webvn.com/cac-the-trong-form-html/ https://webvn.com/cac-the-trong-form-html/#respond Tue, 25 Aug 2015 04:46:41 +0000 https://webvn.com/?p=1920 Ví dụ và cách sử dụng toàn bộ thẻ trong form của HTML.

The post Các thẻ trong form HTML appeared first on WebVN.

]]>
Bài này sẽ bao gồm toàn bộ các thẻ trong form HTML.

Thẻ <input>

<input> là thẻ quan trọng nhất trong form.

Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.

Tất cả các kiểu input sẽ được miêu tả trong bài tiếp theo

Thẻ <select>

Thẻ <select> được sử dụng để tạo danh sách thả xuống:

Demo

Thẻ <option> được sử dụng để tạo các lựa chọn trong danh sách.

Mặc định, lựa chọn đầu tiên sẽ được hiển thị khi truy cập trang.

Bạn có thể sử dụng thuộc tính selected để thay đổi lựa chọn mặc định.

Demo

Thẻ <textarea>

Thẻ <textarea> được sử dụng để tạo khung nhập liệu gồm nhiều dòng:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:


Thẻ <button>

Thẻ <button> được sử dụng để tạo nút nhấn:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Các thẻ trong HTML5

HTML5 đã thêm một số thẻ mới vào trong form:

  • <datalist>
  • <keygen>
  • <output>
Mặc định, trình duyệt sẽ không hiển thị những thẻ không được hỗ trợ. Do vậy những thẻ mới này nếu chưa được hỗ trợ trên trình duyệt cũ cũng sẽ không phá hỏng bố cục trang web của bạn.

Thẻ <datalist> trong HTML5

Thẻ <datalist> được sử dụng để tạo các lựa chọn gợi ý cho thẻ <input>.

Người dùng sẽ nhìn thấy một danh sách thả xuống trước khi bắt đầu nhập dữ liệu.

Thuộc tính list trong thẻ <input> phải trùng với thuộc tính id trong thẻ <datalist>.

Demo

Thẻ <keygen> trong HTML5

Mục đích của thẻ <keygen> là xác thực người dùng một cách an toàn.

Thẻ <keygen> sẽ tạo ra một cặp-khóa (key-pair) trong form.

Khi dữ liệu trong form được gửi đi, 2 khóa được tạo ra, một private và một public.

Khóa private được lưu trữ ở trên máy còn khóa public được gửi đến máy chủ.

Khóa public có thể được sử dụng để tạo ra chứng chỉ để xác thực người dùng về sau.

Demo

Thẻ <output> trong HTML5

Thẻ <output> được sử dụng để hiển thị kết quả của một phép tính.

Demo

Các thẻ trong form

Icon html5 = Thẻ mới trong HTML5

ThẻMiêu tả
formTạo một form để người dùng nhập liệu
inputTạo khung dữ liệu để người dùng thao tác
textareaTạo khung nhập liệu nhiều dòng
labelTạo nhãn cho thẻ input
fieldsetNhóm những dữ liệu có liên quan tới nhau vào một form
legendĐặt tên các nhóm dữ liệu trong thẻ fieldset
selectTạo danh sách thả xuống
optgroupTạo nhóm trong danh sách thả xuống
optionTạo lựa chọn trong danh sách thả xuống
buttonTạo một nút nhấn
datalist HTML5Tạo các lựa chọn gợi ý cho thẻ input
keygen HTML5Tạo cặp khóa (key-pair) trong form
output HTML5Hiển thị kết quả của một phép tính

The post Các thẻ trong form HTML appeared first on WebVN.

]]>
https://webvn.com/cac-the-trong-form-html/feed/ 0
Form trong HTML https://webvn.com/form-trong-html/ https://webvn.com/form-trong-html/#respond Mon, 24 Aug 2015 16:14:09 +0000 https://webvn.com/?p=1903 Tổng quan về các thuộc tính và thành phần của form trong HTML. Định nghĩa GET và POST, cách phân biệt và sử dụng GET, POST.

The post Form trong HTML appeared first on WebVN.

]]>
Thẻ form

Thẻ form trong HTML được sử dụng để lấy các thông tin do người dùng nhập vào.

Để tạo một form trong HTML, chúng ta sử dụng thẻ <form> như sau:

<form>
.
Các thành phần trong form
.
</form>

Thẻ <input>

<input> là thẻ quan trọng nhất trong form.

Cùng một thẻ <input> nhưng tùy thuộc vào thuộc tính type mà cho ra rất nhiều cách hiển thị cũng như sự tương tác khác nhau với người dùng.

Đây là những kiểu type mà chúng ta sẽ sử dụng trong bài:

KiểuMiêu tả
textÔ để người dùng nhập liệu
radioTạo một nút radio (nhiều chọn một)
submitTạo một nút submit (gửi thông tin từ form đi)
Bạn sẽ được học thêm rất nhiều kiểu type khác trong những bài học sau.

Kiểu Text

<input type=”text”> giúp bạn tạo một khung để người dùng nhập dữ liệu:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:

Tên:

Lưu ý: Mặc định, bản thân thẻ form không hiển thị ra ngoài và chiều dài khung nhập liệu kiểu text là 20 ký tự.

Kiểu radio

<input type=”radio”> giúp bạn tạo một nút nhấn radio.

Nút radio chỉ cho phép người dùng chọn MỘT trong số các lựa chọn:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Nam

Nữ

Kiểu submit

<input type=”submit”> giúp bạn tạo một nút nhấn để gửi thông tin mà người dùng đã nhập vào.

Những thông tin này sau đó sẽ được gửi tới máy chủ để xử lý và trả về kết quả.

Thuộc tính action của form sẽ quyết định thông tin được gửi đi đâu:

Demo

Khi hiển thị trên trình duyệt, ví dụ trên nhìn sẽ tương tự như thế này:

Họ:
Tên:

Thuộc tính action

Thuộc tính action xác định địa chỉ mà thông tin sẽ được gửi đi để xử lý.

Cách phổ biến nhất để người dùng gửi thông tin từ form lên máy chủ là nhấn vào nút submit.

Bình thường, thông tin sẽ được gửi tới một trang cụ thể trên máy chủ.

Trong ví dụ ở trên, trang xử lý đã được quy định trong thẻ form:

<form action="/demo/action_page.php">

Nếu thuộc tính action không được thiết lập, mặc định thông tin sẽ được gửi tới trang hiện tại.

Thuộc tính method

Thuộc tính method quy định phương thức (POST hoặc GET) dữ liệu sẽ được chuyển đi khi người dùng nhấn nút submit trong form:

<form action="/demo/action_page.php" method="GET">

hoặc

<form action="/demo/action_page.php" method="POST">

Khi nào sử dụng GET

GET là phương thức mặc định, sử dụng khi form không có chứa những thông tin quan trọng, ví dụ như khi tìm kiếm.

Khi bạn sử dụng GET, toàn bộ dữ liệu trong form sẽ hiển thị trên thanh địa chỉ:

action_page.php?firstname=Nguyen&lastname=A

Phương thức GET thích hợp nhất với lượng dữ liệu nhỏ. Kích thước giới hạn được thiết lập bởi trình duyệt.

Khi nào sử dụng POST

Bạn nên sử dụng phương thức POST khi form dùng để cập nhật dữ liệu hoặc chứa những thông tin nhạy cảm (như mật khẩu).

POST bảo mật hơn vì dữ liệu chuyển đi không hiển thị trên thanh địa chỉ.

Thuộc tính name

Để thông tin gửi đi chính xác, mỗi thẻ input cần phải thiết lập thuộc tính name.

Trong ví dụ dưới đây, khi submit chỉ có dữ liệu có name là “lastname” được gửi đi:

Demo

Phân nhóm dữ liệu với thẻ <fieldset>

Thẻ <fieldset> dùng để nhóm những dữ liệu có liên quan tới nhau vào một form.

Thẻ <legend>dùng để đặt tên các nhóm dữ liệu trong thẻ <fieldset>.

Demo

Các thuộc tính khác trong form

Thẻ <form> trong HTML khi thiết lập hết tất cả các thuộc tính sẽ giống như dưới đây:

<form action="/demo/action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
các thành phần trong form
.
</form>

Danh sách các thuộc tính trong form:

Thuộc tínhMiêu tả
accept-charsetQuy định bộ mã ký tự khi gửi thông tin đi (mặc định: sử dụng mã ký tự của trang).
actionQuy định địa chỉ (url) nhận dữ liệu khi submit form (mặc định: gửi tới trang hiện tại).
autocompleteDùng để lưu những dự liệu đã nhập, lần sau bạn chỉ cần chọn dữ liệu thay vì nhập lại từ đâu (mặc định: on).
enctypeQuy định kiểu mã hóa khi gửi dữ liệu (mặc định: url-encoded).
methodQuy định phương thức gửi dữ liệu khi submit form (mặc định: GET).
nameQuy định tên để nhận dạng dữ liệu.
novalidateThông báo với trình duyệt không cần kiểm tra tính hợp lệ của dữ liệu trong form.
targetQuy định cửa sổ trình duyệt sẽ nhận dữ liệu (mặc định:
_self).

The post Form trong HTML appeared first on WebVN.

]]>
https://webvn.com/form-trong-html/feed/ 0