Biểu mẫu HTML W3schools

I) Biểu mẫu HTML Ví dụ biểu mẫu HTML First name: Mickey Last name: Mouse Submit Phần tử Phần tử HTML định nghĩa biểu mẫu sử dụng để thu thập liệu nhập người dùng: form elements Biểu mẫu HTML chứa phần tử biểu mẫu Các phần tử biểu mẫu loại yếu tố đầu vào khác nhau, trường văn bản, hộp kiểm, nút radio, nút gửi Phần tử Phần tử phần tử biểu mẫu quan trọng Phần tử hiển thị theo nhiều cách, tùy thuộc vào thuộc tính type Dưới số ví dụ: Kiểu Sự miêu tả Xác định trường nhập văn dòng Xác định nút radio (để chọn nhiều lựa chọn) Xác định nút gửi (để gửi biểu mẫu) Bạn tìm hiểu nhiều kiểu đầu vào sau hướng dẫn Nhập văn xác định trường nhập dòng cho nhập văn : Thí dụ First name: Last name: Đây cách trơng giống trình duyệt: Tên đầu tiên: Họ: Lưu ý: Bản thân biểu mẫu không hiển thị Cũng lưu ý chiều rộng mặc định trường văn 20 ký tự Nhập nút radio định nghĩa nút radio Nút radio cho phép người dùng chọn MỘT số lượng lựa chọn giới hạn: Thí dụ Ma le Female Other Đây cách mã HTML hiển thị trình duyệt: Nam giới Giống Khác Nút Gửi xác định nút để gửi liệu biểu mẫu tới trình xử lý biểu mẫu Trình xử lý biểu mẫu thường trang máy chủ với kịch để xử lý liệu đầu vào Trình xử lý biểu mẫu định thuộc tính hành động biểu mẫu : Thí dụ First name: Last name: Đây cách mã HTML hiển thị trình duyệt: Tên đầu tiên: Mickey Họ: Mouse G?i di Thuộc tính hành động Các actionthuộc tính định nghĩa hành động thực biểu mẫu gửi Thông thường, liệu biểu mẫu gửi đến trang web máy chủ người dùng nhấp vào nút gửi Trong ví dụ trên, liệu biểu mẫu gửi đến trang máy chủ có tên "/action_page.php" Trang chứa kịch phía máy chủ xử lý liệu biểu mẫu: Nếu actionthuộc tính bị bỏ qua, hành động đặt thành trang Thuộc tính mục tiêu Các targetthuộc tính xác định kết trình mở tab trình duyệt mới, khung hình, cửa sổ hành Giá trị mặc định " _self" có nghĩa biểu mẫu gửi cửa sổ Để làm cho kết biểu mẫu mở tab trình duyệt mới, sử dụng giá trị " _blank": Thí dụ Các giá trị pháp lý khác " _parent", " _top" tên đại diện cho tên khung nội tuyến Thuộc tính phương thức Các methodthuộc tính quy định cụ thể phương thức HTTP ( GET POST ) sử dụng nộp liệu có dạng: Thí dụ là: Thí dụ Khi sử dụng GET? Phương thức mặc định gửi liệu biểu mẫu GET Tuy nhiên, GET sử dụng, liệu biểu mẫu gửi hiển thị trường địa trang : /action_page.php?firstname=Mickey&lastname=Mouse Ghi GET: • Nối thêm liệu biểu mẫu vào URL cặp tên / giá trị • Độ dài URL bị giới hạn (khoảng 3000 ký tự) • Khơng sử dụng GET để gửi liệu nhạy cảm! (sẽ hiển thị URL) • Hữu ích cho việc gửi biểu mẫu, người dùng muốn đánh dấu kết • GET tốt cho liệu khơng an toàn, chuỗi truy vấn Google Khi nên sử dụng POST? Luôn sử dụng POST liệu biểu mẫu chứa thông tin nhạy cảm thông tin cá nhân Phương thức POST không hiển thị liệu biểu mẫu gửi trường địa trang Ghi POST: • POST khơng có giới hạn kích thước sử dụng để gửi lượng liệu lớn • Khơng thể đánh dấu lần gửi biểu mẫu POST Tên thuộc tính Mỗi trường nhập phải có namethuộc tính cần gửi Nếu namethuộc tính bị bỏ qua, liệu trường nhập khơng gửi Ví dụ gửi trường nhập "Họ": Thí dụ First name: Last name: 10 Dữ liệu biểu mẫu nhóm với Phần tử sử dụng để nhóm liệu có liên quan biểu mẫu Phần tử xác định thích cho phần tử Thí dụ Personal information: First name: Last name: II) Các phần tử biểu mẫu HTML Phần tử Phần tử biểu mẫu quan trọng phần tử Phần tử hiển thị theo nhiều cách, tùy thuộc vào type thuộc tính Thí dụ Nếu typethuộc tính bị bỏ qua, trường nhập nhận loại mặc định: "văn bản" Tất kiểu đầu vào khác đề cập chương Phần tử Phần tử xác định danh sách thả xuống : Thí dụ Volvo Saab Fiat Audi Các phần tử định nghĩa tùy chọn chọn Theo mặc định, mục danh sách thả xuống chọn Để xác định tùy chọn chọn trước, thêm selectedthuộc tính vào tùy chọn: Thí dụ Fiat Giá trị hiển thị: Sử dụng sizethuộc tính để định số lượng giá trị hiển thị: Thí dụ Volvo Saab Fiat Audi Cho phép nhiều lựa chọn: Sử dụng multiplethuộc tính phép người dùng chọn nhiều giá trị: Thí dụ Volvo Saab Fiat Audi Phần tử Phần tử xác định trường nhập nhiều dòng ( vùng văn ): Thí dụ The cat was playing in the garden Các rowsthuộc tính xác định số nhìn thấy dòng vùng văn Các colsthuộc tính xác định chiều rộng hữu hình vùng văn Đây cách mã HTML hiển thị trình duyệt: Các phép người dùng lựa chọn thời gian (không múi giờ) Tùy thuộc vào hỗ trợ trình duyệt, chọn thời gian hiển thị trường nhập Thí dụ Select a time: 21 Url loại nhập liệu Các được sử dụng cho lĩnh vực đầu vào mà nên chứa địa URL Tùy thuộc vào hỗ trợ trình duyệt, trường url xác nhận tự động gửi Một số điện thoại thông minh nhận dạng loại url thêm ".com" vào bàn phím để khớp với đầu vào url Thí dụ Add your homepage: 22 Loại đầu vào tuần Các phép người dùng lựa chọn tuần năm Tùy thuộc vào hỗ trợ trình duyệt, chọn ngày hiển thị trường nhập Thí dụ Select a week: IV) Thuộc tính đầu vào HTML: Thuộc tính giá trị Các valuethuộc tính xác định giá trị ban đầu cho lĩnh vực đầu vào: Thí dụ First name: Thuộc tính đọc Các readonlythuộc tính xác định lĩnh vực đầu vào đọc (khơng thể thay đổi): Thí dụ First name: Thuộc tính bị vơ hiệu hóa Các disabledthuộc tính xác định lĩnh vực đầu vào bị vơ hiệu hóa Trường nhập bị vơ hiệu hóa khơng sử dụng khơng thể nhấp giá trị khơng gửi gửi biểu mẫu: Thí dụ First name: Kích thước thuộc tính Các sizethuộc tính xác định kích thước (bằng ký tự) cho lĩnh vực đầu vào: Thí dụ First name: Thuộc tính maxlength Các maxlengththuộc tính xác định tối đa cho phép chiều dài cho lĩnh vực đầu vào: Thí dụ First name: Với maxlengththuộc tính, trường nhập khơng chấp nhận nhiều số ký tự cho phép Các maxlengththuộc tính khơng cung cấp thơng tin phản hồi Nếu bạn muốn cảnh báo người dùng, bạn phải viết mã JavaScript Lưu ý: Các hạn chế đầu vào dễ dàng JavaScript cung cấp nhiều cách để thêm đầu vào bất hợp pháp Để hạn chế đầu vào cách an tồn, phải người nhận (máy chủ) kiểm tra! Thuộc tính HTML5 HTML5 thêm thuộc tính sau cho : • tự động hồn thành • tự động lấy nét • hình thức • định hình • formenctype • formmethod • formnovalidate • mục tiêu đích • chiều cao chiều rộng • danh sách • tối thiểu tối đa • nhiều • mẫu (regexp) • trình giữ chỗ • cần thiết • bậc thang thuộc tính sau cho : • tự động hồn thành • làm Thuộc tính tự động hồn thành Các autocompletethuộc tính xác định liệu trường mẫu đầu vào nên có autocomplete bật tắt Khi bật tự động hồn tất, trình duyệt tự động hồn tất giá trị đầu vào dựa giá trị mà người dùng nhập trước Mẹo: Có thể tự động hoàn thành "bật" cho biểu mẫu "tắt" cho trường nhập cụ thể ngược lại Các autocompletethuộc tính làm việc với và sau loại: văn bản, tìm kiếm, url, tel, email, mật khẩu, datepickers, phạm vi, màu sắc Thí dụ Biểu mẫu HTML có tự động điền (và tắt cho trường nhập): First name: Last name: Email: Mẹo: Trong số trình duyệt, bạn cần phải kích hoạt chức tự động hồn tất để chức hoạt động Thuộc tính novalidate Các novalidatethuộc tính thuộc tính Khi có mặt, novalidate định liệu biểu mẫu không xác thực gửi Thí dụ Cho biết biểu mẫu khơng xác thực gửi: E-mail: Thuộc tính lấy nét tự động Các autofocusthuộc tính xác định trường nhập tự động nên tập trung tải trang Thí dụ Để trường nhập "Tên đầu tiên" tự động lấy tiêu điểm tải trang: First name: 10 Biểu mẫu Thuộc tính Các formthuộc tính định nhiều hình thức yếu tố thuộc Mẹo: Để tham khảo nhiều biểu mẫu, sử dụng danh sách id phân tách dấu cách Thí dụ Trường nhập nằm bên ngồi biểu mẫu HTML (nhưng phần biểu mẫu): First name: Last name: 11 Thuộc tính định dạng Các formactionthuộc tính xác định URL tập tin xử lý việc kiểm sốt đầu vào biểu mẫu gửi Thuộc tính formaction ghi đè thuộc tính action phần tử Thuộc tính formaction sử dụng với type="submit"và type="image" Thí dụ Biểu mẫu HTML có hai nút gửi, với hành động khác nhau: First name: Last name: 12 Thuộc tính formenctype Các formenctypethuộc tính quy định cụ thể liệu mẫu nên mã hóa gửi (chỉ dành cho hình thức với method = "post") Các formenctypethuộc tính ghi đè thuộc tính enctype phần tử Các formenctypethuộc tính sử dụng với type="submit"và type="image" Thí dụ Gửi biểu mẫu liệu mã hóa mặc định (nút gửi đầu tiên) mã hóa dạng "multipart / form-data" (nút gửi thứ hai): First name: 13 Thuộc tính formmethod Các formmethodthuộc tính định nghĩa phương thức HTTP để gửi form-data đến URL hành động Các formmethodthuộc tính ghi đè thuộc tính phương pháp phần tử Các formmethodthuộc tính sử dụng với type="submit"và type="image" Thí dụ Nút gửi thứ hai ghi đè phương thức HTTP biểu mẫu: First name: Last name: 14 Thuộc tính formnovalidate Các formnovalidatethuộc tính ghi đè thuộc tính novalidate phần tử Các formnovalidatethuộc tính sử dụng với type="submit" Thí dụ Biểu mẫu có hai nút gửi (có khơng có xác thực): E-mail: 15 Thuộc tính targettarget Các formtargetthuộc tính định tên hay từ khóa cho biết nơi để hiển thị câu trả lời nhận sau nộp mẫu đơn Các formtargetthuộc tính ghi đè thuộc tính mục tiêu phần tử Các formtargetthuộc tính sử dụng với type="submit"và type="image" Thí dụ Biểu mẫu có hai nút gửi, với cửa sổ mục tiêu khác nhau: First name: Last name: 16 Chiều cao chiều rộng Thuộc tính Các thuộc tính heightvà widthxác định chiều cao chiều rộng phần tử Ln định kích thước hình ảnh Nếu trình duyệt khơng biết kích thước, trang nhấp nháy tải hình ảnh Thí dụ Xác định hình ảnh làm nút gửi, với thuộc tính chiều cao chiều rộng: 17 Danh sách Thuộc tính Các listthuộc tính dùng để yếu tố có chứa tùy chọn xác định trước cho phần tử Thí dụ Phần tử với giá trị xác định trước : 18 Thuộc tính tối thiểu tối đa Các thuộc tính minvà maxcác thuộc tính xác định giá trị tối thiểu tối đa cho phần tử Các thuộc tính minvà maxcác thuộc tính làm việc với kiểu đầu vào sau: số, phạm vi, ngày, giờ-giờ địa phương, tháng, thời gian tuần Thí dụ Các yếu tố có giá trị tối thiểu tối đa: Enter a date before 1980-01-01: Enter a date after 2000-01-01: Quantity (between and 5): 19 Thuộc tính nhiều Các multiplethuộc tính xác định người dùng phép nhập nhiều giá trị phần tử Các multiplethuộc tính làm việc với loại sau vào: Địa email tập tin Thí dụ Trường tải lên tệp chấp nhận nhiều giá trị: Select images: 20 Thuộc tính mẫu Các patternthuộc tính định biểu thức quy mà giá trị phần tử kiểm tra đối chiếu Các patternthuộc tính làm việc với loại đầu vào sau: văn bản, tìm kiếm, url, tel, email mật Mẹo: Sử dụng thuộc tính tiêu đề chung để mơ tả mẫu để giúp người dùng Mẹo: Tìm hiểu thêm biểu thức quy hướng dẫn JavaScript chúng tơi Thí dụ Trường nhập chứa ba chữ (khơng có số ký tự đặc biệt): Country code: 21 Phần giữ chỗ Thuộc tính Các placeholderthuộc tính định gợi ý mơ tả giá trị kỳ vọng lĩnh vực đầu vào (một giá trị mẫu mô tả ngắn định dạng) Gợi ý hiển thị trường nhập trước người dùng nhập giá trị Các placeholderthuộc tính làm việc với loại đầu vào sau: văn bản, tìm kiếm, url, tel, email mật Thí dụ Trường nhập có văn trình giữ chỗ: 22 Thuộc tính bắt buộc Các requiredthuộc tính xác định lĩnh vực đầu vào phải điền đầy đủ trước nộp mẫu đơn Các requiredthuộc tính làm việc với loại sau vào: văn bản, tìm kiếm, url, tel, email, mật khẩu, hái ngày, số, hộp kiểm, radio, tập tin Thí dụ Trường nhập yêu cầu: Username: 23 Thuộc tính bước Các stepthuộc tính xác định khoảng số pháp lý cho phần tử Ví dụ: bước = "3", số hợp pháp -3, 0, 3, 6, v.v Mẹo: Thuộc tính bước sử dụng với thuộc tính tối đa tối thiểu để tạo phạm vi giá trị pháp lý Các stepthuộc tính làm việc với loại đầu vào sau: số lượng, phạm vi, ngày, datetime-địa phương, tháng, thời gian tuần Thí dụ Trường nhập có khoảng thời gian pháp lý định: ... nghĩa nút để gửi liệu biểu mẫu tới trình xử lý biểu mẫu Trình xử lý biểu mẫu thường trang máy chủ với kịch để xử lý liệu đầu vào Trình xử lý biểu mẫu định action thuộc tính biểu mẫu : Thí dụ