1. Công dụng của Form
Mỗi khi 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, thẻ tín dụng, v.v. chúng ta sẽ sử dụng Form.
Một biểu mẫu sẽ lấy thông tin đầu vào từ khách truy cập trang web và sau đó sẽ đăng nó lên một ứng dụng back-end chẳng hạn như CGI, ASP Script hoặc PHP script, v.v. Ứng dụng back-end sẽ thực hiện xử lý bắt buộc đối với dữ liệu đã truyền dựa trên logic nghiệp vụ đã xác định bên trong ứng dụng.
Trong Form có sẵn nhiều thành phần biểu mẫu khác nhau như trường văn bản, trường vùng văn bản, menu thả xuống, nút radio, hộp kiểm, v.v.
2. Cú pháp
<form action = “Script URL” method = “GET|POST”>
Các phần tử như : input, textarea, Radio…
</form>
3. Khai báo các thuộc tính trong Form
Thuộc tính biểu mẫu được sử dụng thường xuyên nhất
- Action: Tập lệnh phụ trợ đã sẵn sàng để xử lý dữ liệu đã chuyển.
- Method: Phương thức được sử dụng để tải lên dữ liệu. Được sử dụng thường xuyên nhất là các phương thức GET và POST.
- Target: Chỉ định cửa sổ hoặc khung đích 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, _self, _parent, v.v.
- 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-urlencoded :Đây là phương pháp 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.
4. Tạo các loại điều khiển trên Form
4.1. Tạo điều khiển text Input
4.1.1. Điều khiển nhập văn bản một dòng
Công 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.
Cú pháp: <input type = “text” name = “first_name” />
Các thuộc tính
- Type: Cho biết loại điều khiển nhập liệu và đối với điều khiển nhập văn bản, nó sẽ được đặt thành văn bản .
- 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ị.
- Value: Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển.
- Size: ho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự.
- Maxlength: Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.
4.1.2. Điều khiển nhập mật khẩu
Công dụng: Đâ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.
Cú pháp: <input type = “text” name = “first_name” />
Thuộc tính: Danh sách các thuộc tính tạo trường mật khẩu
- Type: Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào bằng mật khẩu, nó sẽ được đặt thành mật khẩu .
- 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ị.
- Value: Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển.
- Size: Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự.
- Maxlength: Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản.
4.1.3. Điều khiển nhập văn bản nhiều dòng
Công dụng : Điều khiển này được sử dụng khi người dùng được yêu cầu cung cấp thông tin chi tiết có thể dài hơn một câu.
Cú pháp:
<textarea rows = “5” cols = “50” name = “description”>
Nhập các mô tả ở đây
</textarea>
Thuộc tính: Sau đây là danh sách các thuộc tính cho thẻ <textarea>.
- 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ị.
- Rows: Cho biết số hàng của hộp vùng văn bản.
- Cols: Cho biết số lượng cột của hộp vùng văn bản
Ví dụ về tạo Form và khai báo thuộc tính
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" /><br>
Last name: <input type = "text" name = "last_name" />
User ID : <input type = "text" name = "user_id" /><br>
Password: <input type = "password" name = "password" />
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Nhập mô tả ở đây
</textarea>
</form>
</body>
</html>
Kết quả:
4.2.Tạo nút radio(Radio Button)
Công dụng: Các nút radio được sử dụng khi trong số nhiều tùy chọn, chỉ cần một tùy chọn để được chọn.
Cú pháp:
<form> <label for="gender">Gender: </label> <input type="radio" id="gender" name="gender" value="male"/>Male <input type="radio" id="gender" name="gender" value="female"/>Female <br/> </form>Thuộc tính: Sau đây là danh sách các thuộc tính cho Radio Button
- 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.
- Name: 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.
- Value: Giá trị sẽ được sử dụng nếu hộp radio được chọn.
- Checked: Giá trị sẽ được sử dụng nếu hộp radio được chọn.
4.3. Tạo hộp kiểm (Checkbox Control)
Công dụng: Hộp kiểm được sử dụng khi cần nhiều hơn một tùy chọn để được chọn.
Cú pháp:
<form> Sở thích:<br> <input type="checkbox" id="cricket" name="cricket" value="cricket"/> <label for="cricket">Cricket</label> <input type="checkbox" id="football" name="football" value="football"/> <label for="football">Football</label> <input type="checkbox" id="hockey" name="hockey" value="hockey"/> <label for="hockey">Hockey</label></form>Thuộc tính: Sau đây là danh sách các thuộc tính cho Checkbox
- 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 hộp kiểm.
- Name: 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 hộp kiểm
- Value: 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 hộp kiểm.
- Checked: Đặt thành đã chọn nếu bạn muốn chọn nó theo mặc định.
4.4. Tạo Hộp chọn (Select Box )
Công dụng: 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.
Cú pháp:
<select name = "dropdown">
<option value = "Maths" selected>Toán</option>
<option value = "Physics">Vật lý</option>
<option value = " chemistry">Hoá</option>
</select>
Thuộc tính: Sau đây là danh sách các thuộc tính cho Select Box
- 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ị.
- Size: Đượ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ị..
- Multiple: Nếu được đặt thành “nhiều” thì cho phép người dùng chọn nhiều mục từ menu..
Thuộc tính quan trọng của thẻ
- value: Giá trị sẽ được sử dụng nếu một tùy chọn trong hộp chọn được chọn.
- selected: Chỉ định rằng tùy chọn này phải là giá trị được chọn ban đầu khi trang tải..
- label: Một cách khác của các tùy chọn ghi nhãn.
4.5. Tạo hộp Tải file lên (File Upload Box)
Công dụng: 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 tệp lên, còn được gọi là hộp chọn tệp.
Cú pháp: <input type = "file" name = "fileupload" accept = "image/*" />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 tệp lên
- 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ị.
- Accept: Chỉ định các loại tệp mà máy chủ chấp nhận.
4.6. Tạo Nút điều khiển (Button Controls)
Công dụng: Dùng thi hành lệnh.
Cú pháp:
<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 = "/html/images/logo.png" />
Thuộc tính type có thể lấy các giá trị sau :
- Submit: Thao tác này sẽ tạo một nút tự động gửi biểu mẫu.
- Reset:Thao tác này sẽ tạo một nút tự động đặt lại các điều khiển biểu mẫu về giá trị ban đầu của chúng.
- 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 đó.
- 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.