Thiết kế - tạo Form trong HTML - Form in HTML

iThuthuat -
Thiết kế, tạo Form trong HTML là một kỹ thuật rất cần thiết trong thiết kế Website.
sử dụng Form để nhập dữ liệu, lựa chọn các bảng mục... Trong quá trình nhập, Form cho phép bạn lựa chọn thông tin từ người dùng và lưu trữ nó cho lần sử dụng sau.
create Form in HTML

Sau đây itviet360 sẽ hướng dẫn tạo Form bằng các tag đơn.
Khi tạo form, ta cần lưu ý nhất hai phần đó là tên nhận dạng (identifier) và giá trị (value) của form đó. Ví dụ : Trong hộp text box với tên là FirstName, người sử dụng gõ vào Vu, thì dữ liệu gửi đến server là FirstName=Vu
Cấu trúc: Tag Form nằm giữa tag


<...các tag khác...>



trong đó thuộc tính METHOD có hai giá trị là POST và GET. Nếu giá trị là POST, nó cho phép gửi dữ liệu từ máy Client đến Server (thường được sử dụng trong Form nhập liệu). Còn với GET thì chỉ được sử dụng trong Form vấn tin. Còn ACTION chỉ ra vị trí của CGI Script trên Server sẽ được thực hiện. Các tag trong Form thường dùng chủ yếu là
,
CODE:



cols: độ rộng tính theo ký tự.
rows: chiều cao vùng văn bản tính theo hàng.
Name: thuộc tính để nhận dạng, sử dụng trong Script. Các bạn lưu ý là Text Blocks không bắt đầu bằng tag INPUT.
2. Dạng Form Text Boxes
DEMO:
Name:
CODE:

Trong đó:
- size: chiều dài của Text Boxes.
- maxlength, minlength: ký tự tối đa / tối thiểu có thể nhập vào.
- value: là giá trị kiểu xâu được hiển thị.
3. Password Boxes
DEMO:
Password:
CODE:

Giống Text, khác là ký tự không cho hiển thị type="password"
4. Radio Button
DEMO:
Giới tính: NAM
CODE:

- value: chứa dữ liệu gửi đến server
5. Check Boxes
DEMO:
Ế trong thế ngẩng cao đầu
tương tự như Radio, khác thuộc tính chekbox
CODE:

6. Menu
DEMO:
 Có multiple 

Không có multiple
7. Submit and Reset Buttons
Nút Submit là nút để server có thể lấy thông tin từ người sử dụng. Sau khi nhập liệu song, người dùng ấn vào Submit thì mọi thông tin sẽ gửi đến server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với thông tin báo lỗi.
Còn nút Reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng các giá trị mặc định.
DEMO SUBMIT:
DEMO RESET:
Thuộc tính value chứa phần text hiển thị trên nút bấm. Reset chỉ khởi động lại các giá trị trong cùng một form.
Code SUBMIT:
Code SESET:
-----------------------------
Chúc các bạn vui vẻ !

0 comments: