Học HTML – Tạo form nhập liệu bằng html

Việc tạo ra 1 form nhập liệu trong website là rất cần thiết, thông thường chúng ta sử dụng form nhập liệu để thu thập thông tin người dùng như là: tên, địa chỉ, số điện thoại. Hoặc sau này các bạn học thiết kế website động bằng php hay bất kì ngôn ngữ lập trình nào khác thì việc chúng ta đưa vào sử dụng 1 form nhập liệu để tạo phần đăng nhập tài khoản là rất cần thiết.

Ở bài này tôi sẽ hướng dẫn các bạn cách tạo 1 form nhập liệu bằng HTML và tôi sẽ chỉ cho bạn những thứ cần thiết nhất để sau này bạn có thể ứng dụng nó ra sao.

Cú pháp tạo form nhập liệu

Sử dụng cặp thẻ <form></form> khai báo form .

Kiểu Mô tả
text Xác định đầu vào là văn bản thường
radio Xác định nút radio đầu vào (để lựa chọn một trong nhiều lựa chọn)
submit Tạo nút gửi ( để nộp dữ liệu đã điền vào form )

Bên trong thẻ <form> sẽ sử dụng thẻ <input> để xác định các kiểu nhập liệu cho form, ví dụ:

Tên tài khoản:</br>
<input name="user-name" type="text" /></br>
Mật khẩu:</br>
<input name="mat-khau" type="password" /></form>

Như vậy khi các bạn tạo file html với code bên trên nó sẽ thành như thế này.

Tên tài khoản:
Mật khẩu:

Ngoài ra bên trong form còn phải có một nút đệ trình dữ liệu đã nhập vào để gửi dữ liệu lên server xử lý.

Cú pháp: <input type="submit" value="Submit"> và  no trông sẽ như thế này:

Các thuộc tính của form

Trong form nhập liệu sẽ phân ra làm 2 loại thuộc tính:

Thuộc tính <form>

action : Xác định hành động khi nhấn nút gửi, hay nói cách khác nó sẽ xác định 1 đường dẫn đã khai báo để gửi lên phía máy chủ  xử lý, ví dụ:

<form action="dang-nhap.php">

method: Xác định thuộc tính của phương thức gửi dữ liệu bao gồm 2 thuộc tính ( GET hoặc POST), ví dụ:

<form action="dang-nhap.php" method="get">

name: Đặt tên cho form, vi dụ:

<form action="dang-nhap.php" method="get" name="dangnhap">

Ngoài ra bạn có thể tham khảo các thuộc tính bên dưới để biết thêm

Thuộc tính Mô tả
accept-charset Sử dụng bảng mã, mặc định sẽ là bảng mã mà tài liệu web đang sử dụng
action Xác định hành động khi nhấn nút gửi, hay nói cách khác nó sẽ xác định 1 đường dẫn đã khai báo để gửi lên phía máy chủ  xử lý
autocomplete Chỉ định trình duyệt tự điền mẫu
enctype Mã hóa dữ liệu gửi, mặc định là mã hóa url
method Xác định thuộc tính của phương thức gửi dữ liệu bao gồm 2 thuộc tính ( GET hoặc POST)
name Tên của form nhập liệu
novalidate Chỉ định trình duyệt không cần xác nhận ngày tháng
target Xác định mục tiêu khi nhấn nút gửi dữ liệu.

Chú ý: Hiện tại đây là serie học html cơ bản nhưng form nhập liệu lại được tạo lên từ html cho lên mình chỉ giới thiệu qua cho các bạn biết vậy thôi chứ giải thích kỹ thì nó còn dài lắm. Đặc biệt mấy thuộc tính GETPOST là thuộc về lập trình client-sever vì vậy mình sẽ nói về nó rõ hơn ở serie lập trình php cơ bản nhé.

Thuộc tính <input>

Các thuộc tính được khai báo trong type="thuộc tính ", ví dụ như

<input type="text" name="ten">

Ok, sau đây là danh sách các thuộc tính có trong <input>

text | password | checkbox | radio | submit | reset | file | hidden | image | button | datetime| datetime-local | date | month| time | week| number | range | email …

Bạn có thể sử dụng mẫu form nhập liệu bên dưới này để thử từng thuộc tính nhé, tất cả chỉ việc thay thuộc tính vào trong dấu nháy "" của type .

<form action="vidu.php">
Tên bạn</br>
<input type="text" name="ten" ></br>
Mail</br>
<input type="email" name="e-mail">
</form>

Như vậy bạn đã hiểu về cách tạo form nhập liệu rồi đúng không, hãy nhớ thật kỹ về nó để sau này chúng ta còn sử dụng vào lập trình php và wordpress nữa đấy, nếu quên thì bạn có thể quay lại đây đọc hoặc nếu muốn hiểu sâu hơn hãy lên w3 để đọc nhé.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái phong cách công sở và thích bàn luận quân sự. Đã từng học tại HaUI khóa K16.

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
nội thất nam dương Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
nội thất nam dương
Guest
nội thất nam dương

có video hướng dẫn không ad ơi

Create Account



Log In Your Account