• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

[HTML] Form - Biểu mẫu trong HTML

Admin

Well-Known Member
Staff member
Administrator
Tính viết lại bài xử lí form PHP nên viết bài này trước :D , chỉ mong tất cả anh em có thể hiểu.
1. Giới thiệu
Một website sẽ trở nên nhàm chán nếu chỉ "cho đi" chứ không "nhận lại", tức bạn chỉ biết chia sẻ tài nguyên chứ không hề biết khách muốn gì ? khách cần điều gì ? Vì thế ta cần một sự tương tác qua lại giữa khách và quản trị viên, mở rộng hơn là sự tương tác, giao tiếp giữa một cộng đồng.
*. Ví dụ: chat room, diễn đàn, trang góp ý-báo lỗi,... đều có sự giao tiếp, tương tác. Ok ?
*. Vậy cái gì giúp bạn điều đó ? Đó là các loại Server Script như PHP, ASP,.. nhưng cái cổng giúp thông tin đi vào lại được xây dựng bằng HTML.
Hôm nay chúng ta sẽ tìm hiểu về nó: Form - biểu mẫu trong HTML
2. Cấu trúc chung của Form HTML
Ta cùng tìm hiểu nó là gì đã nhỉ ?
Form - Biểu mẫu như nói ở trên nó là cái cổng giúp thông tin đi vào. Cụ thể nó gồm các ô để nhập text, các ô đánh dấu, hay một nút ấn,..
*. Ví dụ: phần bình luận dưới đây là 1 form, lúc gửi bài có các ô nhập tên, nội dung, tag, nút ấn "gửi" cũng là một form,.. Bạn không cần tìm hiểu quá rõ (hại não :D ), mà hãy hình dung nó như thế nào sẽ tốt hơn ^^
*. Form HTML được xây dựng bằng cấu trúc chung sau:
HTML:
<form name="ten_form" method="phuong_thuc" action="link_xu_li"> 
<!- Các thẻ giúp nhập thông tin -!>
</form>
*. Giờ ta sẽ cắt xé ra để hiểu từng phần nhé
- ten_form : Nó giúp ta phân biệt các form với nhau. Để việc xử lí ko bị nhầm lẫn.
- phuong_thuc : Là phương thức để gửi thông tin đi, gồm 2 giá trị GET và POST, mặc định là GET và ta sẽ tìm hiểu sự khác nhau khi ta học cách xử lí thông tin.
- link_xu_li : Link xử lí là đường dẫn tới file xử lí thông tin, nếu không có thẻ này thì được hiểu là xử lí tại chỗ :D
3. Các cách nhập thông tin
Cái ta tìm hiểu bên trên là phần vỏ, giờ thì bóc vỏ để tìm hiểu cái bên trong
*. Thẻ <input>
- Thẻ input này phải nói là rất đa dạng, "thiên biến vạn hoá" (nói thế cho oai).
- Cấu trúc trung:
<input type="dang_input" name="ten_input" value="gia_tri_mac_dinh" />
và còn thuộc tính nữa tùy input.
Chú ý_ Tên Form có thể ko cần đến nhưng tên input thì nhất định phải có, ko có tên sao ta lấy đc giá trị của nó, đúng ko nào ?
---
Các dạng input rất nhiều nên rất khó để mô tả, vì thế mình chỉ đưa ra ví dụ và chỉ nói qua, bạn phải tự thử các ví dụ để hình dung nó theo ý mình.

a. Ô để nhập Text
HTML:
<input type="text" name="ten" value="" /> 
<input type="text" name="ten" value="Điền sẵn 1 cái gì đó..." />

b.
Nhập Password
HTML:
<input type="password" name="ten" value="test-now" />
Những gì điền vào sẽ bị mã hoá thành dấu *
c.
Ô đánh dấu
HTML:
<input type="checkbox" name="ten" value="Đã đánh dấu" />
_Nếu bạn tích vào ô thì input đó sẽ mang giá trị "Đã đánh dấu"
HTML:
<input type="checkbox" name="ten" value="Đã đánh dấu" checked="yes" />
_ Đánh dấu sẵn
d. Radio
Radio là 1 nhóm nút, trong 1 nhóm radio (gồm các radio cùng tên) sẽ không thể chọn 2 nút cùng lúc.
HTML:
<input type="radio" name="radio" value="Đáp án A" />
<input type="radio" name="radio" value="Đáp án B" />
<input type="radio" name="radio" value="Đáp án C" />
<input type="radio" name="radio" value="Đáp án D" />

d.
Input ẩn
khi ta muốn gửi thông tin nào đó mà ko muốn khách nhìn thấy nó thì dùng cái này. Tất nhiên cần thuộc tính value="Giá trị" để gán thông tin.
HTML:
<input type="hidden" name="an_input" value="Không cho khách thấy!" />
e. Submit
Input này là một nút ấn. Khi bạn ấn thông tin sẽ đc gửi đi.
HTML:
<input type="submit" name="submit" value="Gửi đi" />
f. Khung soạn thảo - Textarea
Giờ bỏ qua input, ta dùng thẻ khác. Gần giống text nhưng nó to hơn và có thể điều khiển độ lớn của khung.
HTML:
<textarea name="khung"> </textarea>
<textarea name="khung">Điền sẵn thứ gì đó</textarea>
<textarea name="khung" cols="30" rows="4">Độ lớn: 4 dòng, mỗi dòng 30 kí tự</textarea>
g. List lựa chọn
đưa ra 1 danh sách giúp bạn lựa chọn
HTML:
Bạn đến từ: <select name="luachon">
<option value="VN">Việt Nam</option>
<option value="VT">Vũ trụ</option>
</select>
_ Thẻ select sẽ mang giá trị của thẻ bạn chọn. Ví dụ bạn chọn "Việt Nam", thì nó sẽ mang giá trị VN. Ok ?
4. Kết thúc
Bài học hôm nay đến đây kết thúc. Hẹn gặp lại bạn ở bài hướng dẫn xử lí thông tin từ Form bằng PHP.
Chúc thành công!
 

Facebook Comments

Similar threads
Thread starter Title Forum Replies Date
nutevnn Help Nhờ hướng dẫn fix html trong PHP PHP 0
N HTML Obfuscator v1.1(LETTER ENCODER) Tut, tool, mmo 0
Admin Yilmaz - Username HTML Markup vB5 Add-ons 0
Admin Yilmaz - Hide [code,php,html] content from guests (vb5.6.x) Add-ons 0
Admin [ShikiSuen] Chinese HTML Lang Tag Fix Xenforo 0
Admin Hướng dẫn chỉ cho phép chọn 1 trong nhiều checkbox html HTML & CSS 0
N Lập trình web frontend html-css-bootstrap-responsive Tin tức CNTT 0
B Xin code hiêu ứng flash chuột HTML HTML & CSS 1
H Share code chuyển mã html sang bbcode All Shared Scripts 0
H Share code tạo ảnh chữ lồng php và html All Shared Scripts 3
Admin Share code đua xe bằng html và jquery JavaScript / Ajax 0
KhangSkull [TUT] Khai thác SQLi dạng .html SQL injection 0
Admin Hướng dẫn thêm đuôi .html cho xenforo không dùng add-ons Xenforo 0
Admin Share code php thêm header, footer vào zip html online Mã nguồn wap 1
H HTML bài 5 : Các thẻ HTML thông dụng (P.3) HTML & CSS 1
H HTML bài 4 : Các thẻ HTML thông dụng (P.2) HTML & CSS 1
H HTML bài 3 : Các thẻ HTML thông dụng (P.1) HTML & CSS 0
Admin Remove ability for mods to use HTML in announcements Add-ons 0
Admin Share full code HTML bằng JS anh yêu em HTML & CSS 10
H HTML bài 2 : Giới thiệu về HTML ( tiếp ) HTML & CSS 0
H HTML bài 1 : Giới thiệu về HTML HTML & CSS 0
Admin Xenplaza – Select ALL & Clipboard: CODE, PHP, HTML Xenforo 0
Admin Tài liệu tự học html, css, javascript, php&mysql, asp tiếng việt fix link Kiến thức lập trình 0
Admin vt.Phong end html for XenForo | Đuôi .html cho XenForo Xenforo 0
tubotocdo Share Code xổ số 3 miền [HTML] Mã nguồn wap 0
Admin Improved templates for [code], [html] and [php] bbcodes Vbulletin 0
H Share code html trang welcome đẹp HTML & CSS 1
K [Share] code html Tags google All Shared Scripts 1
Admin Download flat style ui kit html format - đẹp với phong cách đơn giản HTML & CSS 0
Admin Share code html ảnh thần chết Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Tài liệu tự học lập trình web với html, css tiếng việt Sách, truyện, tài liệu 0
Admin Share zip html phim *** 3gp Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Share code html tạo logo Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Share code html tạo logo cho xtgem Wap builder, wapego, xtgem, wen.ru, wapka, wap4 0
Admin Share zip html video full thể loại Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
Admin Share code html nghe gì hôm nay, nhạc ngẫu nhiên, tự động cập nhật HTML & CSS 0
tubotocdo Share [HTML] Code Check Nhiều Domain cho wap.web Mã nguồn wap 0
tubotocdo Share Tạo chử hình Trái Tim [HTML] Mã nguồn web 3
Myshare Khả năng tương thích của HTML 5 HTML & CSS 0
H Xin Admin cho em xin cai code html nay voi Vbulletin 3
H Hỏi Ai co minh xin code html nay voi Vbulletin 6
djdungcuty Share Zip html YeuTruyen.Vn HTML & CSS 1
P Help Ai giúp tớ làm johncms và html với! Johncms 5
Admin Share zip html truyện tình yêu + hạt giống tâm hồn Wap builder, wapego, xtgem, wen.ru, wapka, wap4 2
Admin Share 150 mb html tổng hợp cho wapsite Wap builder, wapego, xtgem, wen.ru, wapka, wap4 1
Yeukodamnoi Help [you] ơi, chia đôi file Zip html này hộ em cái. Mã nguồn wap 6
Yeukodamnoi Help [you] hướng dẫn auto chèn head foot vào các file html trên Host với Hỏi đáp về domain & hosting 11
tubotocdo Share Code tìm kiếm giống GOOGLE cho wap, web, blog [HTML] Mã nguồn wap 3
Admin Share auto wap/web html xtgem full Wap builder, wapego, xtgem, wen.ru, wapka, wap4 4
C Share Code truyen *** html Wap builder, wapego, xtgem, wen.ru, wapka, wap4 5

Similar threads

New posts New threads New resources

Back
Top