Form trong HTML

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

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:

học lập trình web html css

học lập trình web php

học lập trình web wordpress