Định nghĩa:
Tag <form> được dùng để tạo một “biểu mẫu” HTML cho người dùng.
Tag <form> được dùng để truyền dữ liệu lên máy chủ.
Tag <form> không nên dùng để điều khiển layout.
Cấu trúc:
Trong <form> bắt buộc phải có tham số action.
<form action=””></form>
- Một <form> có thể chứa thành phần <input /> như trường text, checkbox, radio-button, button submit,…
- Một <form> cũng có thể chứa thành phần <select>, <textarea>, <fieldset>, <legend> và <label>.
- Bên trong form cũng có thể chứa các tag khác.
Ví dụ: Form cơ bản
Ví dụ: Dùng thẻ fieldset
Một số thuộc tính trong Form
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| align | left right top middle bottom |
align=”left” | Được dùng để sắp xếp vị trí cho image của <input /> (sử dụng đối với type=”image”). Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế. Không được hỗ trợ trong DTD Strict |
| alt | Text | alt=”Đây là alt” | Xác định alt cho image của <input /> (chỉ cho type=”image”) |
| checked | checked | checked=”checked” | Xác định một thành phần <input /> được chọn trước khi tải trang (sử dụng đối với type=”checkbox” hay type=”radio”) |
| disabled | disabled | disabled=”disabled” | Xác định một thành phần <input /> không hiển thị trước khi tải trang. |
| maxlength | Số | maxlength=”50″ | Xác định số ký tự nhiều nhất được phép nhập của một trường <input /> (sử dụng đối với type=”text” hay type=”password”) |
| name | name | name=”inputName” | Xác định tên cho thành phần <input />. |
| readonly | readonly | readonly=”readonly” | Xác định rằng trường <input /> chỉ được đọc (sử dụng đối với type=”text” hay type=”password”) |
| size | Số | size=”30″ | Xác định chiều rộng của một trường <input />. |
| src | URL | src=”img/ btn_name.gif” | Hiển thị đường dẫn của hình, hiển thị như một button submit. |
| type | button | type=”button” | Xác định loại hiển thị dạng nút nhấn. |
| checkbox | type=”checkbox” | Xác định loại hiển thị dạng hộp kiểm. | |
| file | type=”file” | Xác định loại hiển thị dạng chọn file. | |
| hidden | type=”hidden” | Xác định loại hiển thị dạng ẩn. | |
| image | type=”image” | Xác định loại hiển thị dạng hình. | |
| password | type=”password” | Xác định loại hiển thị dạng password. | |
| radio | type=”radio” | Xác định loại hiển thị dạng chọn lựa. | |
| reset | type=”reset” | Xác định loại hiển thị dạng phục hồi. | |
| submit | type=”submit” | Xác định loại hiển thị dạng submit. | |
| text | type=”text” | Xác định loại hiển thị dạng text.. | |
| value | Giá trị | value=”Gửi” | Xác định giá trị của <input />. |
BÀI TẬP
BÀI 1:
Gợi ý: Dùng Table
Tên đăng nhập: type=”text”
Mật khẩu: type=”password”
Nhập lại mật khẩu: type=”password”
Email: type=”email”
Điện thoại: type=”number”
Địa chỉ: type=”text”
Đăng ký: type=”submit”
Bài 2:
Gợi ý: Dùng table
Sử dụng placeholder để tạo các title ẩn bên trong input
Bài 3:
Gợi ý: Dùng table
Bai vi du: Form