Bắt đầu với việc tạo website tĩnh bằng ngôn ngữ lập trình
Html và Css đặc biệt khi tạo trang web động
bằng PHP hay drupal… thì việc sử dụng form lại vô cùng quan trọng cần thiết.
Form nhập liệụ sử dụng thường xuyên như chuyển dữ liệu từ người dung nhập đến
sever, tạo form đăng nhập….
Chúng ta cùng tìm hiểu để xây dựng form nhập liệu bằng html
hay sử dụng.
Trong HTML <form> là yếu tố xác định một hình thức được
sử dụng để thu thập đầu vào cho người sử dụng:
<form>
Đây
là form
</form>
Yếu tố hình thức
có nhiều loại khác nhau : các yếu tố đầu vào, về văn bản, kiểm tra , các nút
radio, button ..
Các thuộc tính trong thẻ <form>:
. action: đường dẫn đến 1
trang xử lý dữ liệu sau khi người dung ấn nút gửi dữ liệu
. method: Phương thức gửi dữ
liệu
. name : tên form
Các thuộc tính trên thuộc về bên sử lý của server nên nếu bạn
chỉ học về html thì không để ý lắm xong cần nhớ khi tạo form cần các thuộc tính
đó
<input> phần tử
Các phần tử <input> là các yếu tố hình thức
quan trọng nhất.
<Input>
phần tử có thể được hiển thị bằng nhiều cách tùy thuộc vào các loại thuộc tính
mình sử dụng
Ví dụ:
Kiểu
|
Miêu tả
|
<Input type =”text”
|
Định nghĩa lĩnh vực đầu vào là văn bản
|
<Input type = “radio”
|
Định nghĩa nút radio (có nhiều lựa chọn
nhưng chỉ được chọn 1)
|
<Input type =”button”
|
Định nghĩa việc thực thi hành động gửi
như tìm kiếm, sửa , xóa…
|
1.Text Input
<input
type=”text”> dùng định nghĩa đầu vào là 1 dòng cho văn bản
VD
<form action="">
Tên đăng nhập <br>
<input type="text" name="tendangnhap"/><br>
Mật khẩu <br>
<input type="text" name="matkhau"/><br>
</form>
Kết quả:
Tên đăng nhập:
Mật khẩu:
2.Radio Button Input
<input type=”radio”> định nghĩa cho nút radio nút chọn
Nút radio chỉ được chọn 1 trong nhiều trường hợp đưa ra
Ví dụ:
<form action=""> <input type="radio" name="Hoclt" value="hoclaptrinh"/> Học lập trình <br> <input type="radio" name="Hocpts" value="hocphotoshop"/> Học photoshop <br> <input type="radio" name="Hoctest" value="hoctest"/> Học tester <br> </form>
Kết quả
3.Submit button
<input type =”submit”> định nghĩa nút gửi dữ liệu như
một hình thức xử lý
Các hình thức này quy định trong các hình thức hành động thuộc
tính:
Ví dụ
<form action=""> Tên đăng nhập <br> <input type="text" name="tendangnhap"/><br> Mật khẩu <br> <input type="text" name="matkhau"/><br> <input type="submit" name="submit" value="Đăng nhập"/> </form>
Kết quả:
4.Check box
<input type=”checkbox”> định nghĩa chọn nhiều phần tử từ danh sách
đưa ra
Ví dụ:
<form action=""> Bạn thích gì? <br> <input type="checkbox" name="chon" value="chon1"/> Xem phim<br> <input type="checkbox" name="chon" value="chon2"/> Đi mua sắm<br> <input type="checkbox" name="chon" value="chon2"/> Ngủ nướng<br> <input type="checkbox" name="chon" value="chon4"/> Tập thể thao<br> </form>
Kết quả:
5. File upload
<input type=”file”> định nghĩa hình thức chọn file trên ngay máy tính của bạn muốn tải lên trang web của mình làm
<input type=”file”> định nghĩa hình thức chọn file trên ngay máy tính của bạn muốn tải lên trang web của mình làm
Ví dụ:
<form action=""> Chọn file bạn muốn upload? <br> <input type="file" name="chon" value="chon4"/> <br> </form>
Kết quả:
Kết luận: Các thuộc tính của form
Action
|
Chỉ định một địa chỉ (URL) nơi để gửi
|
Autocomplete
|
Chỉ định nếu trình duyệt tự điền biểu mẫu(mặc định:trên)
|
Method
|
Chỉ định phương pháp HTTP được sử dụng khi nộp mẫu đơn(mặc định : GET)
|
Name
|
Chỉ định một tên được sử dụng để xác định
|
Value
|
Giá trị dữ liệu ban đầu để gửi các thành phần form các thành phần
không có value thuộc tính ban đầu sẽ là null
|
Trên đây là tài liệu mà mình muốn chia sẻ cho các bạn về
form cũng như những thuộc tính về form trong html hy vọng nó hữu ích cho các bạn.
Chúc các bạn thành công
---à
Có thể bạn quan tâm:
