FORM TRONG HTML

Đị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>

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