[HTML cơ bản] Tạo form nhập liệu

Form nhập liệu là một trong những thành phần duy nhất trong HTML có khả năng thu thập dữ liệu do người dùng nhập vào, được xem là “cửa ngõ” để tiếp nhận dữ liệu trên website, form chứa những thành phần cho phép nhập dữ liệu theo nhiều kiểu khác nhau. Trong bài viết này mình sẽ chia sẻ đến bạn rõ hơn về form trong HTML và cách sử dụng nó đúng nhất.

Cấu trúc form cơ bản

Form là một thẻ tương tự như các thẻ khác trong HTML, tuy nhiên form là một thành phần đặt biệt, có khả năng gửi dữ liệu được thu thập từ các thành phần trong form đến một nơi xử lý cụ thể. Cấu trúc cơ bản của form như sau:

<form>
.
Các thẻ nhập liệu trong form
.
</form>

Hành động (action) trong form

action là nơi mà form xác định để gửi dữ liệu đến xử lý. Được khai báo trong form như sau:

<form action="action.php">

Phương thức (method) trong form

Phương thức là cách thức form gửi dữ liệu, form hỗ trợ 2 kiểu là post và get.

Phương thức post trong form

Post là phương truyền dữ liệu từ form lên server một cách bảo mật, không hiển thị lên thanh địa chỉ và cũng là phương thức có thể gửi một lượng dữ liệu lớn. Để khai báo phương thức này, bạn chỉ cần thêm như sau

<form action="action.php" method="post">

Phương thức get trong form

Get là phương thức phổ biến không chỉ dùng cho form mà việc điều hướng có gửi dữ liệu cũng được sử dụng phương thức này. Bạn có thể thấy URL của google thường có dạng google.com.vn/search?q=lập+trình khi gõ tìm kiếm, đây là một dạng get. Để khai báo phương thức này trong form, bạn chỉ cần thêm như sau

<form action="action.php" method="get">

Các trường trong form

Các thẻ input

Input là thẻ phổ biến dùng để thu nhập thông tin do người dùng nhập vào. Cấu trúc thẻ input như sau:

<input type=”type-input” name=”name-input“>

Thành phần quan trọng nhất trong input là loại (type) và tên trường (name) để nhận dạng dữ liệu khi truyền đến server.

Input có nhiều loại khác nhau như text, password, submit, reset, radio, checkbox, button, color, date, datetime-local, email, month, number, range, search, tel, time, url, week. Cụ thể các loại được viết như sau:

Loại input text

Đây là loại phổ biến được dùng để nhận tất cả những gì người dùng nhập bao gồm, số, chữ, ký tự,… loại input text được khai báo như sau:

<input type="text" name="name-field">

Loại input password

Khi sử dụng trường nhập liệu được che dấu bởi các ký tự, bạn nên sử dụng loại input password. Loại password được khai báo như sau:

<input type="password" name="psw">

Loại input submit

Sử dụng input loại submit để tạo ra nút hành động gửi dữ liệu. loại này được khai báo như sau:

<input type="submit" value="Gửi">

với value là giá trị hiển thị trên nút. Loại này không cần sử dụng thuộc tính name.

Loại input reset

Sử dụng loại này để hiển thị một nút reset lại các tường có trong các trường nhập trở lại mặc định. Cấu trúc tương tự như loại submit:

<input type="reset" value="Đặt lại">

Loại input radio

Loại này thường được sử dụng ít nhất 2 cái và sử dụng với mục đích lựa chọn 1 trong nhiều. loại này được khai báo như sau:

<input type="radio" name="gender" value="nam">
<input type="radio" name="gender" value="nu">

Lưu ý là các trường name của nó thường là như nhau để dễ dàng cho việc lập trình sau này.

Loại input checkbox

Ngược lại với loại radio, với checkbox bạn có thể chọn nhiều. Tuy nhiên các trường name của chúng phải khác nhau và không được trùng khớp.

<input type="checkbox" name="ck1" value="Check">
<input type="checkbox" name="ck2" value="Check 2">

Loại input button

Nếu bạn cần xử một thuộc tính onclick bạn nên sử dụng loại button. Loại này khác loại submit ở chỗ nó sẽ không gửi dữ liệu mà sẽ thực hiện công việc được yêu cầu, thường là hành động javasctrip. Cấu trúc cụ thể như sau:

<input type="button" onclick="alert('Hello World!')" value="Nhấn đê!">

Các loại input trong HTML5

Một số loại input khác sau đây thuộc về HTML5 và hiện vẫn chưa được 100% các trình duyệt hỗ trợ.

Loại input color

Sử dụng loại input này để hiển một control cho phép chọn màu. Kết quả trả về của loại này là một mã màu tương ứng với màu đã chọn. Rất may là loại này được hỗ trợ bởi hầu hết các trình duyệt. Cấu trúc loại color như sau.

<input type="color" name="color">

Loại input date

Loại này cho phép nhập vào ngày theo định dạng mà máy bạn quy định ví dụ như dd/mm/yyyy. Mặc dù phổ biến nhưng loại này vẫn chưa được hỗ trợ trên Firefox. Cấu trúc cụ thể như sau:

<input type="date" name="day">

Loại input datetime-local

Tương tự loại date, nhưng loại này hỗ trợ thêm giờ đi kèm. Nó cũng không được hỗ trợ trên Firefox. Cấu trúc như sau:

<input type="datetime-local" name="daytime">

Loại input email

Với loại này yêu cầu bạn nhập vào phải là email, nó rất tốt trong việc kiểm soát định dạng, nhưng tiếc là nó không được IE9 hỗ trợ. Cú pháp như sau:

<input type="email" name="email">

Loại input month

Loại này sẽ cho phép nhập vào tháng và năm, nó không được hỗ trợ trên Firefox và IE11. Cấu trúc như sau:

<input type="month" name="bdaymonth">

Loại input number

Là một loại phổ biến mình sử dụng để thay thế cho việc kiểm tra dữ liệu, nó chỉ chấp nhận kiểu nhập vào là số. Tuy nhiên nó chỉ chấp nhận số nguyên nên cũng hạn chế đôi phần. Cấu trúc như sau:

<input type="number" name="quantity" min="1" max="5">

Loại input range

Loại này sẽ hiển thị một control cho phép bạn tùy chỉnh đến con số nhất định trong khoảng nhỏ nhất (min) và lớn nhất (max).

<input type="range" name="points" min="0" max="10">

Tuy nhiên nó sẽ rất khó áp dụng thực tế nếu không sử dụng javasctrip đi kèm.

Loại input search

Loại này được dùng để hiển thị ô nhập tìm kiếm, nhưng đa số không dùng nó cũng không sao, như trên tuandc.com bạn có thể thấy mình dùng kiểu text thay cho kiểu này. Cấu trúc nó đơn giản như loại text vậy:

<input type="search" name="googlesearch">

Loại input tel

Đây là một loại input tuyệt vời để kiểm soát việc nhập số điện thoại. Tiếc là nó chỉ được Safari hỗ trợ thôi nên cũng không được dùng phổ biến. Cấu trúc như sau:

<input type="tel" name="usrtel">

Loại input time

Loại input này chỉ cho phép nhập vào thời gian. Nó cũng là một loại input phổ biến nhưng vẫn chưa được Firefox hỗ trợ. Cấu trúc như sau:

<input type="time" name="usr_time">

Loại input url

Là loại cũng tương đối phổ biến, yêu cầu nhập định dạng URL chính xác. Tuy nhiên loại này vẫn hạn chế trên các trình duyệt IE cũ. Cấu trúc như sau:

<input type="url" name="homepage">

Loại input week

Loại này yêu cầu nhập vào chính xác định dạng theo kiểu tuần. Tuy nhiên nó hơi khó dùng do kiểu định dạng dữ liệu của nó. Loại này chưa được Firefox hỗ trợ. Cấu trúc như sau:

<input type="week" name="week_year">

Các thẻ select

Để hiển thị một danh sách xổ xuống nhiều lựa chọn, thẻ select trong form sẽ là một lựa chọn. Cấu trúc thẻ này như sau:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Bạn lưu ý với thẻ select bạn phải có các thẻ option ở trong. Thẻ select sẽ mang name và thẻ option mang value. Nó sẽ được sử dụng để xử lý dữ liệu sau này.

Thẻ textarea

Để nhập nội dung dài và chứa nhiều ký tự thì thẻ textarea là lựa chọn. Thẻ được sử dụng phổ biến trong hầu hết các website và đặt tính của nó là có thể mở rộng khung nhập liệu. Cấu trúc thẻ như sau:

<textarea name="message" rows="10" cols="30"> Đoạn văn bản </textarea>

• rows là số dòng hiển thị, cols là số chữ hiển thị. nó sẽ hiện scroll (thanh cuộn) khi đoạn text trong vượt qua số khai báo ở rows và cols.

Thẻ button

Đây là thẻ hiển thị nút bấm, nó không khác gì so với input kiểu button nên bạn có thể sử dụng để thay thế cho nhau.

<button type="button" onclick="alert('Hello World!')">Nhấp đây!</button>

Như vậy là mình đã xong một bài viết cơ bản về việc sử dụng form trong HTML. Bạn có thể comment những thắc mắc bên dưới mình sẽ hồi đáp nhé. Trong bài viết sau mình sẽ giới thiệu về Các thẻ meta thông tin cho website