Form trong HTML | 190 thẻ HTML hay nhất form trong html tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập...
http://vietjack.com/html/index.jsp Copyright © vietjack.com Form HTML Các mẫu form HTML yêu cầu bạn muốn thu thập vài liệu từ người sử dụng Ví dụ, người sử dụng đăng ký, bạn muốn thu thập thơng tin tên, địa email, thẻ tín dụng… Một mẫu form nhận liệu đầu vào từ site người sử dụng sau thơng báo tới ứng dụng back-end CGI, ASP Script PHP Script… Có nhiều phần tử form có sẵn trường text, trường textarea, menu, checkbox … Thẻ sử dụng để tạo Form HTML thẻ có cú pháp: input, textarea phần tử font, chẳng hạn Các thuộc tính thẻ form HTML Ngồi thuộc tính thơng thường, sau thuộc tính form hay sử dụng: Thuộc tính Miêu tả action Ứng dụng quản trị back-end sẵn sàng để xử lý liệu từ site khách method Phương thức để tải liệu lên Thường sử dụng GET POST target Xác định cửa sổ frame để hiển thị kết Thuộc tính nhận giá trị _blank, _self, _parent… enctype Bạn sử dụng thuộc tính để xác định cách mà trình duyệt mã hóa liệu trước gửi tới Server Các giá trị nhận là: • application/x-www-form-urlencoded - Đây phương thức tiêu chuẩn mà hầu hết form sử dụng http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright â vietjack.com mutlipart/form-data - Nó sử dụng bạn muốn tải lên liệu nhị phân mẫu form file ảnh, word… Một số form hữu ích HTML Có kiểu kiểm sốt form khác mà bạn sử dụng để thu thập liệu: • Text Input • Checkbox • Radio Box • Select Box • File Select Box • Submit • Text Input HTML Có kiểu Text Input sử dụng form: • Text Input dòng đơn - Sử dụng cho mục mà yêu cầu dòng liệu đầu vào người sử dụng hộp tìm kiếm tên Form tạo cách sử dụng thẻ • Password Input - Đây Text Input dòng đơn giấu ký tự sau người sử dụng nhập Form tạo cách sử dụng thẻ • Text Input đa dòng - : Được sử dụng người sử dụng u cầu cung cấp thơng tin mà nhiều dòng Form tạo cách sử dụng thẻ http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Text Input dòng đơn HTML Ví dụ Dưới ví dụ việc sử dụng Text Input có dòng sử dụng để nhận tên họ Vi du Text Input HTML First name: Last name: Nó tạo kết sau: First name: Last name: Các thuộc tính Dưới danh sách thuộc tính thẻ để tạo trường văn bản: Thuộc tính Miêu tả type Xác định kiểu liệu nhập vào với Text Input thuộc tính thiết lập text name Xác định tên cho trường gửi tới Server để xác định nhận giá trị value Xác định giá trị form size Cho phép xác định độ rộng ký tự Text Input maxlength Cho phép xác định số lượng ký tự lớn mà người sử dụng nhập vào Text Input http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Password Input HTML Tương tự Input đơn dòng, giấu ký tự sau người sử dụng nhập mật vào Form tạo cách sử dụng thẻ thuộc tính type thiết lập password Ví dụ Sau ví dụ đơn giản Password Input sử dụng để nhận mật người dùng: Ví dụ Password Input HTML User ID : Password: Kết là: User ID : Password: Các thuộc tính Dưới danh sách thuộc tính thẻ để tạo trường mật khẩu: Thuộc tính Miêu tả type Xác định kiểu liệu nhập vào với Password Input thuộc tính thiết lập password name Xác định tên trường gửi tới Server để xác định nhận giá trị value Xác định giá trị liệu đầu vào ban đầu form size Xác định độ rộng ký tự maxlength Xác định số lượng ký tự lớn mà người sử dụng nhập vào form http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Text Input đa dòng HTML Form tạo cách sử dụng thẻ , sử dụng người sử dụng yêu cầu cung cấp thông tin chi tiết mà có độ dài nhiều dòng Ví dụ Dưới ví dụ đơn giản Text Input đa dòng: Vi du Text Input đa dong Mieu ta: Ban nhap phan mieu ta tai day Nó tạo kết sau: Mieu ta: Các thuộc tính Sau thuộc tính thẻ Thuộc tính Miêu tả name Cung cấp tên cho trường gửi tới Server để xác định nhận giá trị rows Xác định số hàng cols Xác định số cột Checkbox HTML Checkbox sử dụng có nhiều tùy chọn yêu cầu để chọn Checkbox tạo cách sử dụng thẻ thuộc tính type thiết lập làcheckbox http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Ví dụ Sau ví dụ cho Form có hai Checkbox: Vi du Checkbox HTML Maths Physics Nó tạo Form sau: Maths Physics Các thuộc tính Sau thuộc tính thẻ Thuộc tính Miêu tả type Xác định kiểu liệu nhập vào với Checkbox thuộc tính thiết lập checkbox name Xác định tên trường gửi tới Server để xác định nhận giá trị value Các giá trị sử dụng Checkbox chọn checked Thiết lập checked bạn muốn chọn theo mặc định Radio Button HTML Radio Button sử dụng nhiều tùy chọn, có tùy chọn yêu cầu để chọn Radio Button tạo cách sử dụng thẻ thuộc tính type thiết lập radio Ví dụ Dưới ví dụ cho Form với Radio Button: Vi du Radio Box HTML Maths Physics http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Kết là: Maths Physics Các thuộc tính Sau thuộc tính cho Radio Button Thuộc tính Miêu tả type Xác định kiểu liệu nhập vào với Radio Button thuộc tính thiết lập radio name Xác định tên trường gửi tới Server để xác định nhận giá trị value Xác định giá trị sử dụng Radio Button chọn checked Thiết lập checked bạn muốn chọn theo mặc định Select Box HTML Một Select Box cung cấp danh sách liệt kê từ xuống (hộp drop down) tùy chọn đa dạng form, người sử dụng chọn nhiều lựa chọn Ví dụ Dưới ví dụ Form với hộp drop down Vi du Select Box HTML Maths Physics Đoạn mã cho kết sau: Các thuộc tính Sau danh sách thuộc tính quan trọng thẻ : http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Thuộc tính Miêu tả name Xác định tên gửi tới Server để xác định nhận giá trị size Được sử dụng để hiển thị hộp danh sách có multiple Nếu thiết lập multiple, cho phép người sử dụng lựa chọn nhiều mục menu Bảng thuộc tính quan trọng thẻ : Thuộc tính Miêu tả value Giá trị sử dụng lựa chọn hộp chọn selected Xác định tùy chọn giá trị lựa chọn trang web tải label Gán nhãn cho tùy chọn File Upload Box HTML Nếu bạn muốn cho phép người sử dụng tải file lên trang bạn, bạn cần sử dụng File Upload Box File Upload Box tạo cách sử dụng phần tử thuộc tính type để thiết lập file Ví dụ Ví dụ Form với File Upload Box: Vi du File Upload Box HTML Kết tạo sau: http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 http://vietjack.com/html/index.jsp Copyright © vietjack.com Các thuộc tính Bảng danh sách thuộc tính quan trọng File Upload Box: Thuộc tính Miêu tả name Xác định tên trường gửi tới Server để xác nhận nhận giá trị accept Xác định kiểu file mà Server chấp nhận Button HTML Có nhiều cách HTML để tạo nút nhấn vào (clickable) Bạn sử dụng thẻ để tạo nút thiết lập thuộc tính type button Thuộc tínhtype nhận giá trị sau: Kiểu Miêu tả submit Tạo nút mà tự động chấp nhận form reset Tạo nút mà tự động reset form giá trị ban đầu button Tạo nút sử dụng để kích hoạt Client-side người sử dụng nhấn vào nút image Tạo nút nhấn sử dụng hình ảnh để làm cho nút Ví dụ Dưới ví dụ Form với kiểu Button: Vi du button HTML Đoạn code tạo kết sau: The linked image cannot be displayed The file may have been moved, renamed, or deleted Verify that the link points to the correct file and location Hidden Form HTML Hidden Form sử dụng để ẩn liệu bên trang sau đẩy tới Server Form ẩn bên code không xuất trang Ví dụ, Hidden Form sử dụng để giữ số trang Khi người sử dụng nhấn vào trang (next page) giá trị Hidden Form gửi tới Server định trang hiển thị trang Ví dụ Dưới đoạn code cách sử dụng Hidden Form: Vi du Hidden Form HTMLDay la trang so 10
Nó tạo kết sau: Day la trang so 10 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí Page 1 ... Hidden Form gửi tới Server định trang hiển thị trang Ví dụ Dưới đoạn code cách sử dụng Hidden Form: Vi du Hidden Form HTML< /title>Day... Ví dụ Form với File Upload Box: Vi du File Upload Box HTML< /title> < /form> ... Vi du Text Input HTML< /title> First name: Last name: < /form>