Tạo biểu mẫu - form nhập liệu trong html


Tự học html css javascript 08/11/2015 Cùng chuyên mục

Biểu mẫu (form) là một loại giao diện chứa các điều khiển như: text box - button - label - select box - ... giúp cho người dùng nhập liệu để tương tác dữ liệu trong trang web động ( submit data client - server) - form phổ biến như: form liên hệ, đăng ký thành viên, ...

Làm việc với biểu mẫu

Form HTML chứa các phần tử đặc biệt gọi là các điều khiển. Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương tác như: sự kiện, giao diện nhập liệu, ... Dữ liệu do người dùng nhập vào có thể được sử dụng để tương tác với máy chủ. Máy khách (client) chuyển dữ liệu (request data - submit data) đến máy chủ (server) để xử lý. Máy chủ xử lý thông tin rồi trả kết quả về cho máy khách (response data).

Hình 1: Một biểu mẫu (form) html 

Hình 2: Mô hình tương tác máy khách - máy chủ

Sử dụng biểu mẫu (form)

Form thường được dùng cho các mục đích:

  • Thu thập: tên, địa chỉ, số điện thoại, địa chỉ email và các thông tin khác để người dùng đăng ký cho một dịch vụ hay một sự kiện nào đó
  • Thu thập thông tin dùng để đăng ký mua một mặt hàng nào đó, ví dụ: Khi muốn mua một cuốn sách trên Internet, ta phải điền tên, địa chỉ gửi thư (email), phương thức thanh toán (payment method) và các thông tin liên quan khác.
  • Thu thập thông tin phản hồi về một website. Hầu hết các site cung cấp một dịch vụ nào đó đều khuyến khích khách hàng gửi thông tin phản hồi. Ngoài việc xây dựng mối quan hệ với khách hàng, đây còn là một nguồn thông tin đê trao đổi hoặc cải tiến dịch vụ.
  • Cung cấp công cụ tìm kiếm (search box) cho website. Các site cung cấp nhiều thông tin khác nhau thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm thông tin nhanh hơn.

Phần tử form

Tùy chỉnh hiển thị form thông quan các thuộc tính, dưới đây là danh sách một số thuộc tính của thẻ form: 

Thuộc tính Mô tả

ACCEPT   Thuộc tính này xác định danh sách các kiểu MIME được
máy chủ nhận ra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu.

Cú pháp: ACCEPT = "Internet media type" 

Ví dụ: accept="image/gif,image/jpeg" - cho phép gửi đi hình ảnh phần mở rộng là gif và jpeg
ACTION Thuộc tính này xác định vị trí của script sẽ xử lý biểu mẫu hoàn chỉnh và đã được gửi đi.

Cú pháp: ACTION = "URL"
METHOD Thuộc tính này xác định phương thức dữ liệu được gửi đến máy chủ. 

Cú pháp: METHOD = (GET | POST)

Bàng 1: Các thuộc tính của thẻ form

Ví dụ 1: Form đăng ký thành viên - gửi đến server url: example.com/register.php - phương thức truyền dữ liệu: post

<form method="post" action="example.com/register.php">
	<label for="user_name">User Name:</label>
	<input type="text" name="id_user_name" id="user_name"> <br>
	<label for="user_pass">User password:</label>
	<input type="password" name="id_user_pass" id="user_name"> <br>
	<input type="submit" name="register_user" value="Register">
</form>	

Các phần tử nhập liệu của form html

Khi tạo ra một biểu mẫu, ta có thể đặt các điều khiển lên biểu mẫu để nhận dữ liệu nhập vào từ người dùng.

Phần tử INPUT

Phần tử <INPUT> xác định loại của điều khiển trên biểu mẫu. Các thuộc tính của phần tử này là:

Thuộc tính  Mô tả
TYPE Thuộc tính này xác định loại phần tử. Ta có thể chọn một
trong các lựa chọn: TEXT, PASSWORD, CHECKBOX,
RADIO, SUBMIT, RESET, FILE, HIDDEN và BUTTON.
Mặc định là TEXT ( ô nhập liệu văn bản)
NAME Thuộc tính này chỉ tên của điều khiển. Ví dụ: user_name - muốn dùng dữ liệu kiểu mảng cần thêm dấu [] trước tên, ví dụ: contry[] 
VALUE Đây là thuộc tính tuỳ chọn, nó xác định giá trị khởi tạo (giá trị mặc định) của điều khiển.
SIZE Thuộc tính này xác định độ rộng ban đầu của điều khiển. Đối với kiểu là TEXT hay PASSWORD thì kích thước được xác định theo ký tự. Đối với các loại phần tử nhập khác, độ rộng được xác định bằng điểm (pixels)
MAXLENGTH Thuộc tính này được sử dụng để xác định số ký tự lớn nhất có thể nhập vào phần tử TEXT hoặc PASSWORD. Mặc định là không giới hạn
CHECKED  Đây là thuộc tính logic để xác định nút có được chọn hay không. Thuộc tính CHECKED được sử dụng khi kiểu nhập là RADIO hay CHECKBOX. 

Bảng 2: Các thuộc tính của phần tử input

(*) - Để thêm dòng gợi ý cho ô nhập liệu - sử dụng thuộc tính: placeholder = " chú thích "
(*) - Sử dụng điều khiển password để nhập vào mật khẩu - các ký tự nhập vào sẽ bị ẩn đi mà hiện dạng: *****

Điều khiển Textbox

Phần tử này tạo ra một điều khiển nhập văn bản trên một dòng. Thuộc tính SIZE xác định số ký tự có thể hiển thị trong phần tử. Thuộc tính MAXLENGTH xác định số ký tự tối đa có thể nhập vào phần tử này.

Chẳng hạn:
<INPUT TYPE = text VALUE = “” NAME = “textbox” SIZE = 20>

Giá trị VALUE ở đây để hiển thị nội dung ban đầu của văn bản (giá trị mặc định) và để truy xuất văn bản khi biểu mẫu được gửi đi.

(*) - Thẻ input không cần thẻ đỏng như </input> 

Điều khiển Checkbox

Phần tử này tạo ra một điều khiển checkbox. Người dùng có thể chọn một hoặc nhiều checkbox. Khi một phần tử checkbox được chọn, thì cặp tên/giá trị được nhận cùng với biểu mẫu. Giá trị mặc định của checkbox là bật (on). Phần tử checkbox là một phần tử trên dòng và không cần thẻ đóng.

(*) - Thuộc tính status: Thiết lập hoặc truy xuất trạng thái xem checkbox có được chọn hay không.

Điều khiển Radio

Phần tử này tạo ra điều khiển nút radio. Một điều khiển kiểu nút radio (radio button control) được sử dụng đối với các tập giá trị loại trừ lẫn nhau. Các điều khiển radio trong một nhóm phải có cùng tên. Vào một thời điểm, người dùng chỉ có thể chọn một lựa chọn. Chỉ có nút radio được chọn trong nhóm mới tạo nên cặp NAME/VALUE trong dữ liệu được nhận.

Điều khiển Submit

Phần tử này tạo ra một nút Submit. Khi người dùng nhấp vào nút này, biểu mẫu được chuyển đến vị trí được xác định trong thuộc tính ACTION. Cặp tên/giá trị của nút Submit được nhận cùng với biểu mẫu.

Điều khiển Reset

Phần tử này tạo ra nút reset. Khi người dùng nhập vào nút này, các giá trị của tất cả các điều khiển được tái thiết lập trở về giá trị ban đầu, được xác định trong các giá trị thuộc tính của chúng.

Hình 3: Các điều khiển thông thường của form

Phần tử TextArea

Phần tử này tạo ra một điều khiển nhập văn bản trên nhiều dòng so với hộp văn bản nhập một dòng. Thường được dùng khi muốn nhập liệu một đoạn văn bản dài như: Nội dung liên hệ, nội dung bài viết, ... 

Một số thuộc tính của phần tử textarea

  • COLS: Truy xuất độ rộng của TextArea
  • ROWS: Thiết lập hoặc truy xuất số hàng ngang trong <TEXTAREA>
  • SIZE: Thiết lập hoặc truy xuất kích thước của điều khiển
  • TYPE: Truy xuất loại điều khiển, sử dụng giá trị <TEXTAREA>
  • VALUE: Thiết lập hoặc truy xuất giá trị của <TEXTAREA>

Phần tử BUTTON

Phần tử này tạo ra điều khiển Button. Khi người dùng nhập vào nút Submit, biểu mẫu được nhận để xử lý. Cặp tên/giá trị của nút submit được nhận cùng với biểu mẫu.

Thuộc tính TYPE Xác định loại nút. Các giá trị có thể là:
- Submit - Tạo nút gửi giá trị biểu mẫu khi được nhấp vào
- Reset - Tạo nút thiết lập lại (Reset) biểu mẫu và các giá trị của các điều khiển trong biểu mẫu.

Phần tử SELECT

Phần tử SELECT được sử dụng để hiển thị một danh sách các lựa chọn cho người dùng. Mỗi lựa chọn được biểu diễn bởi phần tử OPTION. Một phần tử SELECT phải chứa ít nhất một phần tử OPTION. Thành phần được chọn lựa sẽ hiển thị với màu khác so với các thành phần còn lại.

Gía trị SELECTED để chỉ rằng phần tử đó đã được lựa chọn. Gía trị gửi đi là giá trị của option được lựa chọn. Có thể gom nhóm các lựa chọn (option) bằng thẻ OPTGROUP

MULTIPLE Là thuộc tính logic cho phép người dùng chọn một hoặc nhiều chọn lựa, khi ấy tên của phần tử SELECT phải có dạng mảng [] - như country[].

Ví dụ 2: Lựa chọn một số  quốc gia theo châu lục

<select name="country[]" > <!-- chọn nhiều quốc gia, nhiều châu lục -->
	<optgroup label="Châu Á" value="chau_a">
		<option name="chau_luc[]" value="1">Việt Nam</option>
		<option value="2">Lào</option>
		<option value="3">Campuchia</option>
	</optgroup>
	<optgroup name="chau_luc[]" label="Châu Mỹ" value="chau_my">
		<option value="4">USA</option>
		<option value="5">Canada</option>
		<option value="6">Mexico</option>
	</optgroup>
</select>

Phần tử LABEL

Phần tử LABEl được sử dụng để gắn thông tin vào các phần tử điều khiển. Ví dụ, phần tử TEXT không có nhãn để xác định rõ nó. Ta có thể gán nhãn vào phần tử TEXT khi trang hiển thị. Ta phải xác định thuộc tính ID của điều khiển mà nó được gán vào.

Tải file (file upload)

Để tải 1 file lên máy chủ thông qua form - phương thức truyền đi của form, nhất thiết phải là post - thuộc tính của form phải được đặt là:  enctype="multipart/form-data";  phần tử inputtype = file.

Ví dụ 3: Form tải file lên máy chủ cơ bản ( basic form file upload to server)

<form action="example.com/upload" method="post" enctype="multipart/form-data">
   <label for="id_file_name">Chọn File:</label>
    <input type="file" name="file_name" id="id_file_name">
    <input type="submit" value="Upload File" name="submit">
</form>

Một số form thông dụng

tạo - form - liên hệ - contact - html

Hình 4: Mẫu form liên hệ trong html

tạo form - đăng ký - đăng nhập - register, login - trong html

Hỉnh 5: Mẫu form đăng ký đăng nhập trong html

Ví dụ 4: Mẫu form tìm kiếm - ( search box) - trong html

<form action="example.com/search" method="get">   
    <input type="text" name="key_word" placeholder="Nhập nội dung tìm kiếm" maxlength="120">
    <input type="submit" value="Tìm Kiếm" name="submit">
</form>

Ví dụ 5: Sử dụng table kết hợp các thẻ input - tạo biểu mẫu liên hệ (contact form) trong html

<table>
	<tr>
		<td bgcolor="#7ab6de" ><font color="#ffffff">Liên Hệ Với Chúng Tôi</<font></td>
	</tr>
	<tr>
		<td height="20px"></td>
	</tr>
	<tr>
		<td>
			<label><b>Qúy Danh (*)</b></label>	
		</td>
		<td>
			<input type="text" maxlength="80" placeholder="Họ và tên"/>
		</td>
	</tr>
	<tr>
		<td>
			<label><b>Số điện thoại (*)</b></label>	
		</td>
		<td>
			<input type="text" maxlength="15"/>
		</td>
	</tr>
	<tr>
		<td>
			<label><b>Địa chỉ email (*)</b></label>	
		</td>
		<td>
			<input type="text" maxlength="80" placeholder="...@gmail.com"/>
		</td>
	</tr>
	<tr>
		<td>
			<label><b>Nam/Nữ (*)</b></label>	
		</td>
		<td>
			<span>Nam</span><input type="radio" name="customer_gender" value="nam">
			<span>Nữ</span><input type="radio" name="customer_gender" value="nu">
		</td>
	</tr>
	<tr>
		<td>
			<label><b>Nội dung (*)</b></label>
		</td>
		<td>
			<textarea cols="22" rows="8"></textarea>
		</td>
	</tr>
</table>

Tổng Kết

Sau bài này các bạn đã tìm hiểu về biểu mẫu - form trong html, tìm hiểu các điều khiển của form. Các bạn cần lưu ý - sử dụng đúng loại điều khiển nhập liệu cho mục đích sử dụng:

  • input text dùng để nhập các đoạn văn bản ngắn như định danh, tên, ...
  • textarea dùng để nhập liệu các đoạn văn bản dài -
  • radio dùng cho lựa chọn duy nhất 1 trong 2 giá trị: check - no check,
  • checkbox lựa chọn nhiều giá trị
  • select dùng để lựa chọn dữ liệu kiểu danh sách ...

và để ý một số thuộc tính khác biệt, đặc trưng của các điều khiển (textarea có cols và rows, text có maxlength và size, ... etc). Ở ví dụ 5, các bạn biết kết hợp kiến thức của các bài trước (tạo bảng, thẻ địng dạng, ...).

(*) - Các bạn nghiên cứu, sử dụng thẻ <br> và các thẻ input để tạo form liên hệ mà không sử dụng table (các bạn sẽ thấy sự khác biệt so với việc sử dụng table và nảy sinh vấn đề cần khắc phục về căn chỉnh khoảng cách)




Bình luận:


tự học html