Thuộc tính method trong đối tượng form có tác dụng gì ?
Trong bài này mình sẽ giới thiệu đến các bạn sự kiện submit form trong Javascript, đây là sự kiện giúp bạn kiểm soát được hành động submit form của người dùng khi họ click vào button submit. Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức. Khi gửi dữ liệu lên server thì thường ta phải kiểm tra định dạng dữ liệu mà người dùng nhập vào có phù hợp hay không, điều này giúp giảm tải ở phía server trong một số trường hợp. Ví dụ bạn tạo một form login, nếu bạn không dùng Javascript để yêu cầu người dùng nhập đủ thông tin tên đăng nhập và mật khẩu thì rất dễ bị họ submit liên tục, điều này tạo ra một sức ép về phía server. Đương nhiên phía server phải rtải qua một bước validate data nữa rồi mới cập nhật vào cơ sở dữ liệu. 1. Khai báo sự kiện submit bằng thẻ HTML formThẻ HTML form có sự kiện onsubmit, đây chính là nơi mà bạn gọi đến hàm xử lý trước khi hành động submit xảy ra. Bài viết này được đăng tại [free tuts .net] Lưu ý rằng hàm validate phải trả về kiểu boolean nhé:
Bạn hãy thử tạo một input submit bên trong thẻ form, sau đó thiết lập code ở onsubmit là return false thì khi bạn click vào button submit đó sẽ không có hiệu ứng gì. Nhưng khi bạn đổi sang return true thì sẽ có hiệu ứng ngay.
2. Gọi đến một hàm Javascript khi submitCó ba cách để gọi đến một hàm Javascript khi submit form như sau. Cách 1: Sử dụng HTML như ở phần 1. 3. Dùng Javascript để submit formNgoài cách sử dụng một thẻ input submit thì bạn cũng có thể sử dụng Javascript để thực hiện một hành động submit form. Giả sử mình có thẻ input button như sau: Nếu click vào button này thì sẽ không xảy ra sự kiện submit form, bởi đây là một button chứ khong phải button submit. Bây giờ ta sẽ bổ đoạn code khi click vào button đó thì gọi đến phương thức submit() của form để kích hoạt sự kiện. Bạn hãy thử click vào button thì sẽ thấy xảy ra sự kiện submit form. Như vậy là mình đã hướng dẫn xong cách sử dụng Javascript để submit form, cũng như các thao tác thường gặp khi làm việc với form trong Javascript.
Đối với một website bên cạnh việc sở hữu thiết kế đẹp mắt, nội dung hấp dẫn để thu hút, phục vụ khách hàng thì việc thu thập dữ liệu, lắng nghe ý kiến, mong muốn của khách cũng là một phần quan trọng góp phần nâng cao trải nghiệm người dùng. Chính vì lí do đó thẻ form ra đời. Vậy thẻ form trong html có gì đặc biệt, nó có khó không? Chúng ta cùng nhau tìm hiểu nhé! 1. Cấu trúc cơ bản của một thẻ formVề cơ bản thẻ form có cấu trúc như sau: <form action = "Chỉ ra địa chỉ URL mà dữ liệu của form gửi đến" method = "GET|POST"> form>Trong đó:
Mỗi một trang web đều có những form khác nhau từ tìm kiếm đến đăng nhập, đăng kí...Form trong HTML có chứa các phần tử hình thức cho phép chúng ta thực hiện điều đó ( là các kiểu phần tử lấy dữ liệu đầu vào như điền vào trường văn bản, hộp checkbox, nút bấm, nút gửi…). Bây giờ chúng ta sẽ lần lượt tìm hiểu các thẻ trong form. 2. Nhóm thẻ trong HTMLĐây là phần tử quan trọng nhất của form, nó có thể hiển thị theo nhiều cách, tùy vào kiểu thuộc tính mà chúng ta mong muốn. Dữ liệu đầu vào là văn bảnKhi thuộc tính type="text", nó sẽ tạo ra một một dòng. để nhập dữ liệu dưới dạng văn bản. Ví dụ: Kết quả: Trong đó
Dữ liệu đầu vào là passwordKhi thuộc tính type="password", nó sẽ tạo ra một một dòng để nhập dữ liệu dưới dạng văn bản giống như text. Tuy nhiên chúng được ẩn theo để nếu có ai đó đang ở bên cạnh, họ không thể nhìn thấy dữ liệu nhạy cảm như mật khẩu. Ví dụ: <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p>Username: <input type="text" name="Username" size="15" maxlength="30" /> p> <p>Password: <input type="Password" name="password" size="15" maxlength="30" /> p> form> body> html>Kết quả: Radio buttonNếu bạn không muốn người dùng nhập mà muốn họ chọn một trong các phương án bạn đưa ra thì radio button là một lựa chọn hợp lí: <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p>: <br /> <input type="radio" name="color" value="rock" /> Rock <input type="radio" name="color" value="pop" /> Pop <input type="radio" name="color" value="jazz" /> Jazz p> form> body> html>Kết quả:
CheckboxRadio button dùng để chọn chỉ một mục trong nhiều lựa chọn còn checkbox thì ngược lại, nó cho phép bạn có thể chọn 1 hoặc chọn tất cả các lựa chọn. <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p>Hãy chọn loại nhạc bạn thích nhất: <br /> <input type="checkbox" name="color" value="rock" /> Rock <input type="checkbox" name="color" value="pop" /> Pop <input type="checkbox" name="color" value="jazz"/> Jazz p> form> body> html>3. Thẻ textareaThẻ được sử dụng để tạo ra một ô cho phép bạn nhập văn bản nhiều dòng. Có thể nhập đoạn văn bản dài vô hạn. <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p> Hãy viết cảm nghĩ của bạn sau khi học ở SUNTECHp> <textarea name="comments" cols="20" rows="4">Viết ở đây...textarea> form> body> html>Kết quả: Thuộc tính rows và cols được dùng để xác định kích thước của vùng văn bản. 4. Tạo danh sách sổ xuống Drop Down List BoxDanh sách sổ xuống cho phép người dùng chọn một tùy chọn từ danh sách. Thẻ <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p>Bạn dùng thiết bị nào để nghe nhạcp> <select name="devices"> <option value="ipod">iPodoption> <option value="radio">Radiooption> <option value="computer">Computeroption> select> form> body> html>5. Upload file và SubmitFacebook hay các trang web khác cho phép bạn tải lên một tệp (ví dụ: hình ảnh, video, mp3 hoặc PDF). Để cho người dùng tải lên bạn cần làm như sau: <html> <head> <title>Thẻ Form HTMLtitle> <meta charset="utf-8"> head> <body> <form action="https://www.suntech.edu.vn/login.php"> <p>Tải lên ảnh đại diện của bạnp> <input type="file" name="photo" /><br /> <input type="submit" value="Upload" /> form> body> html>Khi người dùng nhấp vào nút choose file, một cửa sổ mở ra cho phép bạn chọn một tệp từ máy tính của bạn để tải lên trang web. Upload được sử dụng để gửi file bạn vừa tải lên tới máy chủ. Vậy là trong bài học này chúng ta đã tìm hiểu được cách thiết kế một form trong một website rồi đúng không nào. Chúng tôi đã xây dựng bộ video giúp bạn hoàn thiện các kiến thức về HTML,... bạn có thể xem video hướng dẫn tại đây. Chúc các bạn học tốt! |