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.
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 <body>
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à
1. Dạng Form Text Blocks:
DEMO:
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: <Input type="submit" name="" value="Submit Button">
Code SESET: <Input type="reset" name="" value="Reset Button">
-----------------------------
Chúc các bạn vui vẻ !
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.
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 <body>
<body>
<Form METHOD="" ACTION=""> <...các tag khác...> </form>
<body>
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à
<INPUT>, <SELECT>, <OPTION>.1. Dạng Form Text Blocks:
DEMO:
CODE:
<textarea cols="20" name="" rows="2"> itviet360 - Mạng máy tính - thủ thuật blogger - Tự học SEO Web, SEO blogger toàn tập</textarea>
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:
<input maxlength="" name="" size="20" type="text" value="" /> 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:
<input type="password" minlength="" name="" size="">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:
<input checked="checked" name="" type="radio" value="" />- 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:
<input type="checkbox" name="" value="" checked>6. Menu
DEMO:
Có multiple
<select multiple="multiple" size="0"><option selected="selected" value="">Tin học</option> <option selected="selected" value="">Thủ thuật blogger</option> <option selected="selected" value="">SEO Web</option> </select> 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: <Input type="submit" name="" value="Submit Button">
Code SESET: <Input type="reset" name="" value="Reset Button">
-----------------------------
Chúc các bạn vui vẻ !
0 nhận xét:
Post a Comment