Học về Form trong HTML

Cách sử dụng mẫu biểu trong HTML:
Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ...

Mẫu biểu được bắt đầu bằng thẻ <form> và kết thúc bởi thẻ </form>. Giữa 2 cặp thẻ này, các bạn có thể sử dụng các cặp thẻ HTML khác.
Thẻ form có một số thuộc tính sau:
- method
Thuộc tính này có 2 giá trị POST hoặc GET, để xác định dữ liệu gửi lên theo kiểu POST hay GET.
Kiểu GET chính là kiểu mà khi nhập dữ liệu lên máy chủ, các dữ liệu này sẽ được hiển thị trên ô Address dưới dạng các căp tên=giá_tri. Nhược điểm của kiểu này là toàn bộ cái URL và xâu tên=giá_trị kia sẽ bị giới hạn dưới 255 ký tự (do đặc điểm của trình duyệt). Vì vậy để có thể gửi nhiều dữ liệu hơn, người ta đã sinh ra kiểu POST. Với kiểu này, dữ liệu sẽ không bị giới hạn chiều dài 255 ký tự của chuỗi địa chỉ do không bị gộp vào chuỗi địa chỉ. Kiểu POST cũng thường dùng để truyền các dữ liệu nhạy cảm mà người sử dụng không muốn hiển thị trên ô Address (password chẳng hạn).
Ví dụ:
<form method = "post"> Thử một tí
</form>
- action: Thuộc tính này sẽ chỉ định form gửi dữ liệu đến trang nào. Trong trường hợp thuộc tính này không được khai báo, form sẽ gửi thẳng dữ liệu và yêu cầu về chính trang hiện hành (sau đó trình duyệt sẽ tải lại nội dung mới).
Ví dụ:
<form method = "post" action ="thu2ti.php"> Thử hai tí
</form>
Tuy nhiên, 2 ví dụ trên chưa có ý nghĩa gì, vì chúng ta chưa trang bị các thành phần cơ bản của form như ô văn bản, nút bấm...

Các thẻ nhập vào (input)
Thẻ input có một số thuộc tính, mỗi thuộc tính sẽ quy định những chức năng riêng:
- name: Chỉ định tên cho thẻ. Tên này sẽ được gửi lên máy chủ cùng giá trị nhập vào cho thẻ.
- Value: Xác định giá trị đặt trước cho thẻ.
- type:
Thuộc tính này có một số giá trị sau:

* submit: Sẽ xác định một nút bấm (submit) mà khi kích chuột vào đó, form sẽ tự động kích hoạt và gửi dữ liệu đi
* text: Hiển thị một ô văn bản cho phép người sử dụng nhập văn bản
* password: Hiển thị ô văn bản để nhập password.
* hidden: Tạo một biến ẩn, ta có thể dùng nó để lưu trữ các dữ liệu "ẩn" khỏi người dùng, tất nhiên nếu họ biết View source lên thì chịu.

Ví dụ: đoạn mã sau sinh ra một form có 1 ô văn bản, một ô nhập mật khẩu và 1 nút bấm:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login" name="B1"></p>
</form>

Thẻ tạo hộp chọn xổ xuống:
Danh sách sổ xuống là một ô danh sách cho phép bạn kích chọn 1 mục trong danh sách sẵn có.
Để tạo một hộp chọn sổ xuống, ta phải sử dụng 2 thẻ: Thẻ Select và thẻ Option như sau:
<Select name =xxx>
<option value = gia_trí1>nội dung 1</option>
<option value = gia_trí2>nội dung 2</option>
<option value = gia_trí3>nội dung 3</option>
.....
<option value = gia_trín>nội dung n</option>
</select>
Trong đó:
Thẻ Select với thuộc tính name sẽ xác định tên của hộp danh sách sổ xuống.
Các thẻ option xác định giá trị của tên biến trong thẻ select nếu được chọn. Giá trị sẽ được gán vào biến nằm trong thuộc tính value của thẻ option.

Ví dụ:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"><input type="submit" value="Login" name="B1"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
</form>

Khi người dùng kích chọn Male, giá trị 1 sẽ được chuyển vào biến sex (được định nghĩa trong thẻ Select>).

Các thẻ lựa chọn radio:
Các thẻ này sẽ cho phép hiển thị ra một danh sách các nút tròn, mà chúng ta sẽ chỉ được phép kích chọn 1 trong các nút đó.
Để hiển thị các nút radio này, các bạn có thể dùng thẻ input với type là radio. Một nhóm các nút radio này sẽ được thiết lập nếu như thuộc tính name của chúng trùng nhau:
<input type="radio" value="" name="R1">

Ví dụ dưới đây mô phỏng dòng chọn kiểu gõ (telex, VNI) trên diễn đàn:

<input type=radio name="switcher" value="OFF" >Tắt
<input type=radio name="switcher" checked value="TELEX" >Telex
<input type=radio name="switcher" value="VNI"> VNI

Thẻ nhập khối văn bản
Thẻ input với thuộc tính type = text chỉ cho phép ta hiển thị ra một ô văn bản nhỏ (hiện được 1 dòng). Để hiện ra một ô soạn thảo lớn, có thể hiển thị nhiều dòng đồng thời, ta phải dùng thẻ textarea:
<textarea name =xxx>Giá trị mặc định của khối văn bản </textarea>

Còn một số cặp thẻ khác, nhưng ít nhất thì tôi cũng không nhớ ra tại thời điểm này. Các bạn có thể vào FrontPage, sau đó sử dụng menu Insert/Form để chèn các thành phần này vào, sau đó các bạn có thể vào xem và thay đổi các thuộc cơ bản của chúng. Còn bây giờ, chúng ta quay lại với việc lấy dữ liệu của PHP:

Để lấy các biến theo kiểu POST, PHP sẽ tự động sinh ra mảng có tên là $HTTP_POST_VARS[]. Mảng này có chỉ số chính là tên của các phần tử trong form và giá trị là nội dung giá trị do người sử dụng nhập vào các phần tử có tên tương ứng. Chẳng hạn với mẫu biểu sau:

<form method="POST">
<p>
User Name:<input type="text" name="T1" size="20"> </p>
<p>
Password:
<input type="password" name="T2" size="20"></p>
<p>Sex: <Select name ="sex">
<option value =1>Male </option>
<option value =0>Female </option>
</select>
</p>
<input type="submit" value="Gui di" name="B1">
</form>
« Last Edit: January 27, 2007, 04:43:03 AM bởi Admin » Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: January 26, 2008, 05:02:29 AM []
ác min cho em hỏi.Có cách nào xây form,(bằng HTML) post một đoạn text lên ngay chỗ người vào xem, vừa đọc ko(như là góp ý đó) bằng html nha chứ PHP em đâu có biết(có cũng chưa biết xử dụng nó ra sao) nếu đựợc thì bằng JS cũng được nhưng cho em xin luôn vì em đang cần, nếu được thì em cám ơn nhiều nhiều!(post ko cần đăng nhập)
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: cmxq lúc: January 26, 2008, 09:01:28 AM []
Tất nhiên là được, nhưng bạn nên biết rằng chỉ có người đó mới đọc được phần nội dung mà người đó post thôi, vì cách này xử lý dữ liệu trực tiếp trên máy khách và không được lưu trữ trên máy chủ, muốn người khác cũng đọc được thì vui lòng học ... php
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: phpKungFu lúc: January 26, 2008, 09:36:27 AM []
Cũng có thể làm với JS, nhưng bạn không có server thì không lưu giữ liệu được. Cookie không đủ sức lưu các dữ liệu text dài.

Đây là 1 ví dụ:

Code:
<body>
<div id="article_content">
blah blah blah blah <br />
blah blah blah blah <br />
blah blah blah blah <br />
</div>
<div id="comments">
</div>
<textarea id="new_comment"></textare><br />
<input type="button" value="Add comment" onClick="addComment()" />
<script language="JavaScript">
function addComment(){
textbox =document.getElementById('new_comment');
comment = textbox.value;
div_comments = document.getElementById('comments');
div_comments.innerHtml += "<hr />" + comment;
alert('comment added');
}
</script>
</body>

Code luôn ở đây, không test nhưng hy vọng chạy !
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: January 28, 2008, 05:04:21 AM []
Quote from: cmxq on January 26, 2008, 09:01:28 AM
Tất nhiên là được, nhưng bạn nên biết rằng chỉ có người đó mới đọc được phần nội dung mà người đó post thôi, vì cách này xử lý dữ liệu trực tiếp trên máy khách và không được lưu trữ trên máy chủ, muốn người khác cũng đọc được thì vui lòng học ... php
ÁC MIN này trả lời xong cười đểu gớm , nhưng dù sao cũng cám ơn các anh nhiều ở đây mọi ng nhiệt tình quá chỗ khác họ chê là sơ đẳng quá ko thèm nói hay sao ý.
các anh cho em hỏi lại, làm thế nào post được một đoạn text lên chỗ đó, như coment cho bài viết chẳng hạn ý? em đang cần quá! PHP thì em sẽ học rồi(nhưng phải học HTML đã chứ nhỉ)
TO; HUNG5S nếu có sever thì cái đọan JS của bác cho em có dùng được ko?tạm thời thì em test thử nhưng thấy ko được
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: doangia lúc: January 29, 2008, 12:28:59 AM []
Trước tiên bạn cần đọc qua bài này : [You must be registered and logged in to see this link.] để hiểu 1 tí về mạng mạng tính , cách thức hoạt động của web . Phân biệt Server-side và Client-side script .
Sau đó đọc [You must be registered and logged in to see this link.] để biết 1 tí về Javascript - một client script phổ biến nhất , được dùng nhiều nhất ( gần như tuyệt đối) trên thế giới .
---
Đầu tiên để giải quyết vấn đề của bạn , phải xác định được rằng :
- Dù JS có làm gì đi nữa thì cũng chỉ để bạn "tự sướng" , 1 mình bạn biết , chả ảnh hưởng gì đến trang web cả . Sau khi tắt nó đi hoặc chuyển sang trang khác thì ... tự khắc sẽ tiêu tan .
- Dù bạn upload trang web lên host hay chỉ chạy dưới máy thì kết quả vẫn như nhau (client-script mà)
ok , tiến hành làm thôi .
ví dụ bạn có 1 form thế này ( ví dụ nhá )
Code:
<html>
<head>
<title>Test form</title>
</head>
<body>
<div id="comment">
<form name="f1" action="" method="post">
Tên :<input type="text" name="ten" value=""><br />
Nội dung<textare name="noidung" cols="30" rows="5"><br />
<input type="button" name="nut" value=" Ok ">
</form>
</div>
</body>
</html>

Đó chỉ mới là form , chưa có script xử lý gì cả nhá . Bạn chỉ chú ý đến tên form ( ở đây là "f1" ) , tên của các phần tử form bên trong (ở đây gồm có "ten" , "noidung" và "nut" )

Tại sao phải chú ý đến nhưng thứ đó . Vì chúng ta phải xác định tên của chúng thì mới có thể truy xuất đến chúng .
Cú pháp chung để truy xuất nội dung form là
document.<tên form > . < tên phần tử form >. < thuộc tính/phương thức của chúng>
ví dụ để lấy nội dung của textfield "ten" bên trên ta sẽ dùng câu script sau :
document.f1.ten.value
Câu đó sẽ trả ra giá trị của textfield đang giữ . value là thuộc tính của nó .

Thêm 1 điều nữa trước khi viết code là để khi ta click vào button "nut" nó sẽ thực thi việc lấy nội dung trong form là ta sẽ dùng chức năng phát sinh và xử lý sự kiện của HTML .
Cú pháp đơn giản
tên sự kiện = code xử lý
1 số tên sự kiện thường dùng
+ onClick : phát sinh khi người dùng click chuột vào đối tượng chứa nó
+ onChange : phát sinh có sự thay đổi giá trị của đối tượng chứa nó
+ onBlur : Phát sinh khi di chuyển tiêu điểm ra khỏi đối tượng
+ onFocus : Phát sinh khi đối tượng nhận tiêu điểm
...........

Nói nhiều quá nhiều khi nói sai . Nhìn vào code thử xem nhá
hãy thêm đoạn code sau vào giữa thẻ <head> và </head> bên trên
Code:
<script>
function xuly()
{
tenuser = document.f1.ten.value;
txt_noidung = document.f1.noidung.value;
txt = document.getElementById('comment').innerHtml = ' Tên :' + tenuser + '<br>' + text_noidung;
}
</script>
Và edit <input type="button" name="nut" value=" Ok "> thành
<input type="button" name="nut" value=" Ok " onClick="xuly()">

Ở đây có dòng có lẽ khiến bạn rối mắt là
txt = document.getElementById('comment').innerHtml = ' Tên :' + tenuser + '<br>' + text_noidung;
Phân tích từ từ thì cũng chả có gì phức tạp . Như bên trên bạn truy xuất form thông qua tên form , tên phần tử form . Nhưng như thế đôi khi rắc rối quá thì hãy dùng document.getElementById , dùng để tham chiếu đến 1 đối tượng thông qua Id của nó ( ID là gì thì hãy nhìn thẻ DIV bên trên nhá
Cú pháp đơn giản
document.getElementById('Tên ID').<thuộc tính / phương thức>
Ở đây tớ dùng thuộc tính innerHtml dùng để chèn các thẻ HTML vào value của đối tượng.
Hết . Test xem . , hy vọng chạy được.
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: January 29, 2008, 11:51:51 PM []

JS thì em chưa biết cũng chưa có đọc qua nhưng nhờ có hai bác( hung5s và đoàn gia)mà em lại hiểu thêm một tí nữa về JS, tuy có thể còn chưa goi là sơ đẳng nhưng cung thấy vui vui là mình lại biết thêm một tí, em học chỉ để cho biêt thôi, chứ ko có kiếm cơm cháo gì ở đây hết vì ko phải nghề của em,vì em chỉ có sự hứng thú và tự mầy mò chứ ko có điều kiện đi học nữa rồi nên sẽ rất cần đến sự chỉ bảo và kinh nghiệm của những người đi trước như các bác , mong sẽ có sự chỉ bảo nhiệt tình của các bác , em xin cám ơn nhiều
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: February 07, 2008, 04:04:01 AM []
năm mới chúc mọi người ở đây và diễn đàn thêm một năm dồi dào sức khỏe, vạn sự như ý, tỷ sự như mơ!
Em xin mở hàng một câu hỏi có thể là hơi ngố, nhưng vì trình độ hạn hẹp nên có thể cũng ko biết hỏi sao cho rõ để các bác hiểu, mong các bác trả lời dùm: liên quan đến câu hỏi mà các bác vừa trả lời em xong, nếu coi như form HTML(post ý kiến đóng góp), là cái vỏ và PHP là phần nhân can thiệp bên trong, để đưa dữ liệu mình vừa nhập lên ngay trang đó thì quá trình đó xả ra như thế nào? Có cần CSDL hay gì đó nữa ko?
- chẳng nhẽ trang web mình vừa tạo ra đó ko phải là một nhánh trong CSDL của mình hả?
mong sơm nhận đựơc câu trả lời( vì em đang rất bức súc) cám ơn các bác nhiều !!!
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: ™[SorivevoL]™ lúc: February 07, 2008, 05:46:43 AM []
Kết cấu nói dể hiểu 1 chút là

HTML <---------> PHP <--------> database

Dữ liệu vừa được nhập vào, sẽ thông qua PHP vào Database, rồi PHP lại lấy từ database ra các dữ liệu và cho hiển thị thông qua html.
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: February 09, 2008, 02:55:23 AM []
cám ơn bác SORIVEVOL nhưng bác hoạc ai đó nếu có thời gian thì có thể nói cụ thể hơn về cái quá trình đó ko?
HTML <---------> PHP <--------> database
bằng cách nào? và được thực hiện như thế nào? em nghĩ đó cũng sẽ là một tút hay và bổ ích cho những người mới vào như em để tự lượng sức mình mà học! cám ơn các bác nhiều nếu ai đó có thời gian để reply cho em và mọi người cùng biết.
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: cmxq lúc: February 09, 2008, 03:00:09 AM []
Bạn xem lại toàn bộ cái này đi: [You must be registered and logged in to see this link.]
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: pegasus lúc: February 15, 2008, 04:37:58 AM []
Cám ơn anh admin! vừa rồi em muốn xem một ví dụ cụ thể thôi, nhưng ko sao em sẽ đọc lại .
có một câu hỏi nữa, khi TK W bằng dreamweave thì thằng này có chách nhiệm đảm đương tạo ra các mã PHP cho mình ko?em nghe nói là có, em có đọc qua các tại liệu hướng dẫn DW nhưng chưa thấy ở đâu nói đến chuyện đó, ái có tài liệu gì có thể chia sẻ cho em ko?
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: ™[SorivevoL]™ lúc: February 15, 2008, 08:09:11 AM []
nếu dw có khả năng tạo mã php thì chắc thế giới hết cần coder php rồi .
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: phpnubie lúc: February 15, 2008, 09:02:21 AM []
Không hẳn vậy đâu sorivevol... dw có thể generate code. tất nhiên nó sẽ không hoàn hảo như hand code, nhưng ng nào muốn làm một trang web động nào đó mà không muốn biết nhiều về lập trình thì cứ vô tư thôi.
xem video tutorial ở đây: [You must be registered and logged in to see this link.]
Logged

Re: Căn bản về HTML - Sử dụng mẫu biểu (form) để nhập dữ liệu
Gửi bởi: joniken lúc: October 23, 2008, 11:14:18 PM []

Code:
<html>
<head>
<title>Test form</title>
</head>
<body>
<div id="comment">
<form name="f1" action="" method="post">
Tên :<input type="text" name="ten" value=""><br />
Nội dung<textare name="noidung" cols="30" rows="5"><br />
<input type="button" name="nut" value=" Ok ">
</form>
</div>
</body>
</html>



Code:
<script>
function xuly()
{
tenuser = document.f1.ten.value;
txt_noidung = document.f1.noidung.value;
txt = document.getElementById('comment').innerHtml = ' Tên :' + tenuser + '<br>' + text_noidung;
}
</script>

bac cho em hoi cai nay la html hay la js vay ?sao em chay khong duoc?